一、小程序框架結構

小程序框架分場景獲取、邏輯層和視圖層

• 場景獲取：場景值是用來描述用戶進入小程序的路徑，可以在小程序的生命周期onLaunch 或 onShow 里獲取。也可以通過wx.getLaunchOptionsSync來獲取場景值。詳細的場景列表可以在下面文檔查看。

微信開放文檔?developers.weixin.qq.com

• 邏輯層：先要知道小程序開發框架的邏輯層是基于js引擎來給開發者提供代碼運行環境和小程序里特有的功能；邏輯層的意義在于處理數據發送給視圖層，進行數據狀態變化，同時邏輯層也接受視圖層的事件反饋。
  還有一點需要注意，就是小程序的邏輯層不運行在瀏覽器，所以一些web的一些能力無法使用，比如document、window之類的。在js基礎上，小程序又新增了一些功能方法，方便開發
  1. 增加 App 和 Page 方法，進行程序注冊和頁面注冊。
  2. 增加 getApp 和 getCurrentPages 方法，分別用來獲取 App 實例和當前頁面棧。
  3. 提供豐富的 API，如微信用戶數據，掃一掃，支付等微信特有能力。
  4. 提供模塊化能力，每個頁面有獨立的作用域邏輯層：注冊小程序（小程序創建的時候這邊已經注冊和綁定，如果項目中不需要特殊處理，不需要改動）
  每個小程序開始需要在app.js里注冊和掛在小程序的實例，綁定生命周期回調函數、錯誤監聽和頁面不存在監聽函數等。整個小程序只能存在一個APP實例，我們可以通過getApp方法獲取到全局唯一的 App 實例，獲取App上的數據或調用開發者注冊在App上的函數。文檔參考：

App(Object object) | 微信開放文檔?developers.weixin.qq.com

邏輯層：注冊頁面。

對于小程序中的每個頁面，都需要在頁面對應的js文件中進行注冊，指定頁面的初始數據、生命周期回調、事件處理函數等。
簡單頁面直接用Page來注冊頁面

