【小程序開發(fā)】小程序的架構(gòu)和配置
寫在前面
??這里是前端程序員小張！
??人海茫茫，感謝這一秒你看到這里。希望我的文章對你的有所幫助！
??愿你在未來的日子，保持熱愛，奔赴山海！
一、小程序的架構(gòu)模型
- 小程序的宿主環(huán)境為微信客戶端
- 宿主環(huán)境執(zhí)行小程序的各種文件：wxml文件、wxss文件、js文件
- 當小程序基于 WebView 環(huán)境下時，WebView 的 JS 邏輯、DOM 樹創(chuàng)建、CSS 解析、樣式計算、Layout、Paint (Composite) 都發(fā)生 在同一線程，在 WebView 上執(zhí)行過多的 JS 邏輯可能阻塞渲染，導致界面卡頓。
- 以此為前提，小程序同時考慮了性能與安全，采用了目前稱為「雙線程模型」的架構(gòu)。
- 雙線程模型：
-
WXML模塊和WXSS樣式運行于渲染層，渲染層使用WebView線程渲染（一個程序有多個頁面，會使用多個 WebView的線程）。 - JS腳本（app.js/home.js等）運行于邏輯層，邏輯層使用JsCore運行JS腳本。
- 這兩個線程都會經(jīng)由微信客戶端（Native）進行中轉(zhuǎn)交互
-
二、小程序代碼構(gòu)成
默認創(chuàng)建的項目里生成了不同類型的文件：
-
.json后綴的JSON配置文件 -
.wxml后綴的WXML模板文件 -
.wxss后綴的WXSS樣式文件 -
.js后綴的JS腳本邏輯文件
2.1 JSON配置
JSON 是一種數(shù)據(jù)格式，并不是編程語言，在小程序中，JSON扮演的靜態(tài)配置的角色。
- 小程序配置 app.json
-
app.json是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部 tab 等。
-
- 頁面配置 page.json
- 獨立定義每個頁面的一些屬性，例如頂部顏色、是否允許下拉刷新等等。
- 工具配置 project.config.json
- 項目配置文件, 比如項目名稱、appid等；
2.2 其他
網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結(jié)構(gòu)，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互，在小程序中
-
WXML充當?shù)木褪穷愃?HTML的角色 -
WXSS具有CSS大部分的特性 - 通過編寫
JS腳本文件來處理用戶的操作
三、配置文件
3.1 全局配置文件
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置
| 屬性 | 類型 | 必填 | 描述 |
|---|---|---|---|
| pages | string[] | 是 | 頁面路徑列表 |
| window | Object | 否 | 全局的默認窗口表現(xiàn) |
| tabBar | Object | 否 | 底部 tab 欄的表現(xiàn) |
-
pages：頁面路徑列表- 用于指定小程序由哪些頁面組成，每一項都對應(yīng)一個頁面的 路徑（含文件名） 信息
- 小程序中所有的頁面都是必須在pages中進行注冊的
-
window：全局的默認窗口展示- 用戶指定窗口如何展示，用于設(shè)置小程序的狀態(tài)欄、導航條、標題、窗口背景色。
-
tabBar：底部tab欄的表現(xiàn)- 如果小程序是一個多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應(yīng)頁面
完整請參考官方文檔：全局配置 | 微信開放文檔 (qq.com)
3.2 頁面配置文件
每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現(xiàn)進行配置
- 頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項
| 屬性 | 類型 | 默認值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000
|
|
| navigationBarTextStyle | string | white | 導航欄標題顏色，僅支持 black / white
|
|
| navigationBarTitleText | string | 導航欄標題文字內(nèi)容 | ||
| navigationStyle | string | default | 導航欄樣式，僅支持以下值： default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕。 |
iOS/Android 微信客戶端 7.0.0，Windows 微信客戶端不支持 |
| homeButton | boolean | false | 在非首頁、非頁面棧最底層頁面或非tabbar內(nèi)頁面中的導航欄展示home鍵 | 微信客戶端 8.0.24 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的樣式，僅支持 dark / light
|
四、注冊App實例
每個小程序都需要在 app.js 中調(diào)用 App 函數(shù) 注冊小程序示例
- 在注冊時, 可以綁定對應(yīng)的生命周期函數(shù)
- 在生命周期函數(shù)中, 執(zhí)行對應(yīng)的代碼
4.1 App函數(shù)的參數(shù)
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| onLaunch | function | 否 | 生命周期回調(diào)——監(jiān)聽小程序初始化。 | |
| onShow | function | 否 | 生命周期回調(diào)——監(jiān)聽小程序啟動或切前臺。 | |
| onHide | function | 否 | 生命周期回調(diào)——監(jiān)聽小程序切后臺。 | |
| onError | function | 否 | 錯誤監(jiān)聽函數(shù)。 | |
| onPageNotFound | function | 否 | 頁面不存在監(jiān)聽函數(shù)。 | |
| onUnhandledRejection | function | 否 | 未處理的 Promise 拒絕事件監(jiān)聽函數(shù)。 | |
| onThemeChange | function | 否 | 監(jiān)聽系統(tǒng)主題變化 | |
| 其他 | any | 否 | 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)變量到 Object 參數(shù)中，用 this 可以訪問 |
注冊App時，我們一般會進行的操作是什么？
- 判斷小程序的進入場景
- 監(jiān)聽生命周期函數(shù)，在生命周期中執(zhí)行對應(yīng)的業(yè)務(wù)邏輯，比如在某個生命周期函數(shù)中進行登錄操作或者請求網(wǎng)絡(luò)數(shù)據(jù)；
- 因為App()實例只有一個，并且是全局共享的（單例對象），所以我們可以將一些共享數(shù)據(jù)放在這里；
4.2 判斷打開的場景
小程序的打開場景較多：
- 常見的打開場景：群聊會話中打開、小程序列表中打開、微信掃一掃打開、另一個小程序打開
如何確定打開的場景？
- 在
onLaunch和onShow生命周期回調(diào)函數(shù)中，會有options參數(shù)，其中有scene值；
4.3 定義全局App的數(shù)據(jù)
可以在Object中定義全局App的數(shù)據(jù)，定義的數(shù)據(jù)可以在其他任何頁面中訪問
globalData: {
token: "",
userInfo: {}
}
五、注冊Page實例
小程序中的每個頁面, 都有一個對應(yīng)的js文件, 其中調(diào)用Page函數(shù)注冊頁面示例文章來源：http://www.zghlxwxcb.cn/news/detail-489472.html
- 在注冊時, 可以綁定初始化數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
5.1 Page函數(shù)的參數(shù)
| 屬性 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| data | Object | 頁面的初始數(shù)據(jù) | ||
| options | Object | 頁面的組件選項，同 Component 構(gòu)造器 中的 options ，需要基礎(chǔ)庫版本 2.10.1
|
||
| behaviors | String Array | 類似于mixins和traits的組件間代碼復用機制，參見 behaviors，需要基礎(chǔ)庫版本 2.9.2 | ||
| onLoad | function | 生命周期回調(diào)—監(jiān)聽頁面加載 | ||
| onShow | function | 生命周期回調(diào)—監(jiān)聽頁面顯示 | ||
| onReady | function | 生命周期回調(diào)—監(jiān)聽頁面初次渲染完成 | ||
| onHide | function | 生命周期回調(diào)—監(jiān)聽頁面隱藏 | ||
| onUnload | function | 生命周期回調(diào)—監(jiān)聽頁面卸載 | ||
| onRouteDone | function | 生命周期回調(diào)—監(jiān)聽路由動畫完成 | ||
| onPullDownRefresh | function | 監(jiān)聽用戶下拉動作 | ||
| onReachBottom | function | 頁面上拉觸底事件的處理函數(shù) | ||
| onShareAppMessage | function | 用戶點擊右上角轉(zhuǎn)發(fā) | ||
| onShareTimeline | function | 用戶點擊右上角轉(zhuǎn)發(fā)到朋友圈 | ||
| onAddToFavorites | function | 用戶點擊右上角收藏 | ||
| onPageScroll | function | 頁面滾動觸發(fā)事件的處理函數(shù) | ||
| onResize | function | 頁面尺寸改變時觸發(fā)，詳見 響應(yīng)顯示區(qū)域變化 | ||
| onTabItemTap | function | 當前是 tab 頁時，點擊 tab 時觸發(fā) | ||
| onSaveExitState | function | 頁面銷毀前保留狀態(tài)回調(diào) | ||
| 其他 | any | 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，在頁面的函數(shù)中用 this 可以訪問。這部分屬性會在頁面實例創(chuàng)建時進行一次深拷貝。 |
頁面的生命周期函數(shù)：
文章來源地址http://www.zghlxwxcb.cn/news/detail-489472.html
到了這里，關(guān)于【小程序開發(fā)】小程序的架構(gòu)和配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
