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

    1. 样式

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

    1. 开放标签

    开放标签都能像普通的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%无效

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

    1. 插槽模版中节点

    插槽中模版的样式是和页面隔离的,也就是说无法在挂载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>
  • 发表回复