微信小程序 页面跳转和数据传递（微信小程序怎么开通）

微信小程序 页面跳转和数据传递（微信小程序怎么开通）

这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下

微信小程序 页面跳转和数据传递

1.先导

在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也有栈的概念在里面。微信小程序页面跳转有四种方式：

1.wx.navigateTo(OBJECT)； 2.wx.redirectTo(OBJECT)； 3.wx.switchTab(OBJECT)； 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能；

分析：

2.页面跳转的具体操作

(1)wx.navigateTo(OBJECT)

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

示例代码：

wx.navigateTo({ url: 'test?id=1'//实际路径要写全})-

//test.jsPage({ onLoad: function(option){ console.log(option.query) }})-

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

（2）wx.redirectTo(OBJECT)

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

示例代码：

wx.redirectTo({ url: 'test?id=1'})-

（3）wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

OBJECT 参数说明：

示例代码：

{ "tabBar": { "list": [{ "pagePath": "index", "text": "首页" },{ "pagePath": "other", "text": "其他" }] }}-

wx.switchTab({ url: '/index'})-

（4）wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT 参数说明：

示例代码：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是A页面wx.navigateTo({ url: 'B?id=1'})-

// 此处是B页面wx.navigateTo({ url: 'C?id=1'})-

// 在C页面内 navigateBack，将返回A页面wx.navigateBack({ delta: 2})-

（5）使用标签实现页面跳转

navigator

页面链接。

示例代码：

跳转到新页面 在当前页打开 切换 Tab-

3.页面的路由和生命周期

（1）页面的路由

在小程序中所有页面的路由全部由框架进行管理，对于路由的触发方式以及页面生命周期函数如下：

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

4.参数传递

（1）通过路径传递参数

通过路径传递参数在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和中使用方法相同 示例代码：以wx.navigateTo为代表

"wx.navigateTo({ url: 'test?id=1'//实际路径要写全})-

//test.jsPage({ onLoad: function(option){ console.log(option.id) }})-

参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

test?id=1 中id为参数键，1 为参数值

在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。