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

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

• 開發基本框架（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是必需的。

小程式的生命周期函數

生命周期函數

• onLoad: 頁面載入

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

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

• onShow: 頁面顯示

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

• onReady: 頁面初次渲染完成

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

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

• onHide: 頁面隱藏

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

• onUnload: 頁面卸載

• 當redirectTo或navigateBack的時候調用。

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

頁面的路由

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

選擇器

目前支持的選擇器有：

尺寸單位

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

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

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

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）