小程式開發基本框架及其限制與優化
阿新 • • 發佈：2019-02-11
轉自解放號社群：http://bbs.jointforce.com/topic/25591
開發基本框架（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及中的 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中的…展開模組資料。