关于微信标签wx-open-launch-app打开app，如何使用以及如何传递数据

关于微信标签wx-open-launch-app打开app，如何使用以及如何传递数据

一、微信标签如何使用

第一步：导入资源文件，在html中加入

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二步：使用wx-open-launch-app标签

1、参数

1. appid：表示移动应用的AppID

2. extinfo：表示打开app携带的参数，注意参数需要符合客户端可解析的格式

2、标签html具体使用代码：

此处我设置内部样式透明度为0，通过外部调取改组件的样式，来展示具体的内容，方便样式的展示

<wx-open-launch-app class="wx-open-launch-app-container" :appid="appid" :extinfo="extinfo" @ready="handleComponentReady" @error="handleLaunchError" @launch="handleSuccess" @click.stop="handleLaunchClick">
        <script type="text/wxtag-template">
            <style>.wx-open-launch-app-inner-container { position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 1; }</style>
            <div class="wx-open-launch-app-inner-container"></div>
        </script>
</wx-open-launch-app>

3、使用标签之前对jssdk的进行初始化

1. 定义初始化所需参数

   const options = {
         debug: process.env.NODE_ENV == 'development',
         appId: '', // 必填，公众号的唯一标识，注意与标签中传递的appid不同
         timestamp: '', // 必填，生成签名的时间戳
         nonceStr: '', // 必填，生成签名的随机串
         signature: '', // 必填，签名
         jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
         openTagList: ['wx-open-launch-app'],
     };

2. 设置wx初始化

   wx.ready(() => {
     console.log('wx-sdk-ready');
   });
   wx.error((error) => {
     console.log('wx-sdk-error:', error);
   });
   this.launchReady = true;
   wx.config(options);

3. 编写标签相关触发方法

   handleComponentReady(data) {
     // 组件是否加载成功
       this.isLaunchLoad = true;
       console.log('handleComponentReady:', data);
   },
   handleLaunchError(err) {
       console.error('error:', err);
       this.launchReady = false;
       // 标签初始化失败
       // 原方式跳转下载页面
       this.waitJump();
   },
   // 走app store或者腾讯应用宝
   waitJump() {
       console.log('跳转外链下载');
       if (this.isAdr) {
           console.log('走到android下载地址');
           window.location.href = this.downloadCfg.inviteAdr;
       } else {
           console.log('走到ios下载地址');
           window.location.href = this.downloadCfg.ios;
       }
   },
   handleSuccess(data) {
       console.log('handleSuccess:', data);
   },
   // 下载APP按钮-------组件回调
   handleLaunchClick(data) {
     // 点击唤起APP 传参给予客户端
     // launch组件没有加载出来则点击，就跳转下载页面
     if (!this.isLaunchLoad) {
         this.waitJump();
     }
     if (!this.launchReady) {
         this.waitJump();
     }
   },

参考官方地址：微信开发文档