公众号内打开微信小程序

业务需求，需要在公众号内增加打开小程序的入口，简单看了官方文档：

①需要jssdk更新到新版本1.6.0
②需要在签名时声明使用jssdk的 wx-open-launch-weapp
③页面内使用时正常调用微信签名
④页面内添加对应的dom结构，并完善样式。

需要注意的是样式，默认是没有任何样式的，甚至还有html的默认样式，需要在样式中添加 padding:0;margin: 0;

js签名部分

function requireConfig() {
  var ops = {
    url: encodeURI(window.location.href),
  }
  axios.post(authUrl, ops).then(res => {
    if (res.code == 1) {
      var data = res.data;
      wx.config({
        debug: false, //调试模式
        appId: data.appId, //公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonceStr, //生成签名的随机串
        signature: data.signature, //签名
        jsApiList: [
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo",
          "onMenuShareQZone",
          "chooseWXPay",
          "hideMenuItems",
          "showMenuItems",
          "hideAllNonBaseMenuItem",
          "showAllNonBaseMenuItem",
          "getLocation",
          "openLocation"
        ],
        openTagList: ["wx-open-launch-weapp"]  //这一句是重点
      });
    }
  }, error => {});
}

html

        <wx-open-launch-weapp
          v-if="Object.keys(user.role).includes('91')"
          id="launch-btn"
          username="gh_320d992e9268"
          path="pages/login/index"
          ><script type="text/wxtag-template">
            <style>
                  .grid-item {position: relative;box-sizing: border-box;padding: 12px 10px;width: 116px;
                    height: 70px;margin-right: 10px;background-color: #FFEEEE;border-radius: 12px;}
                  .textname {position: relative;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;margin: 0;
                    font-size: 16px;color: #FF8888;line-height: 21px;}
                  .block-icon {position: absolute;right: 0;bottom: 0;width: 52px;height: 48px;opacity: .6;background-image: url(https://h5.cunzhen.net.cn/resource/img/cun_new/my/grid_member.png);background-size: cover;}
                </style><div class="grid-item">
                  <p class="textname">网格<br>管理</p>
                  <span class="block-icon"></span>
                </div>
          </script></wx-open-launch-weapp>