微信小程序开发–页面之间的跳转

一、navigator–完成页面之间的跳转

1、新建一个页面文件夹

2、在app.json文件中引入页面

"pages": [  时光里的零零碎碎  "pages/index/index",    "pages/ranking/ranking"  ],

3、在wxml页面中用navgator标签实现跳转

<navigator url="../ranking/rankin关于冬天的诗词g">排行榜</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='o圆的公式大全ndemo2'>通过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.jspage({  toback:function(){    // wx:wx.navigateback()    wx:wx.navigateback({      delta: 1,      //delta指定返回的页面，默认是1    })  }})