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

目前写的项目是公司自己的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页面向微信小程序传递参数要处理”=“字符