h5跳转小程序

第一种情况、第二种情况不采用，下面介绍一下第三种方式：wx-open-launch-weapp开放标签

注意：开放对象
1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

1、绑定域名

注意：微信安全域名只能修改绑定3次/每月，登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。（检查h5的安全域名是否配置）

2、h5鉴权

• 引入JS文件
• 在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
  （支持https）
  如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js
  （支持https）

注：Vue 项目在入口 index.html 文件中引入，且注意 JS 版本，如若之前引入过低版本，wx-open-launch-weapp 标签会无法使用，无法正常跳转小程序

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: "XXXXXXXXXXX", // 必填，公众号的唯一标识
  timestamp: this.timestamp, // 必填，生成签名的时间戳
  nonceStr: this.nonceStr, // 必填，生成签名的随机串
  signature: this.signautre, // 必填，签名
  jsApiList: [
    "onMenuShareTimeline",
    "onMenuShareAppMessage",
    "checkJsApi",
    "scanQRCode"
  ], // 必填，需要使用的JS接口列表
  openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
});
wx.ready(function() {
  //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function(res) {
  console.log('res',res);
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

3、开放标签使用

名称	必填	默认值	备注
appid	是		所需跳转的小程序appid，即小程序对应的以wx开头的id
username	否		所需跳转的小程序原始id，即小程序对应的以gh_开头的id（跳转时，有appid会优先使用appid，没有appid才会使用username）
path	否		所需跳转的小程序内页面路径及参数
env-version	否	release	所需跳转的小程序版本，合法值为：正式版release、开发版develop、体验版trial（支持的微信版本：iOS 8.0.18及以上、Android 8.0.19及以上）
extra-data	否		以JSON格式字符串向所需跳转的小程序传递数据。小程序可在App.onLaunch、App.onShow等中获取；小游戏可在wx.onAppShow、wx.getLaunchOptionsSync等中获取（支持的微信版本：iOS 8.0.18及以上、Android 8.0.19及以上）

<template>
  <!-- 公众号跳转小程序 -->
  <div class="wx-open-weapp">
    <wx-open-launch-weapp
        id="launch-btn"
        username="gh_xxxxxxxx"
        :path="`pages/home/index.html?user=123&action=abc`"
        @launch="handleLaunchFn"
        @error="handleErrorFn"
    >
        <script type="text/wxtag-template">
            <style>.btn {width: 100%; text-align: center;}</style>
            <div class="btn">跳转小程序</div>
        </script>
    </wx-open-launch-weapp>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.weixinConfig();
  },
  methods: {
    handleLaunchFn (e) {
      console.log('success', e)
    },
    handleErrorFn(e){
      console.log('fail', e.detail);
    },
    weixinConfig() {
      wx.config({
        debug: false,
        appId: res.data.appId,
        timestamp: res.data.timestamp,
        nonceStr: res.data.nonceStr,
        signature: res.data.signature,
        jsApiList: [
          "scanQRCode",
          "updateAppMessageShareData",
          "updateTimelineShareData",
        ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        openTagList:['wx-open-launch-weapp']
      });
 
      wx.ready(function() {
        console.log('config ready');
      });
      wx.error(function(){
        console.log('config error');
      })
    },
  }
}
</script>
<style lang="less" scoped>
.wx-open-weapp {
  width: 100vw;
  height: 20vw;
  #launch-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: bisque;
    border-radius: 50px;
    font-size: 20px;
  }
}
</style>