微信中H5唤起微信小程序_自定义按钮 唤起小程序

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

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

wx-open-launch-weapp介绍

属性

插槽

事件

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

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68