一、小程序的價(jià)值觀

張小龍是以小程序的價(jià)值觀為出發(fā)點(diǎn)解釋產(chǎn)品開(kāi)發(fā)的思路的，他認(rèn)為應(yīng)用號(hào)的形態(tài)大致為：“一種新的公眾號(hào)形態(tài)，這種形態(tài)下面用戶關(guān)注了一個(gè)公眾號(hào)，就像安裝了一個(gè) APP 一樣。他要找這個(gè)公眾號(hào)的時(shí)候就像找一個(gè) APP，在平時(shí)這個(gè)號(hào)不會(huì)向用戶發(fā)東西的，所以 APP 就會(huì)很安靜的存在那里，等用戶需要的時(shí)候找到它就好了，這樣的話我們可以嘗試做到讓更多的 APP 有一種更輕量的形態(tài)，但是又更好使用的一種形態(tài)來(lái)存在，這是我們?cè)谔接懙囊环N新的公眾號(hào)形態(tài)，叫應(yīng)用號(hào)。”

開(kāi)發(fā)者應(yīng)該從應(yīng)用號(hào)的價(jià)值觀出發(fā)去思考產(chǎn)品的可能性。比如商城就太復(fù)雜而且不符合“用完即走”的價(jià)值觀，而比較成功的案例有摩拜單車(chē)、冷氣機(jī)的應(yīng)用、微信支付等一些輕量級(jí)的應(yīng)用。通過(guò)在微信里設(shè)計(jì)一個(gè)界面（頁(yè)面）或添加一個(gè)按鈕就可以去滿足用戶需求。

二、MINA 框架概述

小程序融合了很多前端開(kāi)發(fā)界的概念，但是并沒(méi)有采用任何一個(gè)框架，包括流行的REACT、VUE，還有CORDOVA。它不是三者中的任意一個(gè)，而是拼湊出一個(gè)新的框架。這個(gè)過(guò)程類似于：

三、現(xiàn)代化前端技巧

小程序引入了一些很重要的現(xiàn)代化前端開(kāi)發(fā)的概念，包括：

• Virtual DOM：開(kāi)發(fā)者寫(xiě) iOS 和原生的 h5 應(yīng)用的時(shí)候，很多時(shí)候是手動(dòng)地去操作 UI，用戶按按鈕之后改變頁(yè)面。當(dāng)應(yīng)用很復(fù)雜的時(shí)候在改變的過(guò)程可能就會(huì)產(chǎn)生錯(cuò)誤，Virtual DOM 每次要去改變一個(gè)界面的時(shí)候，重新把界面做一次再進(jìn)行修改，避免出錯(cuò)。
• MVVM：分離邏輯和數(shù)據(jù)。
• 組件化：功能、風(fēng)格模塊化，每個(gè)風(fēng)格封裝在組件里就不會(huì)泄露。

四、MINA 是不是 HTML 5

微信小程序一出來(lái)，大家都在猜測(cè)是基于什么技術(shù)，是 H5 還是原生。它的框架看起來(lái)既像 H5，又像原生。小程序?qū)懙氖?H5 代碼，但是它又不遵從 H5 的標(biāo)準(zhǔn)寫(xiě)法。它很多方面借用了 Web 技術(shù)，但很多細(xì)節(jié)又不一樣。

1.MINA 是 HTML 5

• 支持大多數(shù) CSS 屬性：最新的Flexbox布局、傳統(tǒng)的文件流布局、百分比單位、CSS 動(dòng)畫(huà)、Transform
• 幾乎所有的組件都是 HTML5 實(shí)現(xiàn)
• 可以選擇ES6自動(dòng)轉(zhuǎn)成ES5

2.MINA 不是HTML5

• 非標(biāo)準(zhǔn)標(biāo)簽（組件）：我們知道寫(xiě)瀏覽器用的都是標(biāo)準(zhǔn)的主鍵，但是在 MINA 里面，小程序自成一個(gè)體系，雖然后臺(tái)還是一樣用瀏覽器的主鍵去實(shí)現(xiàn)的，但是在前面寫(xiě) HTML 的時(shí)候加上它自己的一套標(biāo)準(zhǔn)。
• 非標(biāo)準(zhǔn)CSS：rpx單位是微信小程序中css的尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.
• 非標(biāo)準(zhǔn)事件系統(tǒng)：當(dāng)按下一個(gè)按鈕的時(shí)候分配一個(gè)事件，這個(gè)事件也是非標(biāo)準(zhǔn)的，但是跟非標(biāo)準(zhǔn)很像。包括冒泡階段和捕捉階段。
• 非標(biāo)準(zhǔn) JS API：支持微信的接口，但是沒(méi)有任何標(biāo)準(zhǔn) JS接口。
• 不能操作 document 或者 DOM：雖然是在瀏覽器里面運(yùn)行，但是不能操作瀏覽器本身，不能操作原生文件本身，只能用Virtual DOM 去改變頁(yè)面。
• 有些組件有奇怪的默認(rèn)高寬(scroller,image)：通常在 Web 瀏覽器里面，主鍵是按圖片內(nèi)容的高度，基本上所有組件默認(rèn)高寬都是0，小程序的image是按照background-image來(lái)實(shí)現(xiàn)的，所以所有圖像會(huì)得到一個(gè)初始寬高320 240，而且無(wú)法通過(guò)auto重置，只可以通過(guò)具體的值來(lái)重寫(xiě)。
• Require：因?yàn)樾〕绦蜃猿梢粋€(gè)體系，JS 的包、CSS 框架都不能用，全部都要重新開(kāi)始。
• 1M打包上線：能夠更快地下載。

五、完整的小程序應(yīng)用演示

前端開(kāi)發(fā)者可以快速開(kāi)發(fā)小程序，因?yàn)楦拍罨鞠嗤顼L(fēng)格、Javascript 是一樣的。但具體接口不同，不能直接套用，一些事件的處理小程序有自己的標(biāo)準(zhǔn)。比如點(diǎn)擊一個(gè)按鈕，代碼需要去審核、發(fā)布請(qǐng)求等。

微信小程序整體是基于MINA框架，官方提供了很多已經(jīng)封裝好的組件和API 供開(kāi)發(fā)者調(diào)用，不僅包括一些常用的滾動(dòng)視圖，按鈕，圖片組件，還提供了地圖（map）和畫(huà)布（canvas）組件，這讓未來(lái)小程序內(nèi)嵌一些小游戲以及簡(jiǎn)單的地圖應(yīng)用成為可能。

MINA 組件

• 基本：view,text
• 表單：button,input,radio,slider
• 媒體：image,video,audio,canvas
• 模態(tài)：action-sheet,modal,toast,loading
• 容器：swiper,scroller
• 導(dǎo)航：navigator,tabbar

當(dāng)然更值得注意的是微信所提供的API， 主要有一些網(wǎng)絡(luò)，媒體，數(shù)據(jù)類的API， 具體可以參照：http://wxopen.bcoder.cn/index-2.htm ，關(guān)于API，微信官方文檔是這么介紹的 “可以方便的調(diào)起微信提供的能力”， 也許微信會(huì)提供何種能力將是小程序發(fā)展的關(guān)鍵所在。

那么如何寫(xiě)一個(gè)微信小程序呢？下面以一個(gè)同性交友平臺(tái)為例進(jìn)行演示：

項(xiàng)目源碼地址：https://git.oschina.net/hayeah/tongxing

開(kāi)發(fā)的首要前提是需要微信登錄，并且確保已經(jīng)拿到了內(nèi)側(cè)或者公測(cè)的資格。

微信開(kāi)發(fā)者工具下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

打開(kāi)以后你會(huì)看到這樣的界面：

選擇小程序進(jìn)入后就可以添加項(xiàng)目了：

左側(cè)為菜單欄，中間是編譯后的預(yù)覽界面，可以實(shí)時(shí)更新，右側(cè)是項(xiàng)目目錄。

微信小程序以頁(yè)面為主導(dǎo)將樣式，UI，邏輯分別放到這不同的三個(gè)文件中， 這樣開(kāi)發(fā)微信小程序就變成了實(shí)現(xiàn)設(shè)計(jì)一個(gè)個(gè)小的頁(yè)面，而每個(gè)頁(yè)面又變成分別去實(shí)現(xiàn)各個(gè)組件的樣式，布局，邏輯，這種方式一定程度上減小了代碼的耦合程度。

