根据微信小程序的官方文档,有两种方式实现小程序的跳转,
无论是何种方式,两个小程序都需要一个前提,就是在同一个公众号下,才能进行互相之间的跳转;
第一种:用微信小程序提供的组件
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生成规则无需横线,这个就是后台需要做的啦