当前位置:   article > 正文

微信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文件
以tab1为例

   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页面跳转小程序的代码喔~

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/782839
推荐阅读
相关标签
  

闽ICP备14008679号