微信h5网页跳转小程序，以及跳转内嵌h5小程序指定页面_网页跳转小程序指定页面

1）首先是在index.html中引进微信sdk

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

2）在该h5的vue里，如果h5页面可能会存在多种环境里，那么首先还需要判断微信h5网页环境： isWeixinH5（如果确定该h5页面只会存在微信网页中，那么可以不用判断）

export const isWeixinH5 = () => {
    let ua = navigator.userAgent.toLowerCase()
    return ua.indexOf('micromessenger') > -1
}
1
2
3
4

注意微信按钮的style不好调整，所以我们将它设置为宽度100%，高度适合的一条透明按钮，再将自己所需要的按钮样式写在同样的位置。

   <div style="position: relative;width: 100%;height: 3rem;" v-if="isWxBtn && isWeixinH5 ">
   		//需要的按钮样式，以绝对定位放在微信跳转按钮的相同位置
        <van-button  style="position: absolute;top:1rem">打开小程序</van-button >
        //微信跳转按钮
        <wx-open-launch-weapp
            style="position: absolute;top: 0"
            id="launch-btn"
            username="原始id" //注意不是小程序id，是原始id
            :path="wx_path"
            v-if="isWxBtn">
          <script type="text/wxtag-template">
            <style>.mini-btn {
              width:100%;
              margin: 24px auto;
              height: 3rem;
            opacity: 0}</style> //设置透明度为0
            <p class="mini-btn"></p>
          </script>
        </wx-open-launch-weapp>
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

data () {
    return {
      isWxBtn: false, // 打开微信小程序按钮
      wx_path: 'pages/tab1/tab1?toPath=weixinPath',//跳转小程序的位置和参数（如果小程序是内嵌h5，可以通过该参数判断，进行跳转到指定页面）
      token: localStorage.getItem('token'),
      userId: localStorage.getItem('userId'),
    }
  },

1
2
3
4
5
6
7
8
9

3）在created阶段发起微信验证

 created () {
 	localStorage.setItem('userId', this.$route.query.userId)
    this.userId = this.$route.query.userId//userId需要才h5地址中传过来，并存储
    this.wx_path = this.wx_path + '&token=' + this.token
    this.getWxConfig()//发起微信验证的接口请求
  },
1
2
3
4
5
6

后端验证接口： getSign （验证接口测试最好在线上测试）

export const getSign = (data = {}) => {
    return request({
        url: '后端验证接口地址',
        method: 'post',
        data: data
    })
}
1
2
3
4
5
6
7

  methods: {
      getWxConfig () {
      let that = this
      let url = window.location.href.split('#')[0]
      const query = {
        webUrl: url,
        userId: this.userId
      }
      getSign(query).then(res => {
        wx.config({
          debug: false, // 验证结果弹窗控制，微信环境可能会因为接口安全问题出现失败弹窗，所以直接设置的false，
          appId: res.data.appId, // 公众号唯一appid
          nonceStr: res.data.nonceStr,
          timestamp: res.data.timestamp,
          signature: res.data.signature,
          jsApiList: ['scanQRCode'],//随便填写的一个
          openTagList: ['wx-open-launch-weapp']
        })
        wx.ready(function (success) {
          that.isWxBtn = true //表示验证成功
          console.log('success', success)
        })
        wx.error(function (err) {
          Toast.fail('暂不支持',error);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log('error', error)
        })
      })
    },
  }
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

4）如果是内嵌h5的小程序，需要跳转到指定页面，则在小程序的项目里找到之前:path中跳转页面的js文件

   onLoad: async function (options) {
   ...
   if(options.toPath == "weixinPath"){
                this.setData({
                    url: `${configApi.jump_url}/需要跳转的地址xxx?${str}`, //str是小程序项目需要的一些用户参数，按照自己的小程序决定
                });
            } 
   }
   ...
1
2
3
4
5
6
7
8
9

以上是微信h5页面跳转小程序的代码喔~