微信小程序内嵌H5页面跳转回微信小程序

本文讲述了作者在将公司H5系统接入微信小程序时遇到的跳转问题,包括从H5页面跳转回小程序的路径配置、参数传递中的=符号处理以及是否需要调用wx.config方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目前写的项目是公司自己的H5系统要接入到别人的微信小程序。打开微信小程序回跳转到H5页面里,支付的时候就要跳回微信小程序唤起支付。第一次接触到H5和微信小程序互相跳并且带参,本小白写点东西记录一下。

  • 小程序跳到H5页面带参数没啥说的,H5页面直接使用this.$route.query拿到url上的参数就行,用来判断用户是否登录,如果未登录在触发某些条件时直接跳转回小程序的登录页。

有点让我疑惑是从H5页面跳转回微信小程序,这里分两种情况,第一种是小程序内嵌H5页面跳转回本身的小程序 ,第二种是H5页面跳转到第三方的小程序。这里我遇到的是第一种也是最简单的。

  • 先下载微信官方提供的JSDDK文件,版本是1.6.0,可以直接下载js文件也可以直接npm导入,命令是
    npm install weixin-js-sdk --save  
    这两个是一样的,但引入的时候有区别。在跳转的页面引入
    import wx from 'weixin-js-sdk'

    使用的时候直接调用方法就行。

  • 在调用wx.miniProgram.navigateTo()方法的时候,一定要注意跳转的路径,在微信小程序里面可以直接用pages/login/main跳转,但是在H5页面路径前面一定要加上/才行,也就是/pages/login/main才可以正常跳转。我第一次没成功可能就是没有带/。至于appid我也不知道要不要带,我看有很多文章都是不带的,但是我带了也跳转成功了,应该是没影响。

  • 还有一个点是要不要调用wx.config方法,我查了很多文章有的说在使用JSDDK之前要用,但是又有很多文章根本没有提到。我的理解是,如果是单纯的跳转功能不需要触发小程序的其他功能是不用使用wx.config方法的,直接使用wx.miniProgram.navigateTo()跳转就可以,就像我这种情况。wx.config是获取小程序的其他设置信息。如果跳转需要唤醒其他功能就需要wx.config了。

至于第二种情况肯定要复杂的多,我暂时还没有遇到 。以后遇到了再记录吧

在H5页面向微信小程序传递参数的时候,如果传递的字段里面有“=”符号,微信小程序会默认把=以及后面的参数去掉,我向微信小程序传递的参数是package = "perpay_id=12345456",结果微信小程序接收到的数据只有package = "perpay_id",传递paySign支付签名的时候也是这个原因被小程序过滤掉了=才导致签名验证失败。如果H5页面向微信小程序传递参数要处理”=“字符

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值