wx-open-launch-weapp开放标签的使用

1. 样式

跳转小程序的开放标签：wx-open-launch-weapp分两个部分

开放标签

开放标签都能像普通的HTML标签一样在页面中直接使用，我们可以为其添加class、id等全局属性节点，并且可以设置其样式。但是需要特别注意的是开放标签不是插槽模版中节点的包含块。

例如：

<wx-open-launch-weapp
  id="launch-btn"
  username="原始ID"
  path="pages/index/index"
>
    <script type="text/wxtag-template">
          <style>.btn { width: 100%; height: 100% }</style>
      <div class="btn">test2</div>
    </script>
</wx-open-launch-weapp>

#launch-btn {
  width: 100px;
  height: 100px
}

结果：插槽模版中.btn节点宽高设置100%无效

另外，用户无法只通过点击开放标签来跳转小程序，需要点击插槽模版中节点。

插槽模版中节点

插槽中模版的样式是和页面隔离的，也就是说无法在挂载dom元素后动态修改其样式。这就造成插槽模版中节点无法自适应屏幕。

不过我们可以通过在开放标签中设置overflow: hidden;，然后给插槽模版中节点适当增加大小来实现布局要求，例如：

<div class="box">
  <wx-open-launch-weapp
    id="launch-btn"
    username="原始ID"
    path="views/index/service-center/service-center"
  >
    <script type="text/wxtag-template">
        <style>.btn { width: 1000px; height: 1000px }</style>
      <div class="btn">test2</div>
    </script>
    </wx-open-launch-weapp>
</div>

.box {
  position: relative;
  width: 100px;
  height: 100px;
}
#launch-btn {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;  
  z-index: 9;
  overflow: hidden;
}

2. 引入 JS-SDK

Jssdk 的使用，见微信网页开发文档

3. 细节

文档看完，大家可能有点懵，具体到代码中，就是开放标签不显示，你可以排查下下面几个问题：

是否配置安全域名
是否是服务号
通过config接口注入权限验证配置时，url是否正确、jsApiList必填，即便是没有也要写成 sApiList: ['']
小心 iOS !!!

4. vue中使用技巧

不管是hash模式还是history模式，你仅仅需要这么做：

// main.js
import wx from 'weixin-js-sdk';
import axios from 'axios';

(async function() {
  // 接口中入参有一个url，直接取location.href.split('#')[0]
  const { data: wxData } = await axios.post('你们后端提供的接口');
  wx.config({
    appId: wxData.appid, // 必填，公众号的唯一标识
    timestamp: wxData.timestamp, // 必填，生成签名的时间戳
    nonceStr: wxData.nonce, // 必填，生成签名的随机串
    signature: wxData.signature,// 必填，签名
    jsApiList: [''],
    openTagList: ['wx-open-launch-weapp']
  });
})();

然后就可以在每个单文件组件中使用了，对，就是这么神奇！！！！

5. vue3

在vue3中，不能在 <template></template> 中写 <script></script> <style></style> ，然后你需要用到特殊attribute is ，但是vue-eslint-plugin会报错，需要用vue3.0新增指令 v-is ，但是 vue3.1弃用了，这就矛盾了，但是试了 v-is 还是可以的：

<wx-open-launch-weapp username="原始ID" path="pages/index/index">
  <div v-is="'script'" type='text/wxtag-template'>
    <div v-is="'style'">
      .btn {
        color: red;
      }
    </div>
        <button class="btn">打开小程序</button>
    </div>
</wx-open-launch-weapp>