微信小程序開發經驗總結(二)

微信小程序開發經驗總結

微信小程序開發經驗總結(一)
微信小程序開發經驗總結(二)
微信小程序開發經驗總結(三)
微信小程序開發經驗總結(四)
微信小程序開發經驗總結(五)
微信小程序開發經驗總結(六)
微信小程序開發經驗總結(七)

4. page.json

• 頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵

  {
    "navigationBarTitleText": "我的"
  }

5. page跳轉

• navigateTo, redirectTo 只能打開非 tabBar 頁面。

• switchTab 只能打開 tabBar 頁面

• reLaunch 可以打開任意頁面。

• 頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。

• 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。

• 一個應用同時只能打開5個頁面，當已經打開了5個頁面之後，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo

• 跳轉實例

  //保留當前頁面，跳轉到應用內的某個頁面
  wx.navigateTo({
     url: '../second/second?key1=value1&key2=value2'//實際路徑要寫全
  })
  //關閉當前頁面，跳轉到應用內的某個頁面。
  wx.redirectTo(OBJECT)
  //關閉所有頁面，跳轉到應用內的某個頁面。
  wx.reLaunch(OBJECT) 
  //打開 tabBar 頁面
  wx.switchTab({
  url: '/index'//路徑後不能帶參數
  })
  //返回
  wx.navigateBack({ 
  delta: 2//delta Number  1   返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁。
  })

6. page之間的傳值

• first.js ==> second.js(打開頁面並傳值):url 尾部加上?key1=value1&key2=value2,在onLoad接收

  //A頁面跳轉B頁面
  //first.js
   second: function () {
    wx.navigateTo({
      url: '../second/second?key1=value1&key2=value2'//實際路徑要寫全
    })
  }
  //second.js
  onLoad: function (options) {
    console.log(options.key1)
  },

• second.js ==> first.js(關閉頁面並回傳值):getCurrentPages()獲取上一頁,通過setData({})傳值

  //A頁面跳轉B頁面之後返回
  var that=this;
  var pages=getCurrentPages();
  //當前頁面
  var currPage = pages[pages.length - 1]; 
  //上一頁     
  var lastPage =pages[pages.length-2];     
  ////直接調用上一個頁面的setData()方法，把數據存到上一個頁面中去
  lastPage.setData(       
  {         
    key: value       
  }     
  )     
  //返回     
  wx.navigateBack({   
  });