小程序开发笔记#1 封装一个页面栈工具类:思路分析(一)
发布于 2 年前 作者 weimao 3703 次浏览 来自 分享

为啥想要写一个页面栈工具类?

关于官方API

微信官方文档中提供了有关路由的5个API,对应实现不同的页面切换需求,分别为:

  1. wx.switchTab(Object object)
  2. wx.navigateTo(Object object)
  3. wx.navigateBack(Object object)
  4. wx.reLaunch(Object object)
  5. wx.redirectTo(Object object)

改进思路(主要还是打代码的习惯)

1)5个API可以看作页面栈的进出栈操作

  1. tabBar之间的跳转
  2. 保留当前页面,跳转到应用内的某个页面(但是不能跳到 tabbar 页面)——push(进栈)
  3. 关闭当前页面,返回上一页面或多级页面——pop(出栈)
  4. 关闭所有页面,打开到应用内的某个页面——清空栈后push一个页面
  5. 关闭当前页面,跳转到应用内的某个页面(但是不能跳 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

  1. push(page页面地址,data需要传递的数据)
  2. pop(delta返回层数)
  3. switch(page页面地址,data需要传递的数据):进行tabBar间的切换
  4. change(page页面地址,data需要传递的数据):改变当前页面
  5. goto(page页面地址,data需要传递的数据):强制跳转
  6. (……更加细化的接口,如将data嵌入url,当前页面获取等

后记

下一节开始写代码实现!希望能对刚开始学小程序的朋友有所帮助!
还是小白,如果有错误或更好的想法,欢迎各位大佬一同交流、指出哇~

5 回复

哇不错,封装一下就很好,期待你的代码。另外想提个小需求,我有时候跨页传数据传的是json,所以需要先将数据json化,接收数据时也需要解析json,才能拿到原始数据,能不能考虑下这方面的需求,在封装的代码里加上这部分的内容

想法很好!期待你的代码!

思路很好!期待你的代码

同小白,感觉你写的很好,一起学习进步!

学习到了,感觉很有用,先收藏一波

回到顶部