H5页面打开小程序

 <!-- 非微信环境 -->
      <div v-show="!isWeixin" class="wap-poster-main-bg-qrcode2" id="qrcode">
          <img class="wap-poster-main-bg-qrcode2-pic" :src='qrCodeImg' alt="">
      </div>
      <!-- 微信环境 -->
      <div v-show="isWeixin" class="smallRoutine">
        <div class="routineBtn" style="overflow:auto;text-align:center;">如长时间未显示“打开小程序”按钮,请刷新当前页面</div>
      </div>
      <div v-show="isWeixin" class="smallRoutine">
        <div class="routineBtn" id="routineBtn" v-html="html">
          <!-- 点击进入小程序 动态加载-->
          <!-- <wx-open-launch-weapp id="launch-btn"
            username="gh_*****"
            path="pages/index/index.html"
           >
            <script type="text/wxtag-template">
              <button style="background:#FF4E18;border:none;color:#fff;100%;100%;height:100%;text-align:center;font-size:14px">点击进入酒世界小程序</button>
            </script>
          </wx-open-launch-weapp> -->
        </div>
      </div>
data() {
      return {
        isWeixin:true,
        html:'',
      }
    },
getUserAgent(){
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger')
        this.isWeixin=true
      else
        this.isWeixin=false
},

  

 getSdkSing(){
         let _self=this;
         let url = window.location.href.split("#")[0]
         accounts.sdkSign(url).then((result) => {
            if(result.data.code=='200'){
              let obj=result.data.data;
               wx.config({
                // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
                appId:obj.appId, // 必填,公众号的唯一标识
                timestamp:obj.timestamp,  // 必填,生成签名的时间戳
                nonceStr: obj.nonceStr, // 必填,生成签名的随机串
                signature: obj.signature,// 必填,签名
                jsApiList: ['checkJsApi','wx-open-launch-weapp'], // 必填,需要使用的JS接口列表
                openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
              });
                setTimeout(()=>{
                  this.html = `<wx-open-launch-weapp id="launch-btn1" style="370px !important;display:block;height:90px !important;" username="gh_*****" path="pages/index/index.html" ><template><button id="btnOpen" style="text-align:center;color:#fff;100%;height:90px;background:#FF4E18">点击进入酒世界小程序</button></template></wx-open-launch-weapp>`
                },2000)
            }else {
                _self.MintUI.Toast({
                  message:"获取配置信息接口异常",
                  position: 'center',
                  duration: 1500
                });
              }
          }).catch(()=>{
            _self.MintUI.Toast({
              message:"获取配置信息接口异常",
              position: 'center',
              duration: 1500
            });
        });
      },

在wx.config下面多了一项openTagList,开放标签列表,目前支持配置wx-open-launch-weapp,wx-open-launch-app

wx-open-launch-weapp 指H5跳转小程序

wx-open-launch-app 指H5跳转app

username为小程序的原始id,path对应的是小程序的链接地址。

目前此功能仅开放给已认证的服务号网页的域名要在服务号的“JS接口安全域名”下。

若公众号页面跳转对应的小程序,需要注意公众号管理后台是否添加js安全域名。  

原文地址:https://www.cnblogs.com/shuihanxiao/p/14229759.html