微信小程序在無(wú)論在功能、文檔及相關(guān)支持方面，都是優(yōu)于前面幾種微信賬號(hào)類型，它提供了很多原生程序才有的接口，使得我們的小程序在很多方面突破H5頁(yè)面應(yīng)用的限制，更加接近原生程序的功能，因此微信小程序具有很大的前景想象力。它提供了自己的視圖層描述語(yǔ)言WXML和WXSS，以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
1、小程序的目錄結(jié)構(gòu)
小程序的目錄結(jié)構(gòu)如下所示。
其中項(xiàng)目級(jí)別的的文件包括app.js、app.json、app.wxss這三個(gè)。其中.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。
頁(yè)面級(jí)別可以包含很多個(gè)頁(yè)面，如index，detail等頁(yè)面，每個(gè)頁(yè)面都包含.js，.json，.wxml，.wxss這些文件，其中.wxml為頁(yè)面視圖文件，是自定義標(biāo)簽的HTML頁(yè)面。
app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量，可以調(diào)用框架提供的豐富的API。
app.json是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口?背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。
app.wxss是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則。
一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目的根目錄。
微信小程序中的每一個(gè)頁(yè)面的【路徑+頁(yè)面名】都需要寫(xiě)在app.json的pages中，且pages中的第一個(gè)頁(yè)面是小程序的首頁(yè)。
每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。
index.json是頁(yè)面的配置文件：頁(yè)面的配置文件是非必要的。當(dāng)有頁(yè)面的配置文件時(shí)，配置項(xiàng)在該頁(yè)面會(huì)覆蓋app.json的window中相同的配置項(xiàng)。如果沒(méi)有指定的頁(yè)面配置文件，則在該頁(yè)面直接使用app.json中的默認(rèn)配置。
邏輯層(App Service)
小程序開(kāi)發(fā)框架的邏輯層是由JavaScript編寫(xiě)。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。在JavaScript的基礎(chǔ)上，我們做了一些修改，以方便地開(kāi)發(fā)小程序。
增加App和Page方法，進(jìn)行程序和頁(yè)面的注冊(cè)。
增加getApp和getCurrentPages方法，分別用來(lái)獲取App實(shí)例和當(dāng)前頁(yè)面棧。
提供豐富的API，如微信用戶數(shù)據(jù)，掃一掃，支付等微信特有能力。
每個(gè)頁(yè)面有獨(dú)立的作用域，并提供模塊化能力。
由于框架并非運(yùn)行在瀏覽器中，所以JavaScript在web中一些能力都無(wú)法使用，如document，window等。
開(kāi)發(fā)者寫(xiě)的所有代碼最終將會(huì)打包成一份JavaScript，并在小程序啟動(dòng)的時(shí)候運(yùn)行，直到小程序銷毀。類似ServiceWorker，所以邏輯層也稱之為App Service。
視圖層
框架的視圖層由WXML與WXSS編寫(xiě)，由組件來(lái)進(jìn)行展示。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。
WXML(WeiXin Markup language)用于描述頁(yè)面的結(jié)構(gòu)。
WXSS(WeiXin Style Sheet)用于描述頁(yè)面的樣式。
組件(Component)是視圖的基本組成單元。
基礎(chǔ)組件
框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。
什么是組件：
組件是視圖層的基本組成單元。
組件自帶一些功能與微信風(fēng)格的樣式。
一個(gè)組件通常包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。
Content goes here ...
注意：所有組件與屬性都是小寫(xiě)，以連字符-連接
API
框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等。
說(shuō)明：
wx.on開(kāi)頭的API是監(jiān)聽(tīng)某個(gè)事件發(fā)生的API接口，接受一個(gè)CALLBACK函數(shù)作為參數(shù)。當(dāng)該事件觸發(fā)時(shí)，會(huì)調(diào)用CALLBACK函數(shù)。
如未特殊約定，其他API接口都接受一個(gè)OBJECT作為參數(shù)。
OBJECT中可以指定success,?fail,?complete來(lái)接收接口調(diào)用結(jié)果。
參數(shù)名
類型
必填
說(shuō)明
success
Function
否
接口調(diào)用成功的回調(diào)函數(shù)
fail
Function
否
接口調(diào)用失敗的回調(diào)函數(shù)
complete
Function
否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
2、小程序接口功能列表
框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等。
1）網(wǎng)絡(luò)API列表：
wx.request發(fā)起網(wǎng)絡(luò)請(qǐng)求
wx.uploadFile上傳文件
wx.downloadFile下載文件
wx.connectSocket創(chuàng)建WebSocket連接
wx.onSocketOpen監(jiān)聽(tīng)WebSocket打開(kāi)
wx.onSocketError監(jiān)聽(tīng)WebSocket錯(cuò)誤
wx.sendSocketMessage發(fā)送WebSocket消息
wx.onSocketMessage接受WebSocket消息
wx.closeSocket關(guān)閉WebSocket連接
wx.onSocketClose監(jiān)聽(tīng)WebSocket關(guān)閉
2）媒體API列表：
wx.chooseImage從相冊(cè)選擇圖片，或者拍照
wx.previewImage預(yù)覽圖片
wx.startRecord開(kāi)始錄音
wx.stopRecord結(jié)束錄音
wx.playVoice播放語(yǔ)音
wx.pauseVoice暫停播放語(yǔ)音
wx.stopVoice結(jié)束播放語(yǔ)音
wx.getBackgroundAudioPlayerState獲取音樂(lè)播放狀態(tài)
wx.playBackgroundAudio播放音樂(lè)
wx.pauseBackgroundAudio暫停播放音樂(lè)
wx.seekBackgroundAudio控制音樂(lè)播放進(jìn)度
wx.stopBackgroundAudio停止播放音樂(lè)
wx.onBackgroundAudioPlay監(jiān)聽(tīng)音樂(lè)開(kāi)始播放
wx.onBackgroundAudioPause監(jiān)聽(tīng)音樂(lè)暫停
wx.onBackgroundAudioStop監(jiān)聽(tīng)音樂(lè)結(jié)束
wx.chooseVideo從相冊(cè)選擇視頻，或者拍攝
3）文件API列表：
wx.saveFile保存文件
wx.getSavedFileList獲取已保存的文件列表
wx.getSavedFileInfo獲取已保存的文件信息
wx.removeSavedFile刪除已保存的文件信息
wx.openDocument打開(kāi)文件
4）數(shù)據(jù)API列表：
wx.getStorage獲取本地?cái)?shù)據(jù)緩存
wx.getStorageSync獲取本地?cái)?shù)據(jù)緩存
wx.setStorage設(shè)置本地?cái)?shù)據(jù)緩存
wx.setStorageSync設(shè)置本地?cái)?shù)據(jù)緩存
wx.getStorageInfo獲取本地緩存的相關(guān)信息
wx.getStorageInfoSync獲取本地緩存的相關(guān)信息
wx.removeStorage刪除本地緩存內(nèi)容
wx.removeStorageSync刪除本地緩存內(nèi)容
wx.clearStorage清理本地?cái)?shù)據(jù)緩存
wx.clearStorageSync清理本地?cái)?shù)據(jù)緩存
5）位置API列表：
wx.getLocation獲取當(dāng)前位置
wx.chooseLocation打開(kāi)地圖選擇位置
wx.openLocation打開(kāi)內(nèi)置地圖
wx.createMapContext地圖組件控制
6）設(shè)備API列表：
wx.getNetworkType獲取網(wǎng)絡(luò)類型
wx.onNetworkStatusChange監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)變化
wx.getSystemInfo獲取系統(tǒng)信息
wx.getSystemInfoSync獲取系統(tǒng)信息
wx.onAccelerometerChange監(jiān)聽(tīng)加速度數(shù)據(jù)
wx.startAccelerometer開(kāi)始監(jiān)聽(tīng)加速度數(shù)據(jù)
wx.stopAccelerometer停止監(jiān)聽(tīng)加速度數(shù)據(jù)
wx.onCompassChange監(jiān)聽(tīng)羅盤(pán)數(shù)據(jù)
wx.startCompass開(kāi)始監(jiān)聽(tīng)羅盤(pán)數(shù)據(jù)
wx.stopCompass停止監(jiān)聽(tīng)羅盤(pán)數(shù)據(jù)
wx.setClipboardData設(shè)置剪貼板內(nèi)容
wx.getClipboardData獲取剪貼板內(nèi)容
wx.makePhoneCall撥打電話
wx.scanCode掃碼
7）界面API列表：
wx.showToast顯示提示框
wx.showLoading顯示加載提示框
wx.hideToast隱藏提示框
wx.hideLoading隱藏提示框
wx.showModal顯示模態(tài)彈窗
wx.showActionSheet顯示菜單列表
wx.setNavigationBarTitle設(shè)置當(dāng)前頁(yè)面標(biāo)題
wx.showNavigationBarLoading顯示導(dǎo)航條加載動(dòng)畫(huà)
wx.hideNavigationBarLoading隱藏導(dǎo)航條加載動(dòng)畫(huà)
wx.navigateTo新窗口打開(kāi)頁(yè)面
wx.redirectTo原窗口打開(kāi)頁(yè)面
wx.switchTab切換到tabbar頁(yè)面
wx.navigateBack退回上一個(gè)頁(yè)面
wx.createAnimation動(dòng)畫(huà)
wx.createContext創(chuàng)建繪圖上下文
wx.drawCanvas繪圖
wx.stopPullDownRefresh停止下拉刷新動(dòng)畫(huà)
8）WXML節(jié)點(diǎn)信息API列表：
wx.createSelectorQuery創(chuàng)建查詢請(qǐng)求
selectorQuery.select根據(jù)選擇器選擇單個(gè)節(jié)點(diǎn)
selectorQuery.selectAll根據(jù)選擇器選擇全部節(jié)點(diǎn)
selectorQuery.selectViewport選擇顯示區(qū)域
nodesRef.boundingClientRect獲取布局位置和尺寸
nodesRef.scrollOffset獲取滾動(dòng)位置
nodesRef.fields獲取任意字段
selectorQuery.exec執(zhí)行查詢請(qǐng)求
9）開(kāi)放接口：
wx.login登錄
wx.getUserInfo獲取用戶信息
wx.chooseAddress獲取用戶收貨地址
wx.requestPayment發(fā)起微信支付
wx.addCard添加卡券
wx.openCard打開(kāi)卡券
3、相關(guān)處理代碼
1）注冊(cè)程序處理代碼
App({
onLaunch: function(options) {
// Do something initial when launch.? },
onShow: function(options) {
// Do something when show.? },
onHide: function() {
// Do something when hide.? },
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
2）注冊(cè)頁(yè)面處理代碼
//index.jsPage({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.? },
onReady: function() {
// Do something when page ready.? },
onShow: function() {
// Do something when page show.? },
onHide: function() {
// Do something when page hide.? },
onUnload: function() {
// Do something when page close.? },
onPullDownRefresh: function() {
// Do something when pull down.? },
onReachBottom: function() {
// Do something when page reach bottom.? },
onShareAppMessage: function () {
// return custom share data when user share.? },
onPageScroll: function() {
// Do something when page scroll? },
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
3）JS函數(shù)模塊化
// common.jsfunction sayHello(name) {
console.log(`Hello ${name} !`)
}function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要使用這些模塊的文件中，使用require(path)將公共代碼引入
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
4）網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求處理代碼
//點(diǎn)擊搜索按鈕調(diào)用的函數(shù)? ? ? search:function(e){
var that = this;
//數(shù)據(jù)加載完成之前，顯示加載中提示框? ? ? ? wx.showToast({
title: '加載中。。。',
icon: 'loading',
duration: 10000
});
//發(fā)起請(qǐng)求，注意 wx.request發(fā)起的是 HTTPS 請(qǐng)求? ? ? ? wx.request({
url: url + "?city=" + that.data.inputValue + "&key=" + apiKey,
data: {},
header: {
'content-type': 'application/json'
},
success: function(res) {
var data = res.data;
//將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的 this.data 的值? ? ? ? ? ? that.setData({
restation: data.result,
condition: false
});
//數(shù)據(jù)加載成功后隱藏加載中彈框? ? ? ? ? ? wx.hideToast();
}
})
}
