• 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安全域名。  

  • 相关阅读:
    关于W3Cschool定义的设计模式--常用的9种设计模式的介绍
    正则得介绍和使用——表单验证
    DOM的高级操作-一种JS控制元素的视觉假象
    如何理解JS中this指向的问题
    Vulkan中的实时软阴影与硬件优化
    TensorFlow Distribution(分布式中的数据读取和训练)
    TensorFlow白皮书
    TensorFlow Data模块
    新闻标签提取的评价方法
    基于TF-IDF的新闻标签提取
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/14229759.html
Copyright © 2020-2023  润新知