開發(fā)基本框架（MINA框架）

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

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

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

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

│ │ ├─ index.wxml ···························· index頁面結(jié)構(gòu)

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

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

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

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

│ ├─ logs.wxml ····························· logs頁面結(jié)構(gòu)

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

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

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

├─ app.js ······································ 應(yīng)用程序邏輯 用于定義整個應(yīng)用的邏輯

用來監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量

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

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

└─ app.wxss ······························· 應(yīng)用程序公共樣式 用來設(shè)置整個應(yīng)用的公共樣式

1.app函數(shù)是一個全局函數(shù)，用來創(chuàng)建一個應(yīng)用程序?qū)嵗總€應(yīng)用程序都會有他的生命周期

2.page也是一個全局函數(shù)，用來創(chuàng)建頁面對象

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

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

5.頁面的所有配置或設(shè)置都會優(yōu)先于全局配置或設(shè)置，即局部會覆蓋全局的配置

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

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

8. 當應(yīng)用程序啟動時會自動執(zhí)行項目目錄下的app.js文件，在app.js中通過調(diào)用全局App([option])方法創(chuàng)建一個應(yīng)用程序?qū)嵗渲型ㄟ^參數(shù)指定的一些特定的方法，會在特定的執(zhí)行時機去執(zhí)行，也就是說通常所說的生命周期事件方法。其中app.js,app.json是必需的。

小程序的生命周期函數(shù)

屬性類型描述觸發(fā)時機

onLaunchFunction生命周期函數(shù)--監(jiān)聽小程序初始化當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）

onShowFunction生命周期函數(shù)--監(jiān)聽小程序顯示當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow

onHideFunction生命周期函數(shù)--監(jiān)聽小程序隱藏當小程序從前臺進入后臺，會觸發(fā) onHide

其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用this 可以訪問

生命周期函數(shù)

onLoad: 頁面加載

一個頁面只會調(diào)用一次。

接收頁面參數(shù)可以獲取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 頁面顯示

每次打開頁面都會調(diào)用一次。

onReady: 頁面初次渲染完成

一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。

對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置。

onHide: 頁面隱藏

當navigateTo或底部tab切換時調(diào)用。

onUnload: 頁面卸載

當redirectTo或navigateBack的時候調(diào)用。

頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)

屬性類型描述

dataObject頁面的初始數(shù)據(jù)

onLoadFunction生命周期函數(shù)--監(jiān)聽頁面加載

onReadyFunction生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

onShowFunction生命周期函數(shù)--監(jiān)聽頁面顯示

onHideFunction生命周期函數(shù)--監(jiān)聽頁面隱藏

onUnloadFunction生命周期函數(shù)--監(jiān)聽頁面卸載

onPullDownRefreshFunction頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

onReachBottomFunction頁面上拉觸底事件的處理函數(shù)

其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁面的函數(shù)中用 this 可以訪問

頁面的路由

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

路由方式觸發(fā)時機路由后頁面路由前頁面

初始化小程序打開的第一個頁面onLoad，onShow

打開新頁面調(diào)用 API wx.navigateTo 或使用組件onLoad，onShowonHide

頁面重定向調(diào)用 API wx.redirectTo 或使用組件onLoad，onShowonUnload

頁面返回調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕onShowonUnload（多層頁面返回每個頁面都會按順序觸發(fā)onUnload）

Tab 切換多 Tab 模式下用戶切換 Tab第一次打開 onLoad，onshow；否則 onShowonHide

選擇器

目前支持的選擇器有：

選擇器樣例樣例描述

.class.intro選擇所有擁有 class="intro" 的組件

#id#firstname選擇擁有 id="firstname" 的組件

elementview選擇所有 view 組件

element, elementview, checkbox選擇所有文檔的 view 組件和所有的 checkbox 組件

::afterview::after在 view 組件后邊插入內(nèi)容

::beforeview::before在 view 組件前邊插入內(nèi)容

尺寸單位

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

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

建議： 開發(fā)微信小程序時設(shè)計師可以用 iPhone6 作為視覺稿的標準

設(shè)備rpx換算px (屏幕寬度/750)px換算rpx (750/屏幕寬度)

iPhone51rpx = 0.42px1px = 2.34rpx

iPhone61rpx = 0.5px1px = 2rpx

iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

javascript限制與優(yōu)化

（一）限制：

通過傳入字符串來執(zhí)行代碼的能力都禁用了

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

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

與瀏覽器BOM相關(guān)的api都是沒有的。

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

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

（二） 優(yōu)化

登錄：

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

storage：

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

微信支付路徑不再受限

（三） 不便

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

2）打開的頁面有5個的限制，在開發(fā)時需要主要控制打開頁面的數(shù)量

wxss：

wxss 不再支持媒體查詢

增加了app的flex布局

引入rpx的概念

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

wxss中，不能使用背景圖片。這跟框架的設(shè)計思想認為一切皆組件有關(guān)

wxss動畫不支持（目前）

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

（四）index.js中的data數(shù)據(jù)只讀

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

setData單次設(shè)置的數(shù)據(jù)不能超過1024kB，需要避免一次設(shè)置過多的數(shù)據(jù)。

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

支持ES6中的…展開模塊數(shù)據(jù)。

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

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