一、小程序的價值觀

張小龍是以小程序的價值觀為出發點解釋產品開發的思路的，他認為應用號的形態大致為：“一種新的公眾號形態，這種形態下面用戶關注了一個公眾號，就像安裝了一個 APP 一樣。他要找這個公眾號的時候就像找一個 APP，在平時這個號不會向用戶發東西的，所以 APP 就會很安靜的存在那里，等用戶需要的時候找到它就好了，這樣的話我們可以嘗試做到讓更多的 APP 有一種更輕量的形態，但是又更好使用的一種形態來存在，這是我們在探討的一種新的公眾號形態，叫應用號。”

開發者應該從應用號的價值觀出發去思考產品的可能性。比如商城就太復雜而且不符合“用完即走”的價值觀，而比較成功的案例有摩拜單車、冷氣機的應用、微信支付等一些輕量級的應用。通過在微信里設計一個界面（頁面）或添加一個按鈕就可以去滿足用戶需求。

二、MINA 框架概述

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

三、現代化前端技巧

小程序引入了一些很重要的現代化前端開發的概念，包括：

• Virtual DOM：開發者寫 iOS 和原生的 h5 應用的時候，很多時候是手動地去操作 UI，用戶按按鈕之后改變頁面。當應用很復雜的時候在改變的過程可能就會產生錯誤，Virtual DOM 每次要去改變一個界面的時候，重新把界面做一次再進行修改，避免出錯。
• MVVM：分離邏輯和數據。
• 組件化：功能、風格模塊化，每個風格封裝在組件里就不會泄露。

四、MINA 是不是 HTML 5

微信小程序一出來，大家都在猜測是基于什么技術，是 H5 還是原生。它的框架看起來既像 H5，又像原生。小程序寫的是 H5 代碼，但是它又不遵從 H5 的標準寫法。它很多方面借用了 Web 技術，但很多細節又不一樣。

1.MINA 是 HTML 5

• 支持大多數 CSS 屬性：最新的Flexbox布局、傳統的文件流布局、百分比單位、CSS 動畫、Transform
• 幾乎所有的組件都是 HTML5 實現
• 可以選擇ES6自動轉成ES5

2.MINA 不是HTML5

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

五、完整的小程序應用演示

前端開發者可以快速開發小程序，因為概念基本相同，如風格、Javascript 是一樣的。但具體接口不同，不能直接套用，一些事件的處理小程序有自己的標準。比如點擊一個按鈕，代碼需要去審核、發布請求等。

微信小程序整體是基于MINA框架，官方提供了很多已經封裝好的組件和API 供開發者調用，不僅包括一些常用的滾動視圖，按鈕，圖片組件，還提供了地圖（map）和畫布（canvas）組件，這讓未來小程序內嵌一些小游戲以及簡單的地圖應用成為可能。

MINA 組件

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

當然更值得注意的是微信所提供的API， 主要有一些網絡，媒體，數據類的API， 具體可以參照：http://wxopen.bcoder.cn/index-2.htm ，關于API，微信官方文檔是這么介紹的 “可以方便的調起微信提供的能力”， 也許微信會提供何種能力將是小程序發展的關鍵所在。

那么如何寫一個微信小程序呢？下面以一個同性交友平臺為例進行演示：

項目源碼地址：https://git.oschina.net/hayeah/tongxing

開發的首要前提是需要微信登錄，并且確保已經拿到了內側或者公測的資格。

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

打開以后你會看到這樣的界面：

選擇小程序進入后就可以添加項目了：

左側為菜單欄，中間是編譯后的預覽界面，可以實時更新，右側是項目目錄。

微信小程序以頁面為主導將樣式，UI，邏輯分別放到這不同的三個文件中， 這樣開發微信小程序就變成了實現設計一個個小的頁面，而每個頁面又變成分別去實現各個組件的樣式，布局，邏輯，這種方式一定程度上減小了代碼的耦合程度。

微信小程序通過 wxss,js, wxml 文件來分別實現每個頁面的樣式，邏輯，視圖（UI），每個頁面都包括或缺省包括以上三個部分，其還有三個類似的全局文件，當某個頁面缺省時，會默認使用全局的樣式，不過建議全局文件只實現統一的風格和邏輯。

三個部分詳細介紹如下：

1. 樣式

開發者需要將微信小程序的頁面樣式實現在一個個 .wxss 文件當中，一個頁面對應一個樣式文件，若空缺將使用 app.wxss（全局樣式）定義的默認樣式中的屬性。這里建議每個頁面實現一個樣式，app.wxss中只實現共有的風格。 wxss 支持絕大多數 css 所支持的樣式，還有一些特有的特性，你可以把它當作css 來寫。安卓開發的同學可以將他認為是定義了每個控件的Activity的 style.xml。 例如：

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

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

2. 邏輯

邏輯代碼主要實現在一個 .js 格式的文件中， 其中定義一些自己的業務邏輯，還可以接收UI傳遞過來的一些事件（參數）并進行處理，從而實現一些用戶交互。比如：

bindinput(e) {

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

this.setData({

newMessageText: e.detail.value

});

},

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

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 主要實現在一個以 .wxml 中的文件中，其實現方式與xml，html 類似，主要定義了頁面的控件類型，指定控件交互事件調用的邏輯，控件的風格類型。微信官方目前提供了一些基礎的控件給開發者使用。 使用 Mustache 語法綁定數據，支持條件渲染，列表渲染， 類似邏輯代碼的模塊化，也支持定義UI 模版以及引用，具體可以參考官方文檔。

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

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

代碼完成后就可以點擊項目選項，在界面上點擊預覽，就會彈出可以用注冊過的微信號真機預覽的二維碼，開發者可以在真機上進行測試。