微信小程序系列---小程序之间的跳转获取不到参数

根据微信小程序的官方文档，有两种方式实现小程序的跳转，

无论是何种方式，两个小程序都需要一个前提，就是在同一个公众号下，才能进行互相之间的跳转；

第一种：用微信小程序提供的组件

wx.navigateToMiniProgram({

  appId: '', //目标小程序的appid

  path: 'pages/index/index?id=123', //跳转后目标小程序展示的页面

  extraData: {}, //当前小程序需要携带到微信小程序的参数

  envVersion: 'develop', //跳转的版本，develop-开发版本； trail--体验版 release--正式版

  success(res) {

// 打开成功

}

})

可是这个api已经废弃了，我的小程序版本库是2.2.1已经无法使用这个api了，也就不再多说此api

于是就是第二种方法了，同样也是使用微信小程序官方提供的组件

2.

在当前跳转页面的wxml文件中，添加以下组件

<navigator class='btn' target="miniProgram" wx:else open-type="navigate" app-id=" " path="pages/index/index" extra-data="{{extraData}}" version="release" envVersion='release'>预定</navigator>

然后在目标小程序的app.js里面去接收获取到的参数，这一步一定是在app.js中去接收，onlauch或者onshow里面都是可以获取到的；

在目标页面去使用app.data里面的extraData参数就ok了；

其实代码很简单，但是写的过程中，会比较迷茫；

坑如下:

①因为开发者工具中是无法进行实际跳转的，你只能在手机上跳转，手机上跳转后，你会发现看不到自己传过来的参数，这就非常的绝望了，你不知道参数是哪里来的，怎么展示的，怎么传递的；

有一个顺手的办法就是在开发者工具中，提前扫描两个小程序的预览，并且右上角的三个点出打开调试模式；

这样就能清楚的看到传递的参数啦；

②跳转的时候，传递的参数：例如：id：‘2bqw-esw3-342w-111o-9uyi’，类似于这样的参数，就会在传递的过程中丢失横线。这个有两个解决办法，一个是进行编码后传递，传到另一个页面的时候，进行解码；

that.data.extraData.scene = encodeURIComponent(app.data.scene) || '' //编码

scene: decodeURIComponent(app.data.extraData.scene) || '' //解码

在接收页面

第二个方法就是让这样需要传递的id生成规则无需横线，这个就是后台需要做的啦