前言
本文主要轉(zhuǎn)自@勞卜（簡書作者）的通過小程序看前端一文旦棉，加些自己的理解齿风。
2016年9月22日凌晨，微信官方發(fā)布了關(guān)于微信小程序（微信應(yīng)用號）的內(nèi)測通知绑洛。接著救斑，朋友圈就被微信小程序刷屏了，各種揣測真屯、介紹性文章在一夜里誕生脸候。而真正收到內(nèi)測邀請的公眾號據(jù)說只有200個。
9月24日微信官方發(fā)布了不需要破解就可以使用的微信小程序開發(fā)者工具和文檔绑蔫。
那么运沦，我們就從前端的角度，來看看微信小程序是個什么東西吧配深。
微信提供的開發(fā)工具和文檔地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418
作為一名前端開發(fā)者携添，我下載了小程序開發(fā)工具。用微信掃描二維碼登錄篓叶、創(chuàng)建項目后就是IDE的界面：
從整個結(jié)構(gòu)布局來看這款I(lǐng)DE工具可以分為三個部分烈掠，左側(cè)是導(dǎo)航操作區(qū)域，中間是目錄或展示區(qū)域缸托，右側(cè)為調(diào)試區(qū)域（很像Chrome的調(diào)試工具）左敌。下面我們從前端的角度來看看微信小程序。
代碼
從開發(fā)文檔來看嗦董，微信小程序的前端技術(shù)主要可以分為“框架”母谎、“組件”和“API”。
1.框架
小程序開發(fā)框架的目標是通過盡可能簡單京革、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗的服務(wù)奇唤。
框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架匹摇，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)咬扇，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
微信提供了一套自己的用于開發(fā)小程序的前端框架廊勃，感覺目前主流的前端框架的一些優(yōu)點懈贺，又有其特殊的地方。
比如它包含了和其他框架一樣的“邏輯層”和“視圖層”坡垫，以數(shù)據(jù)驅(qū)動為主梭灿，不操作DOM元素，每個頁面有獨立的作用域冰悠，并提供模塊化能力等堡妒。
特殊的地方在于其只能在微信小程序開發(fā)工具內(nèi)使用，并做了相對嚴格的使用和配置限制溉卓，開發(fā)者必須按照其規(guī)定的用法來使用皮迟。一些外部的框架和插件在小程序里都是無法使用的搬泥，同時由于框架并非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用伏尼，如document忿檩，window等。
下面以代碼為例子來介紹：
（1）數(shù)據(jù)綁定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello World!'
}
})
Page() 方法用來注冊一個頁面爆阶。接受一個 OBJECT 參數(shù)燥透，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)扰她、事件處理函數(shù)等兽掰。這和目前比較新的Vue框架語法十分類似，Vue代碼如下：
<view> {{message}} </view>
// page.js
new Vue({
data: {
message: 'Hello World!'
}
})
都是雙括號插值語法徒役，連數(shù)據(jù)初始化和雙向綁定的格式都一樣～
這里需要注意的是孽尽，微信小程序提供了WXML后綴的文件類型，其實就是類似XML的標簽語言文件忧勿。
（2）列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1,2,3,4,5]
}
})
這樣的列表渲染語法相信學(xué)過Angular和Vue的同學(xué)都比較容易掌握杉女，都是非常的類似，當然還有條件渲染等鸳吸。
（3）事件綁定
<view bindtap="add"> {{count}} </view>
Page({
data: {
count:1
},
add:function(e){
this.setData({
data:this.data.count +1
})
}
})
如果你熟悉React熏挎，那么其里面有一個setState的方法可以用來改變狀態(tài)的值，這里的setDate也是一樣的晌砾，通過綁定的add方法來改變視圖中count的值坎拐。
（4）樣式導(dǎo)入
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import"common.wxss";
.middle-p {
padding:15px;
}
這里小程序提供了又一種新的文件后綴類型WXSS，用于描述WXML的組件樣式养匈，其與CSS文件相比還提供了像SASS和LESS這樣的預(yù)編譯語言的樣式導(dǎo)入功能哼勇，同時還提供了rpx（responsive pixel）及rem的單位尺寸功能。
（5）模塊化
// common.js
function sayHello(name) {
console.log('Hello '+ name +'!')
}
module.exports = {
sayHello: sayHello
}
var common = require('common.js')
Page({
helloMINA:function(){
common.sayHello('MINA')
}
})
微信小程序秉承了JS模塊化的機制呕乎，熟悉Require.js或者Sea.js的同學(xué)應(yīng)該很熟悉积担，這里通過module.exports暴露對象，通過require來獲取對象猬仁。
（6）ES6 語法以及 API 支持
今天（10月12日）登錄時提示基礎(chǔ)庫組建有更新了0.10.101000版本帝璧，在 0.10.101000 以及之后版本的開發(fā)工具中，會默認使用 babel將開發(fā)者代碼 ES6語法轉(zhuǎn)換為三端都能很好支持的 ES5的代碼湿刽，幫助開發(fā)者解決環(huán)境不同所帶來的開發(fā)問題的烁。但是，這種轉(zhuǎn)換只會幫助開發(fā)處理語法上問題诈闺，新的 ES6的 API 例如 Promise等需要開發(fā)者自行引入 Polyfill或者別的類庫撮躁。
2.組件
小程序的組件其實也是框架的一部分，主要負責(zé)UI的呈現(xiàn)买雾，也自帶了一些功能與微信風(fēng)格的樣式把曼。基本上移動端常用的組件都包含在內(nèi)漓穿，比如表單組件嗤军、導(dǎo)航組件、媒體組件等晃危。下面便是小程序提供的八類組件：
-
視圖容器
view 視圖容器
scroll-view 可滾動視圖容器
swiper 滑塊視圖容器 -
基礎(chǔ)內(nèi)容
icon 圖標
text 文字
progress 進度條 -
表單組件
button 按鈕
form 表單
input 輸入框
checkbox 多項選擇器
radio 單項選擇器
picker 列表選擇器
slider 滾動選擇器
switch 開關(guān)選擇器
label 標簽 -
操作反饋
action-sheet 上拉菜單
modal 模態(tài)彈窗
toast 消息提示框
loading 加載提示符 -
導(dǎo)航
navigator 應(yīng)用鏈接 -
媒體組件
audio 音頻
image 圖片
video 視頻 -
地圖
map 地圖 -
畫布
canvas 畫布
對于小程序的組件使用其實不是非常復(fù)雜叙赚，按照文檔的使用示例便可以輕松搞定。
3.API接口
相比微信公眾號的開發(fā)僚饭，微信小程序向開發(fā)者提供了更多的API接口震叮，可以方便的調(diào)起微信提供的能力，比如監(jiān)聽重力感應(yīng)和羅盤數(shù)據(jù)鳍鸵、WebSocket連接苇瓣、支付功能等。下面以一個發(fā)起網(wǎng)絡(luò)請求的API為例：
wx.request({
url:'test.php',
data: {
name:'Zhx',
age:18
},
header: {
'Content-Type':'application/json'
},
success:function(res) {
console.log("請求成功")
},
fail:function(){
console.log("請求失敗")
}
})
wx.request發(fā)起的是https請求偿乖。一個微信小程序击罪，同時只能有5個網(wǎng)絡(luò)請求連接。關(guān)于更多API接口的介紹請查閱官方文檔贪薪。
以上便是關(guān)于微信小程序前端代碼部分的簡單介紹媳禁，相信前端的同學(xué)上手都是相對容易的。
對前端的影響
微信小程序一出來的時候画切，網(wǎng)上關(guān)于其對于前端界的影響層出不窮竣稽，更多的文章和評論認為前端又要火了，前端的第二春來了霍弹，Javascript和HTML5的新時代來了等等毫别。
當然微信小程序的出現(xiàn)確實會給前端帶來一定的推波助瀾的效果，但是任何一件事物的誕生都是利弊并存的庞萍，微信小程序也不例外拧烦。
1.利
（1）提高開發(fā)兼容性：微信小程序可以說是重新定義了APP，使得一款應(yīng)用能夠在android钝计、iphone及windows phone中都能運行恋博，對于前端來說實現(xiàn)了“一次編譯，到處運行”的理念私恬。
（2）推動前端技術(shù)的發(fā)展：微信小程序以其簡單的開發(fā)環(huán)境债沮，使以Javascript和HTML5為主的前端技術(shù)在龐大的微信社交群體內(nèi)傳播，越來越多的人開始接觸前端本鸣，參與到前端編碼和設(shè)計中來疫衩，為前端技術(shù)貢獻力量。
（3）其他...
2.弊
（1）增加前端工作量及學(xué)習(xí)成本：原本一名前端工程師負責(zé)的平臺就很廣泛荣德，包括PC端闷煤、移動端童芹、APP應(yīng)用等，微信小程序的出現(xiàn)會要求前端涉及微信應(yīng)用的開發(fā)鲤拿，一定程度增加了學(xué)習(xí)和工作成本假褪。同時企業(yè)也會增加這方面的開發(fā)和投入成本。
（2）前端競爭日趨明顯：微信小程序的誕生可能又會吸引一批后臺近顷、APP開發(fā)等其他領(lǐng)域的人員轉(zhuǎn)向前端開發(fā)生音，而這些本來就具備較強邏輯思維或者較強感性思維的人將擠掉那些處于前端邊緣的新手，可能使得大部分低水平前端開發(fā)者面臨失業(yè)或者找不到工作的危險窒升。
（3）其他...
其實反過來我們也可以這樣認為：
技術(shù)的發(fā)展不是基于一個平臺去改變缀遍，而是通過技術(shù)去驅(qū)動一個平臺改變，正是因為前端的發(fā)展才催生了“小程序”的這種可能性…
希望能幫助到大家對小程序的理解～
