今天（2017/1/9）微信小程序終於上線了，可以說這是張小龍在微信上的又一大戰略性的佈局。至於微信小程序的各種特點以及簡單使用，想必各位讀者也跟我一樣在被朋友圈刷屏之後已經有所瞭解。小程序的開發與傳統的web前端開發極其相似，想必各位技術宅們關心的是如何去開發一個小程序，這裏我簡單介紹一下如何簡單上手開發小程序。
第一步：安裝
要開發小程序，當然需要工具了，前往微信官網下載 微信開發者工具
安裝之後打開，需要通過微信掃二維碼登錄。
掃碼登錄後，選擇 本地小程序項目 ，點擊添加項目，然後填寫相關信息：
AppID: 企業申請後獲得，或受邀參與內測的可以去
微信·公衆平臺裏查看，只是測試用的話，選擇無AppID.依次填寫
項目名稱和項目目錄，在第一次創建項目時，建議勾選在當前目錄中創建 quick start 項目選項。這會幫助創建一個初始的 demo。
第二步：基本配置
進入創建的初始 demo 後，可以看到如下頁面：
點擊編輯後，可以發現右邊目錄結構中有兩個文件夾以及根目錄下的三個文件，三個文件分別爲app.js、app.json、app.wxss,以下分別介紹這三個文件的作用：
app.js
//app.js
App({
onLaunch: function () {
//調用API從本地緩存中獲取數據
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})app.js爲腳本文件，我們可以在app.js中監聽並處理小程序的生命週期函數、聲明全局變量以及調用各類提供的 API。如初始demo中調用登錄接口以及獲取數據。
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}該文件由兩部分組成，我們可以在定義頁面的路徑，也可以在裏面定義一些小程序的窗口背景色，配置導航條樣式，配置默認標題。我們可以發現，這正好對應pages文件中的兩個頁面。如果我們要添加新的頁面，也需要在這裏先申明路徑，“pages”數組中的一個頁面爲小程序的首頁。
注意：app.json中不能添加任何註釋！！！
app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
} app.wxss中定義小程序的公共樣式，這裏申明的樣式我們可以在其他的頁面中直接引用。
第三步：頁面創建
前面介紹過這個初始demo中有兩個頁面，微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中。
每一個小程序頁面是由同路徑下同名的四個不同後綴文件的組成，如：index.js、 index.wxml、index.wxss、index.json。.js 後綴的文件是腳本文件，.json 後綴的文件是配置文件，.wxss 後綴的是樣式表文件，.wxml 後綴的文件是頁面結構文件。下面一次看一下每個文件的內容：
index.wxml
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>index.wxml爲頁面結構，相當於我們寫的.html文件，index.wxml與.html還是存在一些區別。我們發現上述文件中的</view>標籤與.html中的</div>標籤很相似。其他<view/>、<image/>、<text/>標籤的使用與.html中類似。
index.js
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調用應用實例的方法獲取全局數據
app.getUserInfo(function(userInfo){
//更新數據
that.setData({
userInfo:userInfo
})
})
}
})index.js 是頁面的腳本文件，與我們之前的.js文件的功能一樣。在這個文件中我們可以監聽並處理頁面的生命週期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}index.wxss爲頁面的樣式表，類似.css。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。
index.json
頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
第四步：調試
點擊開發框左側的調試進入調試界面：
以下是我們用chrome進行前端開發時的調試界面（以百度爲例）：
天吶~又是驚人的相似，再一次說明了微信小程序開發與web前端開發的關係。調試區域分爲六個部分：Wxml、Console、Sources、Network、Appdata、Storage
Wxml
這裏我們可以看到真實的頁面結構以及結構對應的樣式，同時我們也可是對結構以及樣式進行操作，並實時查看結果：
Console
與通過chrome調試一樣，Console 有兩大功能：開發者可以在此輸入和調試代碼以及當代碼出錯時，錯誤信息會顯示在這裏。
Sources
Sources panel 用於顯示當前項目的腳本文件，同瀏覽器開發不同，微信小程序框架會對腳本文件進行編譯的工作，所以在 Sources panel 中開發者看到的文件是經過處理之後的腳本文件，開發者的代碼都會被包裹在 define 函數中，並且對於 Page 代碼，在尾部會有 require 的主動調用。
Network
用於觀察和顯示 request 和 socket 的請求情況，以及每次請求所花的時間：
Appdata
Appdata 用於顯示當前項目當前時刻 appdata 具體數據，實時地反饋項目數據情況，可以在此處編輯數據，並及時地反饋到界面上。
Storage
Storage 用於顯示當前項目的使用 wx.setStorage 或者 wx.setStorageSync 後的數據存儲情況。
第五步：項目預覽
開發者工具右側的“項目”模塊中包括：當前項目細節、上傳以及項目的一些其他設置。
由於沒有AppID，部分功能無法使用。