为啥想要写一个页面栈工具类?
关于官方API
微信官方文档中提供了有关路由的5个API,对应实现不同的页面切换需求,分别为:
- wx.switchTab(Object object)
- wx.navigateTo(Object object)
- wx.navigateBack(Object object)
- wx.reLaunch(Object object)
- wx.redirectTo(Object object)
改进思路(主要还是打代码的习惯)
1)5个API可以看作页面栈的进出栈操作
- tabBar之间的跳转
- 保留当前页面,跳转到应用内的某个页面(但是不能跳到 tabbar 页面)——push(进栈)
- 关闭当前页面,返回上一页面或多级页面——pop(出栈)
- 关闭所有页面,打开到应用内的某个页面——清空栈后push一个页面
- 关闭当前页面,跳转到应用内的某个页面(但是不能跳 tabbar 页面)——先pop后push一个页面
不妨尝试封装一个页面栈工具类,通过更简洁的进出栈操作实现页面切换
2)要实现页面间跳转时的数据传输,一般采用把data放入url中,如:
wx:navigateTo({
url: '../pageTest/pageTest?id=123&name='bao''
})
在目标页面pageTest的onload方法中可以这样获取数据:
onLoad: function (res) {
this.setData({
id:res.id,
name:res.name
})
console.log(this.data.id);
console.log(this.data.name)
},
可以看到,对于大量数据的传输时,url会非常长,处理起来比较不方便,我们可以尝试封装一些方法实现从要传输数据对象到url的转换
NavigateUtilAPI
- push(page页面地址,data需要传递的数据)
- pop(delta返回层数)
- switch(page页面地址,data需要传递的数据):进行tabBar间的切换
- change(page页面地址,data需要传递的数据):改变当前页面
- goto(page页面地址,data需要传递的数据):强制跳转
- (……更加细化的接口,如将data嵌入url,当前页面获取等
后记
下一节开始写代码实现!希望能对刚开始学小程序的朋友有所帮助!
还是小白,如果有错误或更好的想法,欢迎各位大佬一同交流、指出哇~
想法很好!期待你的代码!
哇不错,封装一下就很好,期待你的代码。另外想提个小需求,我有时候跨页传数据传的是json,所以需要先将数据json化,接收数据时也需要解析json,才能拿到原始数据,能不能考虑下这方面的需求,在封装的代码里加上这部分的内容
思路很好!期待你的代码
同小白,感觉你写的很好,一起学习进步!