公众号H5跳转微信小程序

一，绑定公众号

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

二，跳转小程序

- 属性

小程序原始id：gh_*********
path：pages/picBook/picBook.html?params
params说明：第一步[[1]][auth]生成的验签信息，例如 appid=lz20201116&phone=13100000000*

- 用例

	<wx-open-launch-weapp
	  id="launch-btn"
	  username="gh_*******"
	  path="pages/home/picBook.html?appid=lz1235678&phone=17700000000&time=1605512282&encryption=MD5&token=5675f9054bbf6d32903d64637ba5405e">
	  <template>
		<style>.btn { padding: 12px }</style>
		<button class="btn">打开小程序</button>
	  </template>
	</wx-open-launch-weapp>
	<script>
	  var btn = document.getElementById('launch-btn');
	  btn.addEventListener('launch', function (e) {
		console.log('success');
	  });
	  btn.addEventListener('error', function (e) {
		console.log('fail', e.detail);
	  });
	</script>

三，权限验证配置

• H5页面引入微信wx-jsdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

或者

npm install weixin-js-sdk
var wx = require("weixin-js-sdk");

• H5页面config注入

wx.config({
     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，  若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
     appId: '', // 必填，公众号的唯一标识
     timestamp: , // 必填，生成签名的时间戳
     nonceStr: '', // 必填，生成签名的随机串
     signature: '',// 必填，签名
     jsApiList: [], // 必填，需要使用的JS接口列表
     openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

• 完整用例（需线上环境真机测试）

<template>
  <div>
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_**********"
      path="pages/picBook/picBook.html?appid=appid&time=time&user=user&encryption=encryption&phone=phone&token=token"
    >
      <script type="text/wxtag-template">
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>
<script>
var wx = require('weixin-js-sdk');
export default {
  data() {
    return {};
  },
  created() {
    var hrefUrl = window.location.href;
    this.$http
      .get("后台接口获取签名的时间戳、签名的随机串、签名")
      .then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: "", // 必填，公众号的唯一标识
          timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
          signature: res.data.data.signature, // 必填，签名
          jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
        });
        let _this = this;
        wx.ready(function (res) {
          console.log(res);
        });
        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
          console.log('err:'+res);
        });
      })
      .catch((error) => {});
  },
  mounted() {
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success");
    });
    btn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      console.log("fail", e.detail);
    });
  },
};
</script>