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;width:100%;width: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="width:370px !important;display:block;height:90px !important;" username="gh_*****" path="pages/index/index.html" ><template><button id="btnOpen" style="text-align:center;color:#fff;width: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安全域名。  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM