微信开放标签＜wx |
您所在的位置：网站首页 › 微信中唤醒app › 微信开放标签＜wx |
|
微信开放标签之Vue项目H5唤醒APP
在微信开放标签出来之前，大多数人都是采用 URI Scheme 以及 ios 的universal Link来完成这一需求的，通过URI Scheme/universal Link这种方式，需要在浏览器中打开才行，对应ios来讲universal Link勉强还能接受，但是在Android中就苦不堪言了，安卓浏览器众多，而且部分浏览器还屏蔽掉了URI Scheme，可以说历经千辛万苦完成了这个需求，在领导的眼里，都会觉得你这做的是什么玩意儿，就不能简单一点儿一键唤醒嘛。。。 （当然，如果你的APP在腾讯白名单，就没有这个烦恼，但是… 你懂的）。直到微信出来了，总算见到了一丝光明 首先看一下开放标签说明文档是怎么说的 ，步骤一：绑定域名 步骤二：引入JS文件 步骤三：通过config接口注入权限验证配置并申请所需开放标签 …等等一系列，按照文档来操作就行了，大体就是先在微信公众平台设置js安全域名，再去微信开放平台绑定下移动应用跟微信公众账号，微信公众账号详情里再关联下APP，前端引入SDK ，Android和ios平台也要引入SDK 注意：一定要是微信公众平台的服务号才行哦前端代码在wx.config中加入 openTagList: [‘wx-open-launch-app’] wx.config({ beta: true, debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: res.appId, // 必填，公众号的唯一标识 timestamp: res.timestamp, // 必填，生成签名的时间戳 nonceStr: res.nonceStr, // 必填，生成签名的随机串 signature: res.signature, // 必填，签名，见附录1 jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'], openTagList: ['wx-open-launch-app'] }) wx.ready(function () { console.log('ready') wx.checkJsApi({ jsApiList: ['wx-open-launch-app'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function (res) { console.log('可用') }, fail: (err) => { console.log(err, '不可用') } }) // 分享朋友圈 wx.updateTimelineShareData({ title: title, // 分享标题 link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 success: function () {} }) // 分享好友 wx.updateAppMessageShareData({ title: title, // 分享标题 desc: desc, // 分享描述 link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 success: function () {} }) }) wx.error(function (err) { console.log(err) }) 如何使用 .btn { color: #fff; font-size: 10px; text-align:center; line-height:23px} 打开 -------------------------------------------------------------------------------------------------------------------- methods: { // 监听error 函数 handleErrorFn (e) { // 跳转失败 console.log(JSON.stringify(e), '跳转失败') download() // 这里跳转App下载页面 }, // 监听launch 函数 handleLaunchFn (e) { // 跳转成功 console.log(JSON.stringify(e), '跳转成功') } } 补充：第一点： 如果你遇到不显示问题，首先检查下wx sdk是否初始化成功，其次要注意的是中的元素的样式，必须写在script模板中，严格按照微信文档描述来做 第二点： 暂时还不支持微信开发者工具调试，所以代码必须部署到设置过的js安全域名才能生效，这也是我觉得比较鸡肋的地方 以上便是我做这个功能的时候的一点点小心得，在这里分享给大家，希望能帮助到你们。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |