微信公众号开放标签跳转小程序

vue项目

开放标签的使用

 <wx-open-launch-weapp
          id="launch-btn"
          @launch="handleLaunchFn"
          @error="handleErrorFn"
          username="gh_2e2d178a1d95"
          path="pages/webview/webview.html"
        >
          <script type="text/wxtag-template">
          //里面可以写样式
             <style>
                        .top-icon_img {
                          width: 71px;
                          height: 71.5px;
                          margin: 0 auto;
                        }

                            </style>
                              <div class="top-icon_img">
                              //图片需转化成base64不然无法显示
            <img  style="width:75px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAACOCAYAAADn/TAIAAAAAXNSR0IArs4c6QAAIABJREFUeF7sfQecJFW1/n....." alt=""/>
         
         </script>

注入wx.config

methods: {
    onMenuShareAppMessage({ title, desc, link, imgUrl }) {
      let href = document.URL.split("#")[0];
      let obj = {
        str_url: href,
        method: "orderShare"
      };
      this.axios
        .post("/api/xxxxxxx", obj)
        .then(function(res) {
          var data = res.data;
          console.log("分享字段接口返回", data);
          if (data.errCode === "0000") {
            wx.config({
              debug: false, // 生产环境需要关闭debug模式
              appId: data.resultInfo.appId, // appId通过微信服务号后台查看
              timestamp: data.resultInfo.timestamp, // 生成签名的时间戳
              nonceStr: data.resultInfo.nonceStr, // 生成签名的随机字符串
              signature: data.resultInfo.signature, // 签名
              jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "checkJsApi",
                "scanQRCode",
                "chooswWXPay",
                "updateAppMessageShareDate",
                "updateTimelineShareData"
              ], // 必填，需要使用的JS接口列表 "chooseImage","previewImage"
              openTagList: ["wx-open-launch-weapp", "wx-open-subscribe"]  可选，需要使用的开放标签列表，例如['wx-open-launch-app']
            });
            wx.ready(function() {
              wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc: desc, // 分享描述
                link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: imgUrl, // 分享图标
                type: "", // 分享类型,music、video或link，不填默认为link
                dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                success: function() {
                  // 用户点击了分享后执行的回调函数
                }
              });
            });
          } else {
            console.log("调用分享失败");
          }
        })
        .catch(error => {
          console.log("分享接口报错", error);
        });
    },
    handleLaunchFn(e) {
      console.log(e, "dianjji");
    },
    handleErrorFn(e) {
      console.log("fail", e.detail);
    },
  }
};

mouted里调用，此功能包含分享和跳转两个功能

  mounted() {
    // 调用微信分享设置
    this.onMenuShareAppMessage({
      title: "",
      desc: "",
      link: "",
      imgUrl: ""
    });
  },```

![请添加图片描述](https://img-blog.csdnimg.cn/648b1398d4534878ae2c54c8195a8196.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGVmdCAgYW5kICByaWdodA==,size_20,color_FFFFFF,t_70,g_se,x_16)