JS每日一题：小程序跳转页面有几种方式？有什么不同?

googollee 发布于2019-08-23 15:35 / 3167人阅读

摘要：小程序跳转页面有几种方式有什么不同在小程序中每个页面可以看成是一个，全部以栈的形式进行管理最多五层在说跳转方式之前我们先来温习一下栈和堆的区别管理方式不同栈是系统编译器启动管理，不需要程序员手动管理堆的释放由程序员手动管理，不及时回收容易产

20190228

小程序跳转页面有几种方式？有什么不同?

在小程序中每个页面可以看成是一个pageModel，pageModel全部以栈的形式进行管理(最多五层)

在说跳转方式之前我们先来温习一下栈和堆的区别

管理方式不同

栈是系统编译器启动管理，不需要程序员手动管理

堆的释放由程序员手动管理，不及时回收容易产生内存泄露

分配方式不同

栈有两种分配方式：静态分配和动态分配

静态分配是系统编译器完成的，比如局部变量的分配

动态分配是由alloc函数进行分配的，但是栈的动态分配和堆的动态分配是不同的，它的动态分配也由系统编译器进行释放，不需要程序员手动管理

堆是动态分配和回收内存的，没有静态分配的堆

分配大小不同

栈是向低地址扩展的数据结构，是一块连续的内存区域

堆是向高地址扩展的数据结构，是不连续的内存区域

进入正题

小程序的路由跳转分为两种，组件跳转以及api跳转

api形式分为

navigateTo 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面

redirectTo 关闭当前页面，跳转到应用内的某个页面

switchTab 跳转到tabBar页面,同时关闭其他非tabBar页面

navigateBack 返回上一页面

reLanch 关闭所有页面，打开到应用内的某个页面

前面有提到栈，那么这些导航方式跟栈有什么关系呢,看下面

初始化新页面入栈

navigateTo 新页面入栈

redirectTo 当前页面出栈，新页面入栈

navigateBack 页面不断出栈，直到目标返回页，新页面入栈

switchTab 页面全部出栈，只留下新的 Tab 页面

reLanch 页面全部出栈，只留下新的页面

通过组件形式进行跳转

// navigator 组件默认的 open-type 为 navigate 
跳转到新页面

// 如需要其它形式进行跳转，可以更改open-type 属性以上api值
切换 Tab

getCurrentPages

getCurrentPages() 函数用于获取当前页面栈的实例(属性及方法)，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面

// Page A 跳转至Page B
wx.navigateTo({ url: "/pages/B/B" })

// Page B
const pages = getCurrentPages()
const perPage = pages[pages.length - 2] // 上一个页面
perPage.setData({
    title: "JS每日一题"
})

总结

小程序页面由栈形式管理，最多为5层，在合理的场景使用合理的方式进行跳转

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

混合云私有云服务器托管方式有几种点对点专线有几种方式程序语言有几种 js本地存储有几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102284.html

JS每日一题: 小程序页面之间如何通信?

摘要：小程序页面之间如何通信首先将通信的模型列举出来分为以下几种兄弟页面间通信父路径页面向子路径页面通信子路径页面向父路径页面通信通信的方式本地存储全局对象发布订阅缓存整个至利用激活方法，通过传递数据清空上次通信数据同一样，利用激活方法，通过读写 20190227 小程序页面之间如何通信? 首先将通信的模型列举出来, 分为以下几种兄弟页面间通信父路径页面向子路径页面通信子路径页面向父...

RancherLabs 2019-08-23 15:34 评论0 收藏0
JS每日一题：什么情况下适合使合vuex？Vuex使用中有几个步骤？

摘要：什么情况下适合使合使用中有几个步骤开始之前先简单了解一下定义是一个状态管理机制采用集中式存储应用所有组件的状态嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储比如下面这段代码，同时需要用到，那么我们首先能想到就是在 20190121 什么情况下适合使合vuex？Vuex使用中有几个步骤？开始之前先简单了解一下vuex 定义: vuex是一个状态管理机制,采用...

wow_worktile 2019-08-23 15:22 评论0 收藏0
JS每日一题：Vue-router有哪些钩子？使用场景？

摘要：问有哪些钩子使用场景的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在什么什么之前什么什么之后英文叫专业点叫生命周期，装逼点可以叫守卫中也存在钩子的概念分为三步记忆全局守卫路由独享守卫组件独享守卫全局守卫很好理解，全 20190218问 Vue-router有哪些钩子？使用场景？ router的实现可以点这里前面我们用大白话讲过什么是钩子，这里在重复一下，就是在...

张金宝 2019-08-23 15:18 评论0 收藏0
JS每日一题:Vue中的diff算法？

摘要：，文本节点的比较，需要修改，则会调用。，新节点没有子节点，老节点有子节点，直接删除老节点。所以一句话，的作用主要是为了高效的更新虚拟。 20190125 Vue中的diff算法？概念: diff算法是一种优化手段，将前后两个模块进行差异对比，修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的...

Caicloud 2019-08-23 15:32 评论0 收藏0
daily-question-02（前端每日一题02）

摘要：静态作用域与动态作用域静态作用域函数的作用域基于函数创建的位置。采用的是词法作用域，也称为静态作用域。可以劫持整个对象，并返回一个新的对象。防误触延缓执行立即执行节流所谓节流，就是指连续触发事件但是在秒中只执行一次函数。在这里记录着每天自己遇到的一道印象深刻的前端问题，以及一道生活中随处可见的小问题。强迫自己形成积累的习惯，鞭挞自己不断前行，共同学习。 Github 地址 2019...

lk20150415 2019-08-23 17:05 评论0 收藏0