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

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

 

• 開發基本框架（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）