h5跳转小程序细节注意点

#官方文档地址

  template模版中
  <div class="pic" style="position: relative;" >
        <img src="/img/XXXXX/scene.png" class="pic" />
        <wx-open-launch-weapp  id="launch-btn" username="gh_开头的小程序原始id" path="pages/hwmap/index.html?mapid=XXXX" @launch="handleLaunchFn" @error="handleErrorFn" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 2;">
              <script  type="text/wxtag-template"> 
              <style>.box { width: 100%;height: 100%;position: absolute;left: 0;top: 0; }</style>
              <div class="box"></div>
              </script>
        </wx-open-launch-weapp>
      </div>
 
 js中
 created(){
 this.onClickOpens() //直接在created中调用
methods：{
 onClickOpens(){   //methods中方法
      const url = window.location.href.split('#')[0]
      const res = await this.$api.XXXXXX(url) //后台返回相应数据
      this.appid = res.appId
      wx.config({
      debug: false,
      appId: res.appId,
      timestamp: res.timestamp,
      nonceStr: res.nonceStr,
      signature: res.signature,
      jsApiList: ["chooseImage", "previewImage"],
      openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如[‘wx-open-launch-weapp’]
      });
 }
 

注意点：

1、开发使用者必须是已认证的服-务-号（服务号可以置顶，订阅号不能），服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、开发使用者必须是已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

3、一定要上线（作者反复在测试环境下尝试，浪费好多天，这一点一定要记住！）

4、必须是在已认证的服务号中做JS接口安全域名验证，“JS接口安全域名”和“IP白名单”都要，IP是指获取微信签名的服务器的IP。

注意：1、2两个条件必须满足其中一个；3、4两个条件必须满足，否则标签中的按钮不会显示（微信文档不讲武德，写的不清楚，稍微不注意就会掉坑）。