1. 程式人生 > >微信小程式之邏輯層(JS)路由+模組化+API詳解

微信小程式之邏輯層(JS)路由+模組化+API詳解

本章節按照微信文件講述 紅色框裡的內容

一.路由

頁面路由

在小程式中所有頁面的路由全部由框架進行管理。

1.頁面棧

getCurrentPages()
getCurrentPages() 函式用於獲取當前頁面棧的例項,以陣列形式按棧的順序給出,第一個元素為首頁,最後一個元素為當前頁面。

   注意:

      1.不要嘗試修改頁面棧,會導致路由以及頁面狀態錯誤。
     

      2.不要在 App.onLaunch 的時候呼叫 getCurrentPages(),此時 page 還沒有生成。

2.路由方式

 

二.模組化

1.檔案作用域
在 JavaScript 檔案中宣告的變數和函式只在該檔案中有效;不同的檔案中可以宣告相同名字的變數和函式,不會互相影響。

通過全域性函式 getApp() 可以獲取全域性的應用例項,如果需要全域性的資料可以在 App() 中設定。

如:

// app.js
App({
  globalData: 1
})
// a.js
// The localValue can only be used in file a.js.
var localValue = 'a'
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
// b.js
// You can redefine localValue in file b.js, without interference with the localValue in a.js.
var localValue = 'b'
// If a.js it run before b.js, now the globalData shoule be 2.
console.log(getApp().globalData)

2.模組化


可以將一些公共的程式碼抽離成為一個單獨的 js 檔案,作為一個模組。模組只有通過 module.exports 或者 exports 才能對外暴露介面。

需要注意的是:

   1.exports 是 module.exports 的一個引用,因此在模組裡邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發者採用 module.exports 來暴露模組介面,除非你已經清晰知道這兩者的關係。


   2.小程式目前不支援直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的程式碼到小程式的目錄中或者使用小程式支援的 npm 功能。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用這些模組的檔案中,使用 require(path) 將公共程式碼引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

 require 暫時不支援絕對路徑。

三.API

通常,在小程式 API 有以下幾種型別:

1.事件監聽 API
 

我們約定,以 on 開頭的 API 用來監聽某個事件是否觸發,如:wx.onSocketOpen,wx.onCompassChange 等。

這類 API 接受一個回撥函式作為引數,當事件觸發時會呼叫這個回撥函式,並將相關資料以引數形式傳入。

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

2.同步 API


我們約定,以 Sync 結尾的 API 都是同步 API, 如 wx.setStorageSync,wx.getSystemInfoSync 等。此外,也有一些其他的同步 API,如 wx.createWorker,wx.getBackgroundAudioManager 等,詳情參見 API 文件中的說明。

同步 API 的執行結果可以通過函式返回值直接獲取,如果執行出錯會丟擲異常。

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

3.非同步 API
大多數 API 都是非同步 API,如 wx.request,wx.login 等。這類 API 介面通常都接受一個 Object 型別的引數,這個引數都支援按需指定以下欄位來接收介面呼叫結果:

非同步 API 的執行結果需要通過 Object 型別的引數中傳入的對應回撥函式獲取。部分非同步 API 也會有返回值,可以用來實現更豐富的功能,如 wx.request,wx.connectSockets 等。

wx.login({
  success(res) {
    console.log(res.code)
  }
})