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

时间：2024-02-20 09:26:59
主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP
 
  1. 使用说明
  2. 关联说明
  3. 设置入口
  4. 绑定域名和移动应用
  5. 接入微信开放标签
 
  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插槽为默认插槽，可不声明插槽名称
 
在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
                        });
                    }
                }
            } 
        }

 

 

 

 

相关文章