微信中H5唤起微信小程序

思路：
使用微信开发文档中开发标签：wx-open-launch-weapp实现

要求
1.微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
2.域名绑定
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
注：微信安全域名只能修改绑定3次/每月

wx-open-launch-weapp介绍

属性

名称	必填	默认值	备注
name	是		所需跳转的小程序原始id，即小程序对应的以gh_开头的id
path	否		所需跳转的小程序内页面路径及参数

插槽

名称	必填	默认值	备注
default	是		跳转按钮模版及样式

事件

名称	冒泡	返回值	备注
ready	否		标签初始化完毕，可以进行点击操作
launch	否		用户点击跳转按钮并对确认弹窗进行操作后触发
error	否	{ errMsg: string }	用户点击跳转按钮后出现错误

备注：error事件返回值errMsg说明如下。

errMsg	说明
“launch:fail”	跳转失败

实现（基于vue）
1.在main.js中添加全局自定义元素

Vue.config.ignoredElements = [
    'wx-open-launch-weapp',
]

2.vue页面中实现

<template>
  <div>
    <div id="launch-btn">
      <wx-open-launch-weapp
        id="launch-btn"
        username="小程序原始appIs"
        path="跳转地址"
        @error="handleErrorFn"
        @launch="handleLaunchFn"
      >
        <script type="text/wxtag-template">
          <button class="test-btn">点我跳转小程序</button>
          <style>
            .test-btn{
              width:100%;
              background: #f24f45;
              border-radius: 20px;
              padding:0 10px;
              color:#fff;
              font-size:16px;
              border:none;
            }
          </style>
        </script>
      </wx-open-launch-weapp>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    wxmini() {
      // 获取密钥
      this.$http.get("接口获取权限验证配置"), {}, (res) => {
        console.log(res)
        wx.config({
          debug: false,
          appId: res.appId,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ["onMenuShareTimeline"], // 必填，需要使用的JS接口列表
          openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        })
        wx.ready(function () {
          console.log("ready")
        })
        wx.error(function (res) {
          console.log("err", res)
        })
      })
    },
    handleErrorFn(e) {
      console.log("fail", e.detail)
    },
    handleLaunchFn(e) {
      console.log("success")
    }
  },
  created() {
    const oScript = document.createElement("script")
    oScript.type = "text/javascript"
    oScript.src = "https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"
    oScript.onload = this.wxmini()
    document.body.appendChild(oScript)
  }
}
</script>