微信小程序教程（第四篇）

小程序開發基本框架及其限制與優化

 

• 開發基本框架（MINA框架）

└─ Project-folder/ ·································· 項目所在目錄

├─ pages/ ······································ 頁面目錄

│ ├─ index/ ··································· index頁面

│ │ ├─ index.js ······························ index頁面邏輯

│ │ ├─ index.wxml ···························· index頁面結構

│ │ └─ index.wxss ···························· index頁面樣式

│ │ └─ index.json ···························· index頁面配置(局部)

│ └─ logs/ ···································· logs頁面

│ ├─ logs.js ······························· logs頁面邏輯

│ ├─ logs.wxml ····························· logs頁面結構

│ └─ logs.wxss ····························· logs頁面樣式

├─ utils/ ······································ 公共腳本目錄

│ └─ util.js ·································· 工具腳本

├─ app.js ······································ 應用程序邏輯  用於定義整個應用的邏輯

用來監聽並處理小程序的生命周期函數、聲明全局變量

├─ app.json ································ 應用程序配置(全局)   對整個小程序的全局配置

配置小程序是由哪些頁面組成，配置小程序的窗口背景色等

└─ app.wxss ······························· 應用程序公共樣式 用來設置整個應用的公共樣式

1.app函數是一個全局函數，用來創建一個應用程序實例，每個應用程序都會有他的生命周期

2.page也是一個全局函數，用來創建頁面對象

3.wxml文件是XML語法，不是HTML語法。簡單來說：wxml ≈ xml + 事件系統 + 模板引擎

4.json文件是配置文件，按需而建。但app.json必須建

5.頁面的所有配置或設置都會優先於全局配置或設置，即局部會覆蓋全局的配置

