前端实现微信公众号h5页面跳转小程序-成功案例

微信公众号h5页面跳转小程序-成功案例

微信公众号h5页面跳转小程序-成功案例，标题已经明确说明，h5页面可以正常跳转微信小程序

官网说可以，不是我说的

前言

在实现h5页面跳转小程序的过程中需要注意几个关键的问题。接下来，先上代码。再一一分析。

一、代码实现

<template>
  <div class="webView">  
  		//注意：此处所需跳转的小程序原始id，即小程序对应的以gh_开头的id
      <wx-open-launch-weapp id="launch-btn" username="gh_xxx">
            <script type="text/wxtag-template">
              <button class="btn" style="display:block;width:200px;height:100px;background-color:pink;margin: 0 auto;">打开小程序</button>
            </script>
      </wx-open-launch-weapp>
  </div>

</template>

<script>
// 引入微信jssdk
import wx from 'weixin-js-sdk'
import {
  getJumpConfig
} from '@/api/issue'
export default {
  data() {
    return {
      webview:''
    }
  },
  mounted() {
    this.getwxconfig()
    // wx.miniProgram.navigateTo({url: '/page/index/index'})

  },
  methods: {
    // 跳转小程序配置
    getwxconfig() {
      wx.config({
              // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
              appId: 'wxxxx', // 必填，公众号的唯一标识,注意是wx开头的那个
              timestamp: '1619689091', // 必填，生成签名的时间戳
              nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串
              signature: 'bc68cbdcb3bef23e8395989fb7c5371996bcfc5c',// 必填，签名
              jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"], // 必填，需要使用的JS接口列表，我们需要用到的配置即可比如["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"],      
              openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
      });


      wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        var btn = document.getElementById('launch-btn');
          btn.addEventListener('launch', function (e) {
            console.log('success');
          });
          btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
          });
      });

      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
      });
    },
  },
}
</script>

需要后端提供的

 timestamp: 'xxx', // 必填，生成签名的时间戳
 nonceStr: 'xxx', // 必填，生成签名的随机串
 signature: 'xxx',// 必填，签名

二、问题分析

1.js接口域名配置

（1）文件下载
配置域名弹框的上边的文字说明中会提示让下载校验文件

看我的：

就这个75Wu开头的txt文件
（2）文件放置
校验文件放在哪里：将文件放置在域名根目录下
通俗一点就是：将校验文件放在你发布时，将发布文件拖拽到的那个文件夹下边

如果问题请参考

（3）配置域名
在这里配置：

注意：此处配置失败的两种情况，
第一：检验文件未下载，未配置
第二：安全域名写的有问题

2.vue结构中的template

官网中的用例：

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <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>

跳转APP：wx

实际应用中

<template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>

template被vue直接解析掉了，在页面中闪了一下，按钮就消失不见了
所以此时,用script标签解决。

<wx-open-launch-weapp id="launch-btn" username="gh_xxx">
            <script type="text/wxtag-template">
              <button class="btn" style="display:block;width:200px;height:100px;background-color:pink;margin: 0 auto;">打开小程序</button>
            </script>
      </wx-open-launch-weapp>

3.vue结构中的template

wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
              appId: 'wxxxx', // 必填，公众号的唯一标识,注意是wx开头的那个
              timestamp: '1619689091', // 必填，生成签名的时间戳
              nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串
              signature: 'bc68cbdcb3bef23e8395989fb7c5371996bcfc5c',// 必填，签名
              jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"], // 必填，需要使用的JS接口列表，我们需要用到的配置即可比如["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"],      
              openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
      });

很多人说appId是微信公众号中gh开头的那个，我就问，你跳转过吗？成功了吗？直接就报错config:fail
所以是wx开头的公众号的唯一标识

注意：此处，timestamp，nonceStr，signature三个参数是需要从接口动态获取的，我这里测试的时候，直接让后台生成的，所以没有配置动态的。

4.标签的属性配置

  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"

path不是必选项，如果不配置，默认跳转小程序首页，如果需要跳转其他页面则根据实际情况配置即可

5.配置中的弹框提示

wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
      });

config配置成功时提示errmsg:{config:ok}，此时将debug改为false或者直接干掉，弹框就没有了
config配置后提示errmsg:{config:fail},一般是appid配置错误
config配置中的某一项有问题，例如签名无效：errmsg:{config: invalid signature},提示签名无效的原因一般有两个，后台给的签名有问题，另一个可能是没有配置js安全域名

三、后端配置

注意要配置微信公众号wx开头的唯一标识
使用微信secret密钥
url要配置需要跳转的h5页面的url
如果出现签名无效的情况，检查是否配置js安全域名

另外附带
微信 JS 接口签名校验工具

总结

h5页面跳转小程序中遇到的问题和大家分享。