欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 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
    })
  }
})