H5公众号界面跳转小程序

原理是采用外部布局，内部position实现点击跳转事件，将wx-open-launch-weapp覆盖在外部上方

1.引入 weixin-js-sdk

npm i -S weixin-js-sdk

2.界面使用

不知道path可省略

<div style="position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;flex:1">
           <img src="static/img/ymjz.png" style="width: 1.387rem;height: 1.387rem;margin-bottom: 0.187rem"/>
           <div class="font_style5">健康码</div>

           <wx-open-launch-weapp
             id="launch-btn"
             username="gh_21c954017d6d"
             path="pages/index/index.html"
             style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index:1;background: rgba(0,0,0,.1);overflow: hidden"
           >
             <script type="text/wxtag-template">
               <div style="width: 100px;height: 100px"></div>
             </script>
           </wx-open-launch-weapp>
         </div>




async mounted() {
      //使用微信JSSDK
      await this.setJSAPI();
}

methods: {
 handleLaunchFn(e) {
  console.log("success", e);
 },
 handleErrorFn(e) {
   console.log("fail", e.detail);
 },
setJSAPI() {
let that = this;
 console.log("url", encodeURIComponent(location.href.split('#')[0]));
 this.$axios.get("/getSign?uri=" + encodeURIComponent(location.href.split('#')[0]))
   .then((res) => {
     console.log("getApiTicket", res);
     that.setConfig(res.data);
   })
   .catch((err) => {
     console.log(err);
   })
},
setConfig(data) {
 let that = this;
 wx.config({
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   appId: appid, // 必填，公众号的唯一标识
   timestamp: data.timestamp, // 必填，生成签名的时间戳
   nonceStr: data.noncestr, // 必填，生成签名的随机串
   signature: data.signature,// 必填，签名
   openTagList: ['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
   jsApiList: [] // 必填，需要使用的JS接口列表
 });
 wx.error(function (res) {
   console.log("错误", res);
   // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
 });
 wx.ready(function () {
   console.log("ready");
 });
}

小程序跳转H5

<button bindtap="xcm" type="primary">行程码</button>

xcm(){
    wx.navigateToMiniProgram({
      appId: 'wx8f446acf8c4a85f5',
      path: '',
      envVersion: 'release',// 打开正式版
      success(res) {
           // 打开成功
      },
      fail: function (err) {
        console.log(err);
      }
   })
    console.log("行程码")
  },

跳转小程序信息查看