评论

小程序开发笔记#1 封装一个页面栈工具类:思路分析(一)

试一试用自己习惯的调用方式封装官方的API吧~

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

关于官方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,当前页面获取等

后记

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

最后一次编辑于  2021-11-13  
点赞 13
收藏
评论

5 个评论

  • NAMELESS
    NAMELESS
    2021-11-12

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

    2021-11-12
    赞同 2
    回复
  • 曹孟良
    曹孟良
    2021-11-12

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

    2021-11-12
    赞同 2
    回复 1
    • B A O
      B A O
      2021-11-12
      感谢分享!但这个跨页传输json还没有了解过,还在学习当中!
      2021-11-12
      1
      回复
  • Smooth
    Smooth
    2021-11-12

    思路很好!期待你的代码

    2021-11-12
    赞同 2
    回复 1
    • B A O
      B A O
      2021-11-12
      谢谢!!
      2021-11-12
      2
      回复
  • 知非
    知非
    2021-11-12

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

    2021-11-12
    赞同 2
    回复 2
    • B A O
      B A O
      2021-11-12
      谢谢,一起加油!
      2021-11-12
      2
      回复
    • 知非
      知非
      2021-11-12回复B A O
      好,期待你的新文章!
      2021-11-12
      2
      回复
  • PD
    PD
    发表于移动端
    2021-11-12
    学习到了,感觉很有用,先收藏一波
    2021-11-12
    赞同 1
    回复 1
    • B A O
      B A O
      2021-11-12
      希望能有所启发呀,一起加油!
      2021-11-12
      2
      回复
登录 后发表内容