Vue-微信公众号H5跳转小程序史上最全最详细教程（前端）

一、项目需求介绍

中国农业银行云客服公众号-客服大厅，用Vue做的H5页面，有一个需要从H5跳转到小程序的需求，项目完成后，特做此记录，其中遇到很多坑，所以分享到这里以供后来人开发使用。

二、H5跳转小程序全过程

1. 项目安装sdk包，进入项目目录，执行 npm i weixin-js-sdk
2. Vue main.js 导入如下代码

import wx from 'weixin-js-sdk'
Vue.prototype.wx = wx
Vue.config.ignoredElements = ['wx-open-launch-weapp']

3. Vue 项目中 index.html 添加如下代码

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

4. 准备配置小程序，接入sdk。这里我自己封装的一个方法，需要的四个参数全部需要你们自己的后端看文档写接口，然后返回给你，其他的参数jsApiList（wx-open-launch-weapp必须配置，其他看你项目需求）、openTagList（必须写一个wx-open-launch-weapp，用来配置小程序的跳转标签）。后端开发文档点击链接

// 微信跳转小程序-进行配置
const config = ({ appId, timestamp, nonceStr, signature }) => {
    wx.config({
        debug: true, // 开发的时候打开调试，配置过程会弹窗提示你配置的情况
        appId,
        timestamp,
        nonceStr,
        signature,
        jsApiList: [
            'wx-open-launch-weapp', // 跳转小程序
            'getLocation', // 获取定位信息
            'openLocation', // 导航
            'onMenuShareAppMessage', // 分享给朋友
            'onMenuShareTimeline', // 分享到朋友圈
            'onMenuShareQQ', // 分享到QQ
            'onMenuShareQZone', // 分享到QQ空间
            'checkJsApi' // 判断当前客户端版本是否支持指定JS接口
        ],
        openTagList: ['wx-open-launch-weapp']//打开的标签名
    })
    wx.ready(function () {
        console.log('config is success')
    })
    wx.error(function (err) {
        console.log(err)
    })
}

5. 下面是我的调用后端的一些方法（仅供参考），特别需要注意：const url = window.location.href.split(’#’)[0]，这个url配置的是你公众号（不管是测试公众号还是正式公众号）里面设置的js接口安全域名，按照我的url写法到时候传给后端即可。

const getConfig = async () => {
    const url = window.location.href.split('#')[0]
    let { code, data } = await getSmallProgramConfig(url)
    if (code === 200 && data) {
        if (data.length === 0) { // JAVA接口没有缓存
            getAjaxAPI(`${CSharpURL}/Connect2WeChat.ashx?method=getTokenTicket`, async function (res) {
                let {
                    code,
                    data: { records },
                } = res
                if (code === 200) {
                    const { accessToken, jsapiTicket } = records[0]
                    let {
                        code, data
                    } = await postSmallProgramConfig({ accessToken, jsapiTicket, url })
                    if (code === 200) {
                        const { appId, timestamp, nonceStr, signature, } = data[0]
                        config({ appId, timestamp, nonceStr, signature })
                    }
                }
            })
        } else { // JAVA接口有缓存
            config(data[0])
        }
    }
}

6. 之后进入需要调用小程序配置的Vue组件（不能全局配置，必须哪个组件使用哪个组件配置），这样就小程序配置好了，当你测试公众号页面提示 config：ok时就表示接入sdk成功了。

import { getConfig } from '../utils/global'
其他代码忽略
created() {
  getConfig()
},

7. 接下来需要配置小程序标签的跳转（Vue项目必须使用script，这个标签必须写），username：要跳转的小程序的原始id，带gh_开头的；
   path：要跳转的小程序路径，注意必须在index后面带 .html。

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_0465670918cc"
  path="/subPackages/appointment/index.html?bus_type=0&book_type=1"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
>
  <script type="text/wxtag-template">
    <div style="width: 100%; height: 76px; opacity:0;">网点业务预约</div>
  </script>
</wx-open-launch-weapp>

8. 最后调试一下小程序标签的样式（按照你实际项目开发），必须说明的一点是，小程序标签的样式必须将你的代码打包到生产环境，在配置ok的情况下才能显示，其他任何方法都是显示不了标签的。

 <div class="AccordionTitle" style="position: relative">
   <wx-open-launch-weapp
       id="launch-btn"
       username="gh_0465670918cc"
       path="/subPackages/appointment/index.html?bus_type=0&book_type=1"
       style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
     >
       <script type="text/wxtag-template">
         <div style="width: 100%; height: 76px; opacity:0;">网点业务预约</div>
       </script>
     </wx-open-launch-weapp>
     <div class="AccordionTitleL LEFTTEXT">网点业务预约</div>
     <div class="ClickArea">
       <img
         class="AccordionTitleR LEFTTEXT"
         :src="iconImg"
       />
     </div>
   </div>

9. 说一下样式调试技巧，wx-open-launch-weapp标签做一个相对定位，设置它的宽高正好覆盖父标签的宽高，同时让script里面的div设置同样的宽高，并且透明，这样小程序标签就透明的覆盖在上面，非常容易实现跳转。

三、踩坑指南

1. 注意 const url = window.location.href.split(’#’)[0]
2. Vue使用的标签

` <script type="text/wxtag-template">
   <div style="width: 100%; height: 76px; opacity:0;">网点业务预约</div>
  </script>`

四、最后寄语
技术实现的过程一定要耐心、谨慎的处理每一步，祝你们好运。