微信小程序開發--頁面之間的跳轉


一、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
    })
  }
})

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM