【摘要】微信小程序

9月22日凌晨，微信公衆平臺對200個服務號發送了「微信小程序」的測試邀請。微信方面表示，「小程序」目前只是測試階段，將來此類「小程序」的主體比較普遍，無論是我的、政府、企業、媒體，抑或是其餘組織開發者，都可以申請註冊和使用「小程序」，「小程序」發佈後，在業內掀起了較大的反響。

下面是我初步探究所作的簡單整理。

開發工具下載

目錄結構

咱們在微信提供的開發工具中新建一個項目，開發工具會給咱們創建一個最基本的目錄結構和示例Demo代碼，結構以下：

結構很簡單，程序主體部分由app.js,app.json,app.wxss三個文件組成，並且必須放在項目的根目錄。
頁面由四個文件組成，分別是：

文件類型	做用	必填
js	頁面邏輯	yes
wxml	頁面結構	yes
wxss	頁面樣式	no
json	頁面配置	no

配置

• 使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

• 每個小程序頁面也能夠使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

邏輯層

1.註冊程序

App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。
示例：

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() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。

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 的指向會形成未知的錯誤。因此咱們更推薦開發者採用 module.exports 來暴露模塊接口，除非你已經清晰知道這二者的關係。

• 小程序目前不支持直接引入 node_modules , 開發者須要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。

4.API

小程序開發框架提供豐富的微信原生 API，能夠方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

5.ES6 轉 ES5

微信小程序運行在三端：iOS、Android 和用於調試的開發者工具

• 在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中

• 在 Android 上，小程序的 javascript 代碼是運行在 X5 內核中

• 在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs（chrome） 中

雖然三個運行環境在大部分狀況下是類似的，可是還有一些細微的區別，爲了幫助開發者解決這種區別帶來的困擾，開發工具會自動幫助開發者將 ES6 的代碼轉爲 ES5 的代碼。

對於使用其餘構建工具的開發者，能夠在項目也開中關掉這個功能，使用本身的構建和轉碼工具。

視圖層

和我以前對微信小程序的直覺不一樣，微信小程序不支持也不兼容HTML，而是微信全新定義的規範，它的視圖文件的後綴名爲.wxml，是基於xml進行的擴展，其樣式表文件也並不是CSS，而是.wxss,兼容受限的部分CSS寫法。
視圖渲染時，採用了相似單向數據綁定的方式進行數據綁定，WXML 中的動態數據均來自對應Page的data。使用Mustache語法（雙大括號）將變量包起來:

<view> {{ message }} </view>

框架可讓數據與視圖很是簡單地保持同步。當作數據修改的時候，只須要在邏輯層修改數據，視圖層就會作相應的更新。
支持條件渲染、列表渲染、模板、事件

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應該怎麼顯示。
WXSS 具備 CSS 大部分特性。 同時爲了更適合開發微信小程序，咱們對 CSS 進行了擴充以及修改。
與 CSS 相比咱們擴展的特性有：

• 尺寸單位

• 樣式導入

框架爲開發者提供了一系列基礎組件，開發者能夠經過組合這些基礎組件進行快速開發。組件文檔

微信小程序官方文檔傳送門