小程序开发笔记#1 封装一个页面栈工具类:思路分析(一)
为啥想要写一个页面栈工具类?
关于官方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,当前页面获取等
后记
下一节开始写代码实现!希望能对刚开始学小程序的朋友有所帮助!
还是小白,如果有错误或更好的想法,欢迎各位大佬一同交流、指出哇~