微信H5页面唤醒APP并传参跳转uniapp

主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP

 

在链接https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html中要看

1. 使用说明
2. 关联说明
3. 设置入口
4. 绑定域名和移动应用
5. 接入微信开放标签

 

 在链接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html中要看

1. 绑定域名
2. 引入JS文件
3. 通过config接口注入权限验证配置并申请所需开放标签
4. 通过ready接口处理成功验证
5. 通过error接口处理失败验证

 

代码示例 :

 

在H5页面中添加点击跳转的元素　

<wx-open-launch-app id="launch-btn" appid="appid" extinfo="goods/1234"> 　　//appid是在微信中绑定的APPId , extinfo为打开APP时传给APP的值,比如我传的是商品这个单词和商品id,用"/"隔开方便截取 <template>
         <p style="color:#fff;background-color: #0095FF;padding:5px 15px;"> APP内打开 </p>
     </template>
</wx-open-launch-app

 

在JS中

<script>
  var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { //如果打开失败可以跳转到提醒下载APP的页面(展示二维码,长按识别公众号下载)
    console.log('fail', e.detail); }); </script>

注意:

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替，来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的default插槽为默认插槽，可不声明插槽名称

详见https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

 

在uniapp的app.vue的onLaunch里写

this.checkArguments(); plus.globalEvent.addEventListener('newintent', e => { 　　this.checkArguments(); // 检测启动参数

　});

 

 

在app.vue的methods中添加方法

checkArguments() { console.log('runtime.launcher: ' + plus.runtime.launcher); // 判断APP打开方式 miniProgram为微信小程序打开
            if (plus.runtime.launcher == 'miniProgram') { // plus.runtime.argumrnts为打开时APP传的值(<wx-open-launch-app>中的extinfo),可以传字符串通过符号截取判断类型
 console.log(plus.runtime.arguments); if (plus.runtime.arguments) { 　　　　　　　　　　　　//我截取了字符串,判断是商品并且根据ID跳转到商品详情页
                    var str = plus.runtime.arguments; var arr = str.split('/'); var id = arr[1]; if (arr[0] == 'goods') { 　　　　　　　　　　　　　　//跳转到商品详情页,注意pages前面的"/"不要忘记,否则会造成无法跳转。使用navigateTo跳转到页面会有返回按钮,点击返回到首页
 uni.navigateTo({ url: '/pages/goods/goods?id=' + id }); } } } }