微信小程序之初步探究
9月22日凌晨，微信公眾平臺對200個服務號發(fā)送了“微信小程序”的測試邀請。微信方面表示，“小程序”目前只是測試階段，未來此類“小程序”的主體比較廣泛，不管是個人、政府、企業(yè)、媒體，抑或是其他組織開發(fā)者，均可以申請注冊和使用“小程序”，“小程序”發(fā)布后，在業(yè)內(nèi)掀起了較大的反響。
下面是我初步探究所做的簡單整理。
目錄結(jié)構(gòu)
我們在微信提供的開發(fā)工具中新建一個項目，開發(fā)工具會給我們建立一個最基本的目錄結(jié)構(gòu)和示例Demo代碼，結(jié)構(gòu)如下：
結(jié)構(gòu)很簡單，程序主體部分由app.js,app.json,app.wxss三個文件組成，而且必須放在項目的根目錄。
頁面由四個文件組成，分別是：
配置
- 使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設置網(wǎng)絡超時時間、設置多 tab 等。
- 每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現(xiàn)進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內(nèi)容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
邏輯層
1.注冊程序
App() 函數(shù)用來注冊一個小程序。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等。
示例：
- App({
- onLaunch: function() {
- // Do something initial when launch.
- },
- onShow: function() {
- // Do something when show.
- },
- onHide: function() {
- // Do something when hide.
- },
- globalData: 'I am global data'
- })
2.注冊頁面
Page() 函數(shù)用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
- Page({
- data: {
- text: "This is page data."
- },
- onLoad: function(options) {
- // Do some initialize when page load.
- },
- onReady: function() {
- // Do something when page ready.
- },
- onShow: function() {
- // Do something when page show.
- },
- onHide: function() {
- // Do something when page hide.
- },
- onUnload: function() {
- // Do something when page close.
- },
- onPullDownRefresh: function() {
- // Do something when pull down
- },
- // Event handler.
- viewTap: function() {
- this.setData({
- text: 'Set some data for updating view.'
- })
- }
- });
3.模塊化
可以將一些公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。需要注意的是：
- exports 是 module.exports 的一個引用，因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發(fā)者采用 module.exports 來暴露模塊接口，除非你已經(jīng)清晰知道這兩者的關(guān)系。
- 小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時候建議拷貝出相關(guān)的代碼到小程序的目錄中。
4.API
小程序開發(fā)框架提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。
5.ES6 轉(zhuǎn) ES5
微信小程序運行在三端：iOS、Android 和用于調(diào)試的開發(fā)者工具
- 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中
- 在 Android 上，小程序的 javascript 代碼是運行在 X5 內(nèi)核中
- 在 開發(fā)工具上， 小程序的 javascript 代碼是運行在 nwjs(chrome) 中
雖然三個運行環(huán)境在大部分情況下是相似的，但是還有一些細微的區(qū)別，為了幫助開發(fā)者解決這種區(qū)別帶來的困擾，開發(fā)工具會自動幫助開發(fā)者將 ES6 的代碼轉(zhuǎn)為 ES5 的代碼。
對于使用其他構(gòu)建工具的開發(fā)者，可以在項目也開中關(guān)掉這個功能，使用自己的構(gòu)建和轉(zhuǎn)碼工具。
視圖層
和我之前對微信小程序的直覺不同，微信小程序不支持也不兼容HTML，而是微信全新定義的規(guī)范，它的視圖文件的后綴名為.wxml，是基于xml進行的擴展，其樣式表文件也并非CSS，而是.wxss,兼容受限的部分CSS寫法。
視圖渲染時，采用了類似單向數(shù)據(jù)綁定的方式進行數(shù)據(jù)綁定，WXML 中的動態(tài)數(shù)據(jù)均來自對應Page的data。使用Mustache語法(雙大括號)將變量包起來:
- <view> {{ message }} </view>
框架可以讓數(shù)據(jù)與視圖非常簡單地保持同步。當做數(shù)據(jù)修改的時候，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應的更新。支持條件渲染、列表渲染、模板、事件
WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎么顯示。
WXSS 具有 CSS 大部分特性。 同時為了更適合開發(fā)微信小程序，我們對 CSS 進行了擴充以及修改。
與 CSS 相比我們擴展的特性有：
- 尺寸單位
- 樣式導入
框架為開發(fā)者提供了一系列基礎組件，開發(fā)者可以通過組合這些基礎組件進行快速開發(fā)。組件文檔
微信小程序官方文檔傳送門
