公众号H5跳转小程序_小程序需要在公众号绑定安全域名吗

1、配置微信公众号js安全域名–前端域名

2、配置公众号关联小程序–经测试不关联也可以

3、获取公众号APPID、开发者秘钥—后端接口需要、还需设置服务器Ip白名单

wxToMiniApp() {
      console.log(1111);
      let t = this
      // 判断是否是微信浏览器
      // 微信内部
      if (isWx()) {
        let url = window.location.href;
        getWxJsapiSignatureQtApi(encodeURIComponent(url)).then(res => {
          wx.config({
            debug: false,
            appId: res.data.data.appId,
            timestamp: res.data.data.timestamp,
            nonceStr: res.data.data.nonceStr,
            signature: res.data.data.signature,
            openTagList: ["wx-open-launch-weapp"],
            jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline", "getLocation", "chooseImage", "previewImage"]
          })

          wx.ready(function () {
            console.log('config ready111');

          })
          wx.error(function (res) {

          })
        })
      }

    },
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

4、根据开发标签使用步骤
https://blog.csdn.net/weixin_45532305/article/details/109491862
5、需要注意本地开发无法对开放标签进行调试，需要将代码放在公众号安全域名下进行调试
（因为wx.config 在本地无发完成初始化）
6、vue中 axios 不会对 url 中的功能性字符进行编码
需要 encodeURIComponent() 对某个参数进行编码，会编码所有特殊字符 （坑）
https://www.jianshu.com/p/e57951e6e388
7、公众号必须是服务号不能是订阅号
8、多个组件中都有这个功能，将wxToMiniApp配置在APP.vue中,否则只能在一个组件中展示跳转按钮

mounted() {
   this.$nextTick(() => {
     this.wxToMiniApp()
   })
}
1
2
3
4
5