便捷蛙
文章
微信环境下H5跳转小程序
背景：
微信小程序的持续发展，在微信的 H5 页面中打开小程序是一项常见的需求。通过使用微信提供的开放标签 wx-open-launch-weapp，可以让用户从 H5 页面直接打开特定的小程序页面。
1. 配置微信公众平台的业务域名
首先，需要确保你已经在微信公众平台上正确配置了 H5 页面所使用的业务域名。
登录微信公众平台，进入“公众号设置” -> “功能设置”。
在“业务域名”一栏中，添加 H5 页面的域名（例如 ***.com)
确保该域名在微信认证的环境中可用。
2. 获取并配置小程序的原始 ID
使用 wx-open-launch-weapp 标签时，必须提供目标小程序的原始 ID，通常以 gh_ 开头。你可以在微信小程序后台找到这个 ID。
登录微信小程序后台，进入“设置” -> “基本信息”页面。
在开放标签中，你需要将这个 ID 配置到 username 属性中，以确保 H5 页面能够正确调用指定的小程序。
3. 确保 H5 页面在 HTTPS 环境下运行
微信对安全性的要求很高，所有涉及微信 API 和开放标签的 H5 页面必须在 HTTPS 环境下运行。如果页面没有使用 HTTPS 协议，将导致功能无法正常使用。
4. 引入微信 JSSDK
在你的 index.html 中引入微信 JSSDK，以便在 H5 页面中调用微信的功能接口。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>5. 参考代码（js原生版）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转小程序</title>
</head>
<body>
<wx-open-launch-weapp
id="launch-btn"
username='gh_a92c31ca0b11'
path='/pages/index/index.html?from=nbgg'
>
<template>
<style>.btn { padding: 12px; }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
const url = window.location.href;
// 后端接口获取签名、随机字符串，时间戳等参数
$.ajax({
url: 'https://***/api/v1/GetSignature',
type:'get',
data:{
url
},
success:function (res) {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: 'wxc2c0199c8e1326fd', // 必填，公众号的唯一标识
timestamp: ts, // 必填，生成签名的时间戳
nonceStr:nonceStr, // 必填，生成签名的随机串
signature:JSON.parse(res).signature,// 必填，签名
jsApiList: ['openLocation','getLocation','openCard'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
wx.ready(function () {
alert('ready')
console.log('进入ready')
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function (res) {
console.log('ready--err'+res)
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});
},
error:function (err) {
console.log('签名请求出错！', err)
}
})
</script>
</html>点赞0
非特殊说明，本站 idealfrog.cn 上的文章均由本站作者原创，原作品版权归属原作者，转载请联系 @文章作者 授权。转载时请在文首注明， 来源 idealfrog.cn 及教程作者，并附本文链接。谢谢各位编辑同仁配合。
下一篇>
没有下一篇咯~
点击登录，秀出你的神评！