微信小程序已經火了很長一段時間，它依賴於強大的微信為載體，不需要下載、安裝即可使用的應用。微信小程序只需用戶掃一掃或者搜一下即可打開應用，用戶不用關心安裝太多應用的問題，應用隨處可用，但又無須安裝卸載。
微信小程序和 React 有很多相同的地方，它是基於微信平臺的H5應用，微信將系統底層功能（設備、位置、媒體、文件等）和微信自身功能（登錄、支付、分享等）封裝成相應 API 供小程序調用。
這裡我們以一個簡單的 DEMO 為例，來介紹一下微信小程序開發流程。
開發工具
為了幫助開發者簡單和高效地開發和調試微信小程序，微信官方推出了全新的微信開發者工具，集成了公眾號網頁調試和小程序調試兩種開發模式。
- 使用公眾號網頁調試，開發者可用調試微信網頁授權和微信 JS_SDK
- 使用小程序調試，開發者可用完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發佈等功能。
工具的主界面如下：
下載地址：
Windows 64位版本：
https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki
Windows 32位版本：
https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki
首先，我們需要註冊一個微信小程序賬戶，登錄 https://mp.weixin.qq.com，就可以在網站的【設置】-【開發設置】中，獲取到微信小程序的 AppID 了。
創建項目
安裝好微信開發者工具，打開並使用微信掃描登錄。選擇小程序項目，填入上文獲取到的 AppID，設置一個本地項目的名稱（注意此名稱不是小程序名稱），比如我的第一個微信小程序，並選擇一個本地的文件夾作為代碼存儲的目錄，點擊確定就可以。
項目創建成功後，進入並看到完整的開發者工具界面，最左面是效果預覽圖，右側可以查看和編輯我們的代碼，在調試裡可以測試代碼並模擬小程序在微信客戶端效果。
編寫小程序
Demo 初始化幷包含理論一些簡單的代碼文件，其中 app.js、app.json、app.wxss 這三個是必不可少的，小程序會讀取這些文件初始實例。
- app.js 是小程序的初始化腳本，可以在這個文件中監聽小程序的生命週期，申請全局變量和調用 API 等。
- app.json 是對小程序的全局配置，pages 設置頁面路徑組成（默認第一條為首頁）, window 設置默認頁面的窗口表現等。
- app.wxss 是整個小程序的公共樣式表（類似網站開發中的 common.css）。
創建頁面
在這個 Demo 裡面，我們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動日誌的展示頁，他們都在 pages 目錄下，微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。
每一個小程序頁面是由同路徑下同名的四個不同後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。js 後綴的文件是腳本文件，.json 後綴的文件是配置文件，.wxss 後綴的是樣式表文件，.wxml 後綴的文件是頁面結構文件。
index.wxml 是頁面的結構文件：
{{userInfo.nickName}}
{{motto}}
本例中使用了 、、 來搭建頁面結構，綁定數據和交互處理函數。
index.js 是頁面的腳本文件，在這個文件中我們可以監聽並處理頁面的生命週期、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
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;
}
頁面的樣式表示非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。
index.json 是頁面的配置文件：
頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
logs 的頁面結構
{{index + 1}}. {{log}}
logs 頁面使用 控制標籤來組織代碼，在 上使用 wx:for-items 綁定 logs 數據，並將 logs 數據循環展開節點
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log))
})
})
}
})
運行結果如下：
手機預覽
在開發者工具菜單欄點擊【工具】-【預覽】，掃碼後即可在微信客戶端中體驗。
閱讀更多 領釦網 的文章
