微信小程序web-view内嵌微信公众号的H5页面路由无法跳转问题

最新推荐文章于 2024-08-23 15:53:06 发布

枍柠`

最新推荐文章于 2024-08-23 15:53:06 发布

阅读量909

点赞数

分类专栏：前端页面需求实现文章标签：微信小程序前端微信

本文链接：https://blog.csdn.net/qq_45630675/article/details/134991764

版权

前端页面需求实现专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文讲述了在微信小程序中通过web-view嵌入uniapp开发的H5页面时，遇到的微信支付功能无法调起的问题，提供了解决方案：在小程序中创建支付页面，通过环境判断进行公众号直接支付或跳转回小程序支付，同时指出了wx.miniProgram.navigateTo方法的版本要求。

摘要由CSDN通过智能技术生成

微信小程序web-view内嵌微信公众号的H5页面路由无法跳转问题

业务场景： 1.0版本的功能是在小程序中进行开发的，2.0版本的部分功能是放在微信公众号（uniapp开发的H5页面）的，小程序通过web-view引入的页面无法调起微信支付功能，在公众号中直接从菜单进入功能就可以唤起微信支付。
解决方案：在小程序中做一个微信支付的页面，公众号内需要微信支付的地方，路由跳转回小程序
注意⚠️：web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 wx.miniProgram.navigateTo最低版本要求1.6.4以上
步骤：判断当前环境（公众号—>直接进行微信支付，小程序—>跳回小程序支付页面唤起支付）
代码：

      const currentEnv = window.__wxjs_environment || ''
      if (currentEnv === 'miniprogram') {
        const requestParams = JSON.stringify(params)
        this.$wx.miniProgram.navigateTo({
          url: `../overTimePay/index?params=${requestParams}`,
          success: function (res) {
            console.log('跳转成功', res);
          },
          fail: function (res) {
            console.log('跳转失败', res);
          }
        })
        return
      }