前言
2016年9月22日凌晨迁匠，微信官方通過“微信公開課”公眾號發(fā)布了關于微信小程序（微信應用號）的內(nèi)測通知海雪。整個朋友圈瞬間便像炸開了鍋似的曹傀，各種揣測周荐、介紹性文章在一夜里誕生狭莱。而真正收到內(nèi)測邀請的公眾號據(jù)說只有200個僵娃。
雖然內(nèi)測名額十分稀少，但依賴中國廣大開發(fā)者的破解和分享精神腋妙，在網(wǎng)絡上很快出現(xiàn)了開發(fā)工具的破解版本和API文檔默怨。然而可能是微信的妥協(xié)或者早已預料，9月24日微信官方發(fā)布了不需要破解就可以使用的微信小程序開發(fā)者工具和文檔骤素，對于費勁心思破解完的開發(fā)者來說應該瞬間整個人都不好了匙睹。
以下便是微信提供的開發(fā)工具和文檔地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644087418
作為一名具有極客精神的前端開發(fā)者，我也馬上在這股熱潮中試了下水济竹，下載了小程序開發(fā)工具痕檬。下面是登陸后的界面：
從整個結構布局來看這款IDE工具可以分為三個部分，首先左側(cè)為導航操作區(qū)域送浊，中間是目錄或展示區(qū)域梦谜，右側(cè)為調(diào)試區(qū)域（很像Chrome的調(diào)試工具）。下面我就以前端的角度分別從代碼角度和宏觀角度介紹下自己對于微信小程序的看法袭景。
代碼角度
縱觀整個開發(fā)文檔改淑，微信小程序的前端技術主要可以分為“框架”、“組件”和“API接口”浴讯。
1.框架###
微信提供了一套自己的用于開發(fā)小程序的前端框架朵夏，和目前主流的前端框架相比，其既有類似的地方榆纽，也有特殊的地方仰猖。
特殊的地方在于其只能在微信小程序開發(fā)工具內(nèi)使用，并做了相對嚴格的使用和配置限制奈籽，開發(fā)者必須按照其規(guī)定的用法來使用饥侵。一些外部的框架和插件在小程序里都是無法使用的，同時由于框架并非運行在瀏覽器中衣屏，所以 JavaScript 在 web 中一些能力都無法使用躏升，如document，window等狼忱。
而相似的地方在于其包含了和其他框架一樣的“邏輯層”和“視圖層”膨疏，以數(shù)據(jù)驅(qū)動為主，不操作DOM元素等钻弄。下面以代碼為例子來介紹：
（1）數(shù)據(jù)綁定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
Page() 方法用來注冊一個頁面佃却。接受一個 OBJECT 參數(shù)，其指定頁面的初始數(shù)據(jù)窘俺、生命周期函數(shù)饲帅、事件處理函數(shù)等。這乍一看怎么和目前流行的Vue框架語法十分類似呢，Vue代碼如下：
<view> {{message}} </view>
// page.js
new Vue({
data: {
message: 'Hello MINA!'
}
})
都是雙括號插值語法灶泵，連數(shù)據(jù)初始化和雙向綁定的格式都一樣育八，好吧，就當純屬巧合吧赦邻。
這里需要注意的是髓棋，微信小程序提供了WXML后綴的文件類型，其實就是類似XML的標簽語言文件深纲。
（2）列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
這樣的列表渲染語法相信學過Angular和Vue的同學都比較容易掌握仲锄，都是非常的類似，當然還有條件渲染等湃鹊。
（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）樣式導入
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
這里小程序提供了又一種新的文件后綴類型WXSS，用于描述WXML的組件樣式余赢，其與CSS文件相比還提供了像SASS和LESS這樣的預編譯語言的樣式導入功能芯义，同時還提供了rpx及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的同學應該很熟悉扛拨，這里通過module.exports暴露對象，通過require來獲取對象举塔。
2.組件###
小程序的組件其實也是框架的一部分绑警，主要負責UI的呈現(xiàn)，也自帶了一些功能與微信風格的樣式央渣〖坪校基本上移動端常用的組件都包含在內(nèi)，比如表單組件芽丹、導航組件北启、媒體組件等。下面便是小程序提供的八類組件：
對于小程序的組件使用其實不是非常復雜拔第，按照文檔的使用示例便可以輕松搞定咕村，詳細地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1474644085698
3.API接口###
相比微信公眾號的開發(fā)，微信小程序向開發(fā)者提供了更多的API接口楼肪，可以方便的調(diào)起微信提供的能力培廓，比如監(jiān)聽重力感應和羅盤數(shù)據(jù)、WebSocket連接春叫、支付功能等。下面以一個發(fā)起網(wǎng)絡請求的API為例：
wx.request({
url: 'test.php',
data: {
name: 'luozh' ,
age: 18
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log("請求成功")
},
fail: function() {
console.log("請求失敗")
}
})
wx.request發(fā)起的是https請求。一個微信小程序暂殖，同時只能有5個網(wǎng)絡請求連接价匠。關于更多API接口的介紹請查閱官方文檔。
以上便是關于微信小程序前端代碼部分的簡單介紹呛每，相信有一點前端框架使用經(jīng)驗的同學上手都是相對容易的踩窖，下面將從宏觀角度講解下我個人認為微信小程序給前端領域的帶來影響。
宏觀角度
微信小程序一出來的時候晨横，網(wǎng)上關于其對于前端界的影響層出不窮洋腮，更多的文章和評論認為前端又要火了，前端的第二春來了手形，Javascript和HTML5的新時代來了等啥供。
當然微信小程序的出現(xiàn)確實會給前端帶來一定的推波助瀾的效果，但是任何一件事物的誕生都是利弊并存的库糠，微信小程序也不例外伙狐。以下便簡單闡述下我個人的看法：
1.利###
（1）提高開發(fā)兼容性：微信小程序可以說是重新定義了APP，使得一款應用能夠在android瞬欧、iphone及windows phone中都能運行贷屎，對于前端來說實現(xiàn)了“一次編譯，到處運行”的理念艘虎。
（2）推動前端技術的發(fā)展：微信小程序以其簡單的開發(fā)環(huán)境唉侄，使以Javascript和HTML5為主的前端技術在龐大的微信社交群體內(nèi)傳播，越來越多的人開始接觸前端野建，參與到前端編碼和設計中來属划，為前端技術貢獻力量。
（3）其他...
2.弊###
（1）增加前端工作量及學習成本：原本一名前端工程師負責的平臺就很廣泛贬墩，包括PC端榴嗅、移動端、APP應用等陶舞，微信小程序的出現(xiàn)會要求前端涉及微信應用的開發(fā)嗽测，一定程度增加了學習和工作成本。同時企業(yè)也會增加這方面的開發(fā)和投入成本肿孵。
（2）前端競爭日趨明顯：微信小程序的誕生可能又會吸引一批后臺唠粥、APP開發(fā)等其他領域的人員轉(zhuǎn)向前端開發(fā)，而這些本來就具備較強邏輯思維或者較強感性思維的人將擠掉那些處于前端邊緣的新手停做，可能使得大部分低水平前端開發(fā)者面臨失業(yè)或者找不到工作的危險晤愧。
（3）其他...
這里大概介紹了幾點微信小程序給前端帶來的影響，更多的大家可以補充蛉腌。
總結
本文從代碼角度和宏觀角度簡單闡述了微信小程序在前端領域的一些內(nèi)容和影響官份，希望能夠幫助那些不了解微信小程序的開發(fā)者很快入門并認識這一新的技術領域只厘。
至于小程序?qū)τ谇岸说挠绊懀催^來我們也可以這樣認為：
技術的發(fā)展不是基于一個平臺去改變舅巷，而是通過技術去驅(qū)動一個平臺改變羔味，正是因為前端的發(fā)展才催生了“小程序”的這種可能性…