微信小程序通過(guò) wxss,js, wxml 文件來(lái)分別實(shí)現(xiàn)每個(gè)頁(yè)面的樣式，邏輯，視圖（UI），每個(gè)頁(yè)面都包括或缺省包括以上三個(gè)部分，其還有三個(gè)類似的全局文件，當(dāng)某個(gè)頁(yè)面缺省時(shí)，會(huì)默認(rèn)使用全局的樣式，不過(guò)建議全局文件只實(shí)現(xiàn)統(tǒng)一的風(fēng)格和邏輯。

三個(gè)部分詳細(xì)介紹如下：

1. 樣式

開(kāi)發(fā)者需要將微信小程序的頁(yè)面樣式實(shí)現(xiàn)在一個(gè)個(gè) .wxss 文件當(dāng)中，一個(gè)頁(yè)面對(duì)應(yīng)一個(gè)樣式文件，若空缺將使用 app.wxss（全局樣式）定義的默認(rèn)樣式中的屬性。這里建議每個(gè)頁(yè)面實(shí)現(xiàn)一個(gè)樣式，app.wxss中只實(shí)現(xiàn)共有的風(fēng)格。 wxss 支持絕大多數(shù) css 所支持的樣式，還有一些特有的特性，你可以把它當(dāng)作css 來(lái)寫(xiě)。安卓開(kāi)發(fā)的同學(xué)可以將他認(rèn)為是定義了每個(gè)控件的Activity的 style.xml。 例如：

.profile-header__badge {
  background: #0068FF;
  color: #FFF;
  font-size: 10px;
  padding: 3px;
}

則是定義了一個(gè)叫 profile-header_badge 的字體樣式，并指定了其背景顏色，字體顏色，字體大小以及字體到邊框的間距。

2. 邏輯

邏輯代碼主要實(shí)現(xiàn)在一個(gè) .js 格式的文件中， 其中定義一些自己的業(yè)務(wù)邏輯，還可以接收UI傳遞過(guò)來(lái)的一些事件（參數(shù)）并進(jìn)行處理，從而實(shí)現(xiàn)一些用戶交互。比如：

bindinput(e) {

console.log("input", e.detail);

this.setData({

newMessageText: e.detail.value

});

},

就是獲取用戶輸入并且把用戶輸入的內(nèi)容賦值給 newMessageText 變量， 之后只需要在UI相應(yīng)控件上把其 binginput 事件鏈接到這個(gè)函數(shù)即可。
微信小程序還支持將一些通用邏輯抽象出來(lái)定義成函數(shù)，放在單獨(dú)的 js 文件中，只需寫(xiě)好一個(gè)函數(shù)，再使用 module.exports 將其暴露給其他 js 文件即可。其他 js 文件使用前調(diào)用 require(path) 函數(shù)便可以通過(guò)類似于 Java 靜態(tài)函數(shù)（長(zhǎng)得像）的方法直接調(diào)用了。

function sayHello(name) {

  console.log('Hello ' + name + '!')

}

module.exports = {

  sayHello: sayHello

}

var common = require('common.js')

Page({

  helloMINA: function() {

    common.sayHello('MINA')

  }

})

3. UI

UI 主要實(shí)現(xiàn)在一個(gè)以 .wxml 中的文件中，其實(shí)現(xiàn)方式與xml，html 類似，主要定義了頁(yè)面的控件類型，指定控件交互事件調(diào)用的邏輯，控件的風(fēng)格類型。微信官方目前提供了一些基礎(chǔ)的控件給開(kāi)發(fā)者使用。 使用 Mustache 語(yǔ)法綁定數(shù)據(jù)，支持條件渲染，列表渲染， 類似邏輯代碼的模塊化，也支持定義UI 模版以及引用，具體可以參考官方文檔。

<view class="profile-input">
<input placeholder="說(shuō)說(shuō)你的心情"
value="{{newMessageText}}"
bindfocus="bindfocus"
bindinput="bindinput"
bindchange="bindchange"
bindblur="bindblur"
/>
</view>

如上則是設(shè)置了一個(gè)輸入框，其 bindinput 用戶輸入事件由 js 代碼中的 binginput 函數(shù)處理，也指定了 bindfocus,bingchange,bingdblur 的處理事件， 而其顯示的值由 newMessageText 變量決定。

代碼完成后就可以點(diǎn)擊項(xiàng)目選項(xiàng)，在界面上點(diǎn)擊預(yù)覽，就會(huì)彈出可以用注冊(cè)過(guò)的微信號(hào)真機(jī)預(yù)覽的二維碼，開(kāi)發(fā)者可以在真機(jī)上進(jìn)行測(cè)試。