微信开放标签＜wx-open-launch-app＞之Vue项目H5唤醒APP
微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP
在微信开放标签出来之前，大多数人都是采用 URI Scheme 以及 ios 的universal Link来完成这一需求的，通过URI Scheme/universal Link这种方式，需要在浏览器中打开才行，对应ios来讲universal Link勉强还能接受，但是在Android中就苦不堪言了，安卓浏览器众多，而且部分浏览器还屏蔽掉了URI Scheme，可以说历经千辛万苦完成了这个需求，在领导的眼里，都会觉得你这做的是什么玩意儿，就不能简单一点儿一键唤醒嘛。。。 （当然，如果你的APP在腾讯白名单，就没有这个烦恼，但是… 你懂的）。直到微信出来了<wx-open-launch-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, // 必填，签名，见附录1jsApiList: ['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)})
如何使用<wx-open-launch-weapp>
<wx-open-launch-app v-if="browserInfo.isWeChat && browserInfo.wxReady" id="launch-btn"@error="handleErrorFn" @launch="handleLaunchFn" appid="微信开放平台绑定的移动应用的AppId" :extinfo="传递给App的参数"><script type="text/wxtag-template"><style>.btn { color: #fff; font-size: 10px; text-align:center; line-height:23px}</style><div class="btn">打开</div></script>
</wx-open-launch-app>
--------------------------------------------------------------------------------------------------------------------methods: {// 监听error 函数handleErrorFn (e) {// 跳转失败console.log(JSON.stringify(e), '跳转失败')download() // 这里跳转App下载页面},// 监听launch 函数handleLaunchFn (e) {// 跳转成功console.log(JSON.stringify(e), '跳转成功')}}
补充：
以上便是我做这个功能的时候的一点点小心得，在这里分享给大家，希望能帮助到你们。
微信开放标签＜wx-open-launch-app＞之Vue项目H5唤醒APP相关推荐
- 微信开放标签wx-open-launch-app唤醒app踩坑记录,launch:fail问题解决
微信开放标签调试了一天,各方面都正常,但是一直报错launch:fail,百思不得其解,早网上搜答案,辛得指点,原来问题如下 如果要唤醒app,必须使用sdk生成的卡片,或者使用微信开发者工具的浏览功 ...
- 微信开放标签--H5唤醒手机app/跳转微信小程序
木剑 前提 代码 注意 前提 微信版本要求为:7.0.12及以上 系统版本要求为:iOS 10.3及以上.Android 5.0及以上 与微信小程序绑定的微信公众号必须为已认证的服务号 让专门管理微信 ...
- vue与微信开放标签，调起app
使用微信开放标签 <wx-open-launch-app></wx-open-launch-app>调起分享到微信网页中的app 此开放标签只能在线上显示,本地与测试环境均不显 ...
- 微信开放标签使用注意说明
先放上微信开放标签开发文档链接 目录 | 微信开放文档 开放对象 已认证的服务号,服务号绑定"JS接口安全域名"下的网页可使用此标签跳转任意合法合规的小程序. 已认证的非个人主体的 ...
- 微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
一.微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤.如果是公众号身份的网页,需要绑定安全域名.具体参见微信开放文档 二.vue.config.js配置因为 在vue项目中,直接使 ...
- 微信开放标签踩坑记录
先上微信官方文档 微信文档 以下要注意的点: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 微信sdk版本需要在1.6.0以上,版本过低 ...
- 微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞
微信开放标签说明文档 使用微信开放标签前置条件 1.绑定域名 登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名" 2 ...
- 使用微信开放标签＜wx-open-launch-weapp＞的踩坑日记
最近在完成H5跳转小程序需求时,使用到了微信官方退出的开放标签<wx-open-launch-weapp>,来谈一谈使用的心得和不足. 1.适用环境 微信版本要求为:7.0.12及以上. ...
- vue3项目中使用微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
一.使用前置条件 微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤.如果是公众号身份的网页,需要绑定安全域名.具体参见官方文档. 二.vue.config.js配置 在vue项目中 ...
最新文章
- onnxruntime c++ 工程实例
- [partial] C#里partial关键字的作用
- wake on lan
- java中的算数运算符号用法与原理分析
- python中线程里面多线程_Python中的线程和多线程是什么
- Daily Scrum 11.5日
- python怎么读写文件-python3 excle(python怎么读写excel文件)
- Object-C中的非正式协议与正式协议
- 给linux用户的11个高级MySQL数据库面试问题和答案
- 11.2 RS232通信接口
- 联想重装系统去掉保护_解决联想硬盘保护系统忘记密码问题，重新安装Windows10系统...
- 超清视频制作：视频补帧+超分辨率
- 你的手机浏览器不支持webgle_Chrome 不支持 WebGL 怎么办？
- 海豚调度Dolphinscheduler源码分析（三）
- 区块链方向的论文如何查找
- Unity鼠标控制物体360°旋转和点击移动
- 08.env和set命令详解
- 在网页中预览excel表格文件
- 达梦数据库（DM8）常用功能总结-图形化界面
- 复刻 Unity编辑器 移动的方式