微信小程序頁面跳轉、邏輯層模塊化

一、頁面的跳轉

　　微信小程序的頁面跳轉函數方法有兩個，另外還有兩種模塊跳轉方式。

　　函數跳轉：

　　1.wx.navigateTo(OBJECT)：

wx.navigateTo({
         url: 'test?id=1'
       })
//保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

//問號后面的參數為傳遞至指定頁面onload方法內的參數。id為自定義參數名，在跳轉頁面獲取參數值時，也是通過這個設置的參數來獲取的。

　　2.wx.redirectTo(OBJECT)：

       wx.redirectTo({
          url: 'test?id=1'
       })
//銷毀當前頁面，跳轉到應用內的某個頁面。

//問號后面的參數為傳遞至指定頁面onload方法內的參數。id為自定義參數名，在跳轉頁面獲取參數值時，也是通過這個設置的參數來獲取的。

　　模塊跳轉：

　　1.標簽跳轉：

 　　在wxml中添加一個navigator元素，實現跳轉。

<navigator url='../list/list'>點擊我</navigator>

　　2.tabBar跳轉：

　　在主頁中設置tabBar，在tabBar中設置跳轉頁面。通過點擊其中的圖標，實現跳轉。

{
                  "tabBar": {
                   "list": [{
                   "pagePath": "index",
                   "text": "首頁"
                      },{
                   "pagePath": "other",
                   "text": "其他"
                   }]
                 }
          }

　　通過wx.switchTab(OBJECT)方法，可以從非tabBar跳轉至tabBar頁面，並關閉所有其他非tabBar頁面。

wx.switchTab({
               url: '/index'
            })

　　

　　頁面的返回：

             關閉當前頁面，返回上一頁面或多級頁面。可通過getCurrentPages()獲取當前的頁面棧，決定需要返回幾層。 

OBJECT 參數說明：

 

參數	類型	默認值	說明
delta	Number	1	返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁。

 

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

         // 此處是A頁面
          wx.navigateTo({
              url: 'B?id=1'
          })

         // 此處是B頁面
          wx.navigateTo({
            url: 'C?id=1'
          })

           // 在C頁面內 navigateBack，將返回A頁面
             wx.navigateBack({
           delta: 2
          })

二、邏輯層的模塊化：

　　調用全局函數getApp()可以獲取小程序的全局應用實例，如果需要全局有效的數據我們可以再App()中定義。

//app.js
App({
  myNumber:1,
})
//logs.js
onLoad: function () {
var app = getApp()
app.myNumber++
}
//list.js
onLoad: function (options) {
    console.log("我的數據是：",getApp().myNumber);
  },

　　為了提高代碼的可讀性和效率，可以通過小程序的模塊化特性，將公用的或者需要重復復用的代碼從程序里抽取出來，打包成單獨的.js文件（微信小程序在創建之初就有一個utils/utils.js文件作為js模塊，里面暴露了一個獲取當前時間的方法），提供某種特定的功能，這就是程序的模塊。如果你想要在外部使用utils.js中封裝的方法，只能通過module.exports和exports方法對外暴露接口。

module.exports = {
  formatTime: formatTime,
  '對外方法名':'本地方法名'
}

　　如何在需要使用這些模塊的文件中使用:使用 require(path) 將公共代碼引入（require 暫時不支持絕對路徑）。

//util.js
function sayHello(name) {
    console.log(`Hello ${name} !`)
}
module.exports = {
    sayHello: sayHello
}

var util= require('../../utils/util.js')
Page({
     data:[],
      onLoad: function() {
        console.log(util.sayHello('Cc'))
    },
})