6.WXSS具有CSS大部分特性，同時進行了擴充及修改。尺寸單位(rpx)可以根據屏幕寬度進行自適應。而目前只支持少量選擇器(.class/#id/element/element, element/::after/::before)

7.每個文件夾內的文件名次統一，只有后綴名不同，因為json配置文件中最終會將所有的頁面整合成一個頁面，通過相同的名稱，將頁面與邏輯js、樣式進行關聯匹配。

8. 當應用程序啟動時會自動執行項目目錄下的app.js文件，在app.js中通過調用全局App([option])方法創建一個應用程序實例，其中通過參數指定的一些特定的方法，會在特定的執行時機去執行，也就是說通常所說的生命周期事件方法。其中app.js,app.json是必需的。

小程序的生命周期函數

屬性	類型	描述	觸發時機
onLaunch	Function	生命周期函數--監聽小程序初始化	當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow	Function	生命周期函數--監聽小程序顯示	當小程序啟動，或從后台進入前台顯示，會觸發 onShow
onHide	Function	生命周期函數--監聽小程序隱藏	當小程序從前台進入后台，會觸發 onHide
其他	Any	開發者可以添加任意的函數或數據到 Object 參數中，用this 可以訪問

生命周期函數

• onLoad: 頁面加載

• 一個頁面只會調用一次。

• 接收頁面參數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

• onShow: 頁面顯示

• 每次打開頁面都會調用一次。

• onReady: 頁面初次渲染完成

• 一個頁面只會調用一次，代表頁面已經准備妥當，可以和視圖層進行交互。

• 對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。

• onHide: 頁面隱藏

• 當navigateTo或底部tab切換時調用。

• onUnload: 頁面卸載

• 當redirectTo或navigateBack的時候調用。

頁面的初始數據、生命周期函數、事件處理函數

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	生命周期函數--監聽頁面加載
onReady	Function	生命周期函數--監聽頁面初次渲染完成
onShow	Function	生命周期函數--監聽頁面顯示
onHide	Function	生命周期函數--監聽頁面隱藏
onUnload	Function	生命周期函數--監聽頁面卸載
onPullDownRefresh	Function	頁面相關事件處理函數--監聽用戶下拉動作
onReachBottom	Function	頁面上拉觸底事件的處理函數
其他	Any	開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 可以訪問

頁面的路由

在小程序中所有頁面的路由全部由框架進行管理，對於路由的觸發方式及頁面生命周期函數如下：

路由方式	觸發時機	路由后頁面	路由前頁面
初始化	小程序打開的第一個頁面	onLoad，onShow
打開新頁面	調用 API wx.navigateTo 或使用組件<navigator />	onLoad，onShow	onHide
頁面重定向	調用 API wx.redirectTo 或使用組件<navigator />	onLoad，onShow	onUnload
頁面返回	調用 API wx.navigateBack或用戶按左上角返回按鈕	onShow	onUnload（多層頁面返回每個頁面都會按順序觸發onUnload）
Tab 切換	多 Tab 模式下用戶切換 Tab	第一次打開 onLoad，onshow；否則 onShow	onHide

選擇器

目前支持的選擇器有：

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	view::after	在 view 組件后邊插入內容
::before	view::before	在 view 組件前邊插入內容

尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rem（root em）: 規定屏幕寬度為20rem；1rem = (750/20)rpx 。

建議： 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標准

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

javascript限制與優化

（一）限制：

• 通過傳入字符串來執行代碼的能力都禁用了

出於安全考慮，凡是通過傳入字符串來執行代碼的能力都禁用了。具體被禁掉的原生功能有：new Function、eval、Generator。這是同時也比較有效的避免了類似H5 中xss的問題。

禁掉的這些功能，對我們開發來說影響比較顯著的應該是字符串轉json，以往我們都是通過new Function、eval來處理后台cgi的返回。（移動端一般封裝在zepto之類的框架中），小程序開發需要改變一下具體實現。

• 與瀏覽器BOM相關的api都是沒有的。

在這些BOM中，對開發影響最大的應該是沒有cookie。因為其他功能例如storage，小程序有類似的處理方法。而cookie在web開發中是與后台登錄相關的。小程序中是沒有Cookie的，為了兼容目前大部分web app 的登錄管理是使用cookie的。小程序在請求發送時，客戶端可以動態的給請求設置Header發送報文的cookie。

注意一下cookie本身不能在客戶端進行讀寫。因為沒有cookie，H5中的csrf問題理論上是根本解決了。小程序是否存在其他客戶端安全問題，需要技術、時間來檢驗~

（二） 優化

• 登錄：

H5中，通過微信授權一般采用url重定向的方式獲取code；在小程序中，通過wx.login獲取code，這樣避免了之前登錄重定向的問題。

• storage：

小程序用storage替代了H5中的localstorage、sessionstorage。storage對每個小程序的大小是10M，支持同步和異步。

• 微信支付路徑不再受限

（三） 不便

1）每個頁面是需要手動在app.json中進行注冊。如果沒有注冊，是不執行該頁面的。

2）打開的頁面有5個的限制，在開發時需要主要控制打開頁面的數量

wxss：

• wxss 不再支持媒體查詢

• 增加了app的flex布局

• 引入rpx的概念

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

• wxss中，不能使用背景圖片。這跟框架的設計思想認為一切皆組件有關

• wxss動畫不支持（目前）

• 不支持多層選擇器.classA {} – 支持； .classA  .classB {} – 不支持 （api說明表示只支持單層選擇器，重構測試有時多層是支持的）

（四）index.js中的data數據只讀

頁面js中，data數據是需要約定為只讀。框架是單向數據綁定，修改data中的數據不會自動更新View；更新view，需要使用setData()方法。setData()更新View時，與data中的數據進行Diff比較，不同才會更新。這樣如果直接修改data，很容易造成data中的數據與View不一致。

• setData單次設置的數據不能超過1024kB，需要避免一次設置過多的數據。

• template，這些模版具有自己獨立的作用域。

• 支持ES6中的…展開模塊數據。

   

 

參考引用資料：小程序官方，騰訊雲，騰訊Bugly，微信小程序club的作者【風瀟雨落】

 

下一篇，小程序開發項目實例，測試及發布

 

歡迎關注公眾號（hongji8410）和加入QQ群一起交流（522342554）