微信小程序开发--页面之间的跳转
程序员文章站
2022-06-27 19:36:12
一、navigator--完成页面之间的跳转 1、新建一个页面文件夹 2、在app.json文件中引入页面 "pages": [ "pages/index/index", "pages/ranking/ranking" ], 3、在wxml页面中用navgator标签实现跳转
一、navigator--完成页面之间的跳转
1、新建一个页面文件夹
2、在app.json文件中引入页面
"pages": [ "pages/index/index", "pages/ranking/ranking" ],
3、在wxml页面中用navgator标签实现跳转
<navigator url="../ranking/ranking">排行榜</navigator>
二、页面间跳转和传值
1、在地址后面用 ?属性=属性值 的方式传值,多个属性之间用 & 连接
<navigator url="../ranking/ranking?name=月排行榜&age=1">排行榜</navigator>
2、在跳转后的页面的 .js 文件中接收值,options中数据就是页面跳转时传递的值
page({ onload: function (options) { console.log(options) } })
注:reditect跳转,这个跳转是没有过度的,不能返回,适用于只出现一次的页面
<navigator url="../ranking/ranking?name=月排行榜&age=1" redirect>排行榜</navigator>
三、微信小程序使用api跳转
<!-- index.wxml --> <view> <navigator url='../demo1/demo1'>普通页面跳转</navigator> <button bindtap='ondemo1'>通过api跳转</button> <button bindtap='ondemo2'>通过api跳转,不能返回</button> </view>
//index.js //获取应用实例 const app = getapp() page({ ondemo1:function(){ wx:wx.navigateto({ url: '../demo1/demo1', success: function(res) { console.log("通过api跳转成功") }, // 成功时的回调函数 fail: function(res) {}, //失败时的回调函数 complete: function(res) {}, //完成时的回调函数,无论成功或失败都会执行 }) }, ondemo2:function(){ wx:wx.redirectto({ url: '../demo2/demo2', success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }) } })
<!--pages/demo1/demo1.wxml--> <text>pages/demo1/demo1.wxml</text> <button bindtap='toback'>返回上一级</button>
// pages/demo1/demo1.js page({ toback:function(){ // wx:wx.navigateback() wx:wx.navigateback({ delta: 1, //delta指定返回的页面,默认是1 }) } })
上一篇: L1-001 Hello World
下一篇: 线程各种状态转换分析