VUE使用 wx-open-launch-app 组件开发微信打开APP功能

小咪咪 2022-11-22 00:15 3552阅读 0赞

### 移动端打开app方式： ###

普通浏览器用第三方 [openinstall][]

微信环境用微信开放标签 [wx-open-launch-app][]

### 使用说明 ###

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。

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

对于标签事件，均可通过`event.detail`获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代`event.detail`中的内容。

另外，需要注意以下几点：

1.  页面中与布局和定位相关的样式，如`position: fixed; top -100;`等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
2.  对于有CSP要求的页面，需要添加白名单`frame-src https://*.qq.com webcompt:`，才能在页面中正常使用开放标签。

template.vue:

<template>
      <div class="page">
        <div class="container">
          <div class="btn-group" @click="launch" v-if="wechatState">
            <wx-open-launch-app
              id="launch-btn"
              @error="handleError"
              @launch="handleLaunch"
              :extinfo="dataStr"
              appid="wx6490d6411292d459"
            >
              <script type="text/wxtag-template">
                <style>
                  .btn {
                    padding: 12px;
                  }
                  .download {
                    color: #ffffff;
                    background: #2b303c;
                    width:100%;
                    height:100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    border-radius: 2px;
                  }
                </style>
                <button class="download btn" style="height:50px;width:100%;border:none;">广新App唤起测试</button>
              </script>
            </wx-open-launch-app>
          </div>
        </div>
      </div>
    </template>

style.css

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2][] 标题

## ##

**关键点：**

**1：微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。**

**2：登录[微信公众平台][Link 1]进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，**(如果点击弹出loading***弹窗一闪***而过，说明开发标签***触发成功***，***安全域名***没有配置)

**3：在需要调用JS接口的页面引入如下JS文件：[http://res.wx.qq.com/open/js/jweixin-1.6.0.js][http_res.wx.qq.com_open_js_jweixin-1.6.0.js] （支持https），记得使用Https://**

**4：对于Vue等视图框架，为了避免template标签冲突的问题，可使用`<script type="text/wxtag-template"><script>`进行代替，来包裹插槽模版和样式**

**5：经过测试发现标签内定义的样式真的很尴尬，且不受控制，所以我们直接将标签用 CSS 绝对定位并设透明度为 opacity: 0, 盖在了我们原本的设计图上**

**6：透明度为 opacity: 0 的标签 <script type="text/wxtag-template"> 不能为空，否则宽高会被解析为0，也就是按钮根本点击不到**

**7：标签内 appid 填写的是 微信公众号内填写的你们 app 的 appid**

**8：extinfo 内填的是传递给唤起 app 的数据，而我们发现微信7.0.15版本在ios上，有概率会接收数据失败，不知道是微信的问题还是我们IOS的写法问题**

**9：在 VUE 的 mounted 生命周期回调函数内侦听开放标签的回调事件**

注意：直接在标签内绑定函数@launch="" @error="",效果会更好

mounted(){
        var btn = document.getElementById(this.id)
        btn.addEventListener('launch', e => {
            // 在此处可设置粘贴板内数据，数据是传递给 app 的参数进，
            console.log('success');
        });
        btn.addEventListener('error', e => {
            // 在此处可设置粘贴板内数据，数据是传递给 app 的参数进，
            console.log('fail', e.detail);
            // 唤醒失败的情况下，可用于降级处理比如在此处跳转到应用宝
        });
    }

如何动态生成开发标签：**vue的话用v-html可以实现**

[openinstall]: https://www.openinstall.io/doc/web_sdk.html
[wx-open-launch-app]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201103102024957.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: /images/20221120/b46273bed54640be99e02a0c97be12d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 2]: /images/20221120/036ec4127b824d5d8a70be52e34bf0be.png
[Link 1]: https://mp.weixin.qq.com/
[http_res.wx.qq.com_open_js_jweixin-1.6.0.js]: http://res.wx.qq.com/open/js/jweixin-1.6.0.js