一.微信内部浏览器使用<微信开放标签>唤起微信小程序
官方开发文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html](%5Bhttps://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html%5D%28https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html%29) 之前我也跟着开发文档走,发现遇到很多坑。
1. 绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 指的是要绑定可访问的安全域名,类似你想在 http://www.baidu.com/demo.html这个页面打开微信小程序,那么你就需要绑定www.baidu.com这个域名
2. 引入JS文件
在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https) 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https) 备注:支持使用 AMD/CMD 标准模块加载方法加载。 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 这一块没什么注意的,引入就完事了。
3. 通过config接口注入权限验证配置并申请所需开放标签
与使用JS-SDK配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个url仅需调用一次)。开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识 //后台返还
timestamp: '', // 必填,生成签名的时间戳 //后台返还
nonceStr: '', // 必填,生成签名的随机串 //后台返还
signature: '',// 必填,签名 //后台返还
jsApiList: [], // 必填,需要使用的JS接口列表 可选'chooseImage'等
openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
签名的相关信息可以通过https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 让后端请求相关接口获取 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 这一块也没什么坑吧,把相关数据放入即可。
4. 通过ready接口处理成功验证
wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
});
5. 通过error接口处理失败验证
wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
});
把上述数据配置好即可,就可以实现微信浏览器唤起微信小程序了。当然这里也有官方提供的例子。 大家可以参考进行配置。 https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html
二.微信外部浏览器使用URL Scheme唤起微信小程序
官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。
直接使用如下代码就可以在外部浏览器打开微信小程序,当然也可以在点击的时候触发下列的事件。 iOS系统支持识别 URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。 Android系统不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,开发者需要使用 H5 页面中转,再跳转到 Scheme 实现打开小程序,跳转代码示例如下:
location.href = 'weixin://dl/business/?t= *TICKET*'
服务端获取方法:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
首先请求https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 拿到access_token,再使用access_token请求https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN来拿到对应的URL Scheme,如下图。 最后我们可以通过上述的两个接口,拿到我们想要的link,如这样weixin://dl/business/?t= TICKET的形式,直接打开即可。 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 需要注意的是,这个方法只能在微信外部浏览器使用,微信内部浏览器需要使用微信开放标签,另外安卓和ios是有区别得。
展示效果如图所示
欢迎大家交流,有问题可以直接评论提出。
|