h5跳转微信小程序
首先我们先来看一下目前微信官方提供的两种打开微信小程序的方式以及相关适用场景
| 打开方式 | 适用场景 | 场景值 | 使用方式 | 备注 | 官网链接 |
|---|---|---|---|---|---|
| URL Scheme | 短信、邮件、等微信外网页打开小程序 | 1065 | location.href = 'weixin://dl/business/?t= *TICKET*' |
TICKET由服务端接口返回（openlink） | 获取 URL Scheme |
wx-open-launch-weapp |
微信内网页 | 1167 | 页面配置<wx-open-launch-weapp>标签 |
需配置JS接口域名或云开发静态网站托管绑定的域名下网页 | https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html |
目前的应用场景是在公众号打开我们的网页，然后跳转到微信小程序的对应页面（因为是微信内网页，微信提倡用jssdk的标签跳转，urlscheme是否可以待验证），下面总结下都需要哪些条件：
一. jssdk
- 绑定域名
具体配置JS接口安全域名(MP_verify_A1x6SQCniCBqVPK2.txt文件千万不要忘记下载，否则再怎么调试都会报错)
-
引入JS文件
-
通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
⚠️这里需要后台调用微信接口，返回js需要的参数https://blog.csdn.net/qq_38420688/article/details/90577741
- 跳转小程序：wx-open-launch-weapp
用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。
4.1 已认证的服务号，服务号绑定JS接口安全域名下的网页可使用此标签跳转任意合法合规的小程序。
4.2 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
若跳转时出现以下页面，表示网页绑定的服务号或小程序无权限，请检查是否符合上述开放对象条件。 <img src="https://res.wx.qq.com/op_res/AVNO5G9YvNvN45ZU0budE1Xv6i1NfyHD-DYJnDyLxv6yjFVhwD_SqdzWxEKAtaPs" alt="无权限提示" style="zoom:30%;" />
- 代码示例
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
二. URL Scheme
通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
生成的 URL Scheme 如下所示：
weixin://dl/business/?t= *TICKET*
iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：
location.href = 'weixin://dl/business/?t= *TICKET*'
该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。
image.png
网友评论