Page({data: {text: "This is page data."},onLoad: function(options) {// 頁面創建時執行},onShow: function() {// 頁面出現在前臺時執行},onReady: function() {// 頁面首次渲染完畢時執行},onHide: function() {// 頁面從前臺變為后臺時執行},onUnload: function() {// 頁面銷毀時執行},onPullDownRefresh: function() {// 觸發下拉刷新時執行},onReachBottom: function() {// 頁面觸底時執行},onShareAppMessage: function () {// 頁面被用戶分享時執行},onPageScroll: function() {// 頁面滾動時執行},onResize: function() {// 頁面尺寸變化時執行},onTabItemTap(item) {// tab 點擊時執行console.log(item.index)console.log(item.pagePath)console.log(item.text)},// 事件響應函數viewTap: function() {this.setData({text: 'Set some data for updating view.'}, function() {// this is setData callback})},// 自由數據customData: {hi: 'MINA'} })

如果頁面比較負責，則需要使用 Component 構造器構造頁面，這個就類似VUE，方法都放在methods里。

Component({data: {text: "This is page data."},methods: {onLoad: function(options) {// 頁面創建時執行},onPullDownRefresh: function() {// 下拉刷新時執行},// 事件響應函數viewTap: function() {// ...}} })

在頁面中引用behaviors，可以做到多個頁面同時共有相同的數據和方法。

// my-behavior.js module.exports = Behavior({data: {sharedText: 'This is a piece of data shared between pages.'},methods: {sharedMethod: function() {this.data.sharedText === 'This is a piece of data shared between pages.'}} }) // page-a.js var myBehavior = require('./my-behavior.js') Page({behaviors: [myBehavior],onLoad: function() {this.data.sharedText === 'This is a piece of data shared between pages.'} })

邏輯層：生命周期 page實例的生命周期（現在看懂有點難，后面慢慢理解）

邏輯層：頁面路由 小程序中所有頁面的路由全部由框架進行管理。

頁面棧

框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下：

路由方式頁面棧表現初始化新頁面入棧打開新頁面新頁面入棧頁面重定向當前頁面出棧，新頁面入棧頁面返回頁面不斷出棧，直到目標返回頁Tab 切換頁面全部出棧，只留下新的 Tab 頁面重加載頁面全部出棧，只留下新的頁面

開發者可以使用 getCurrentPages() 函數獲取當前頁面棧。

路由方式

對于路由的觸發方式以及頁面生命周期函數如下：

路由方式觸發時機路由前頁面路由后頁面初始化小程序打開的第一個頁面onLoad, onShow打開新頁面調用 API wx.navigateTo
使用組件 <navigator open-type="navigateTo"/>onHideonLoad, onShow頁面重定向調用 API wx.redirectTo
使用組件 <navigator open-type="redirectTo"/>onUnloadonLoad, onShow頁面返回調用 API wx.navigateBack
使用組件<navigator open-type="navigateBack">
用戶按左上角返回按鈕onUnloadonShowTab 切換調用 API wx.switchTab
使用組件 <navigator open-type="switchTab"/>
用戶切換 Tab各種情況請參考下表重啟動調用 API wx.reLaunch
使用組件 <navigator open-type="reLaunch"/>onUnloadonLoad, onShow

Tab 切換對應的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）：

當前頁面路由后頁面觸發的生命周期（按順序）AANothing happendABA.onHide(), B.onLoad(), B.onShow()AB（再次打開）A.onHide(), B.onShow()CAC.onUnload(), A.onShow()CBC.onUnload(), B.onLoad(), B.onShow()DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()D（從轉發進入）AD.onUnload(), A.onLoad(), A.onShow()D（從轉發進入）BD.onUnload(), B.onLoad(), B.onShow()

Tips:

• navigateTo, redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
• 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。

邏輯層：模塊化

可以將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。模塊只有通過module.exports或者exports才能對外暴露接口。

// common.js function sayHello(name) {console.log(`Hello ${name} !`) } function sayGoodbye(name) {console.log(`Goodbye ${name} !`) }module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye var common = require('common.js') Page({helloMINA: function() {common.sayHello('MINA')},goodbyeMINA: function() {common.sayGoodbye('MINA')} })

文件作用域

在 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)

邏輯層：API 后面會有詳細提到。

• 視圖層 View
  基本解釋：框架的視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。

將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。

WXML(WeiXin Markup language) 用于描述頁面的結構。

WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。

組件(Component)是視圖的基本組成單元。^[1]

（視圖層還有一些細節，想看的可以直接去看官方文檔）

二、小程序運行環境

微信小程序運行在多種平臺上：iOS（iPhone/iPad）微信客戶端、Android 微信客戶端、PC 微信客戶端、Mac 微信客戶端和用于調試的微信開發者工具。

JavaScript 支持情況

運行限制

基于安全考慮，小程序中不支持動態執行 JS 代碼，即：

• 不支持使用 eval 執行 JS 代碼
• 不支持使用 new Function 創建函數
  有個函數支持表，可以去文檔查看一下。我就不在這貼了。

小程序運行機制

前臺/后臺狀態

小程序啟動后，界面被展示給用戶，此時小程序處于前臺狀態。

當用戶點擊右上角膠囊按鈕關閉小程序，或者按了設備 Home 鍵離開微信時，小程序并沒有完全終止運行，而是進入了后臺狀態，小程序還可以運行一小段時間。

當用戶再次進入微信或再次打開小程序，小程序又會從后臺進入前臺。但如果用戶很久沒有再進入小程序，或者系統資源緊張，小程序可能被銷毀，即完全終止運行。

小程序啟動

這樣，小程序啟動可以分為兩種情況，一種是冷啟動，一種是熱啟動。

• 冷啟動：如果用戶首次打開，或小程序銷毀后被用戶再次打開，此時小程序需要重新加載啟動，即冷啟動。
• 熱啟動：如果用戶已經打開過某小程序，然后在一定時間內再次打開該小程序，此時小程序并未被銷毀，只是從后臺狀態進入前臺狀態，這個過程就是熱啟動。

小程序銷毀時機

通常，只有當小程序進入后臺一定時間，或者系統資源占用過高，才會被銷毀。具體而言包括以下幾種情形：

• 當小程序進入后臺，可以維持一小段時間的運行狀態，如果這段時間內都未進入前臺，小程序會被銷毀。
• 當小程序占用系統資源過高，可能會被系統銷毀或被微信客戶端主動回收。
  • 在 iOS 上，當微信客戶端在一定時間間隔內連續收到系統內存告警時，會根據一定的策略，主動銷毀小程序，并提示用戶 「運行內存不足，請重新打開該小程序」。具體策略會持續進行調整優化。
  • 建議小程序在必要時使用 wx.onMemoryWarning 監聽內存告警事件，進行必要的內存清理。

小程序更新機制

未啟動時更新

開發者在管理后臺發布新版本的小程序之后，如果某個用戶本地有小程序的歷史版本，此時打開的可能還是舊版本。微信客戶端會有若干個時機去檢查本地緩存的小程序有沒有更新版本，如果有則會靜默更新到新版本。總的來說，開發者在后臺發布新版本之后，無法立刻影響到所有現網用戶，但最差情況下，也在發布之后 24 小時之內下發新版本信息到用戶。用戶下次打開時會先更新最新版本再打開。

啟動時更新

小程序每次冷啟動時，都會檢查是否有更新版本，如果發現有新版本，將會異步下載新版本的代碼包，并同時用客戶端本地的包進行啟動，即新版本的小程序需要等下一次冷啟動才會應用上。

（PS 這塊的機制屬于小程序運行時的機制，理解最好，不理解也能寫。）^[2]

參考

^項目寫的時wxml基本html，不會過多記錄，后面會著重講wxs和component

^現在先過一下小程序的基本介紹和功能，以及結構理解。方便后面開發。先理解。

總結

以上是生活随笔為你收集整理的js微信监听返回_微信小程序（2）- 框架结构amp;运行环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。