微信小程序在無論在功能灼伤、文檔及相關(guān)支持方面，都是優(yōu)于前面幾種微信賬號類型，它提供了很多原生程序才有的接口芬探，使得我們的小程序在很多方面突破H5頁面應(yīng)用的限制，更加接近原生程序的功能厘惦，因此微信小程序具有很大的前景想象力偷仿。它提供了自己的視圖層描述語言WXML和WXSS，以及基于JavaScript的邏輯層框架宵蕉，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)酝静，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
1羡玛、小程序的目錄結(jié)構(gòu)
小程序的目錄結(jié)構(gòu)如下所示别智。
其中項目級別的的文件包括app.js、app.json稼稿、app.wxss這三個薄榛。其中.js后綴的是腳本文件，.json后綴的文件是配置文件渺杉，.wxss后綴的是樣式表文件蛇数。
頁面級別可以包含很多個頁面，如index是越，detail等頁面耳舅，每個頁面都包含.js，.json，.wxml浦徊，.wxss這些文件馏予，其中.wxml為頁面視圖文件，是自定義標(biāo)簽的HTML頁面盔性。
app.js是小程序的腳本代碼霞丧。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量冕香，可以調(diào)用框架提供的豐富的API蛹尝。
app.json是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成悉尾，配置小程序的窗口?背景色突那，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題构眯。
app.wxss是整個小程序的公共樣式表愕难。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則。
一個小程序主體部分由三個文件組成惫霸，必須放在項目的根目錄猫缭。
微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個頁面是小程序的首頁壹店。
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成猜丹，如：index.js、index.wxml茫打、index.wxss居触、index.json。.js后綴的文件是腳本文件老赤，.json后綴的文件是配置文件轮洋，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件抬旺。
index.json是頁面的配置文件：頁面的配置文件是非必要的弊予。當(dāng)有頁面的配置文件時，配置項在該頁面會覆蓋app.json的window中相同的配置項开财。如果沒有指定的頁面配置文件汉柒，則在該頁面直接使用app.json中的默認(rèn)配置。
邏輯層(App Service)
小程序開發(fā)框架的邏輯層是由JavaScript編寫责鳍。
邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層碾褂，同時接受視圖層的事件反饋。在JavaScript的基礎(chǔ)上历葛，我們做了一些修改正塌，以方便地開發(fā)小程序。
增加App和Page方法，進行程序和頁面的注冊乓诽。
增加getApp和getCurrentPages方法帜羊，分別用來獲取App實例和當(dāng)前頁面棧。
提供豐富的API鸠天，如微信用戶數(shù)據(jù)讼育，掃一掃，支付等微信特有能力稠集。
每個頁面有獨立的作用域奶段，并提供模塊化能力。
由于框架并非運行在瀏覽器中巍杈，所以JavaScript在web中一些能力都無法使用忧饭，如document，window等筷畦。
開發(fā)者寫的所有代碼最終將會打包成一份JavaScript，并在小程序啟動的時候運行刺洒，直到小程序銷毀鳖宾。類似ServiceWorker，所以邏輯層也稱之為App Service逆航。
視圖層
框架的視圖層由WXML與WXSS編寫鼎文，由組件來進行展示。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖因俐，同時將視圖層的事件發(fā)送給邏輯層拇惋。
WXML(WeiXin Markup language)用于描述頁面的結(jié)構(gòu)。
WXSS(WeiXin Style Sheet)用于描述頁面的樣式抹剩。
組件(Component)是視圖的基本組成單元撑帖。
基礎(chǔ)組件
框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進行快速開發(fā)澳眷。
什么是組件：
組件是視圖層的基本組成單元胡嘿。
組件自帶一些功能與微信風(fēng)格的樣式。
一個組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽钳踊，屬性用來修飾這個組件衷敌，內(nèi)容在兩個標(biāo)簽之內(nèi)。
Content goes here ...
注意：所有組件與屬性都是小寫拓瞪，以連字符-連接
API
框架提供豐富的微信原生API缴罗，可以方便的調(diào)起微信提供的能力，如獲取用戶信息祭埂，本地存儲面氓，支付功能等。
說明：
wx.on開頭的API是監(jiān)聽某個事件發(fā)生的API接口，接受一個CALLBACK函數(shù)作為參數(shù)侧但。當(dāng)該事件觸發(fā)時矢空，會調(diào)用CALLBACK函數(shù)。
如未特殊約定禀横，其他API接口都接受一個OBJECT作為參數(shù)屁药。
OBJECT中可以指定success,?fail,?complete來接收接口調(diào)用結(jié)果。
參數(shù)名
類型
必填
說明
success
Function
否
接口調(diào)用成功的回調(diào)函數(shù)
fail
Function
否
接口調(diào)用失敗的回調(diào)函數(shù)
complete
Function
否
接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功柏锄、失敗都會執(zhí)行）
2酿箭、小程序接口功能列表
框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力趾娃，如獲取用戶信息缭嫡，本地存儲，支付功能等抬闷。
1）網(wǎng)絡(luò)API列表：
wx.request發(fā)起網(wǎng)絡(luò)請求
wx.uploadFile上傳文件
wx.downloadFile下載文件
wx.connectSocket創(chuàng)建WebSocket連接
wx.onSocketOpen監(jiān)聽WebSocket打開
wx.onSocketError監(jiān)聽WebSocket錯誤
wx.sendSocketMessage發(fā)送WebSocket消息
wx.onSocketMessage接受WebSocket消息
wx.closeSocket關(guān)閉WebSocket連接
wx.onSocketClose監(jiān)聽WebSocket關(guān)閉
2）媒體API列表：
wx.chooseImage從相冊選擇圖片妇蛀，或者拍照
wx.previewImage預(yù)覽圖片
wx.startRecord開始錄音
wx.stopRecord結(jié)束錄音
wx.playVoice播放語音
wx.pauseVoice暫停播放語音
wx.stopVoice結(jié)束播放語音
wx.getBackgroundAudioPlayerState獲取音樂播放狀態(tài)
wx.playBackgroundAudio播放音樂
wx.pauseBackgroundAudio暫停播放音樂
wx.seekBackgroundAudio控制音樂播放進度
wx.stopBackgroundAudio停止播放音樂
wx.onBackgroundAudioPlay監(jiān)聽音樂開始播放
wx.onBackgroundAudioPause監(jiān)聽音樂暫停
wx.onBackgroundAudioStop監(jiān)聽音樂結(jié)束
wx.chooseVideo從相冊選擇視頻，或者拍攝
3）文件API列表：
wx.saveFile保存文件
wx.getSavedFileList獲取已保存的文件列表
wx.getSavedFileInfo獲取已保存的文件信息
wx.removeSavedFile刪除已保存的文件信息
wx.openDocument打開文件
4）數(shù)據(jù)API列表：
wx.getStorage獲取本地數(shù)據(jù)緩存
wx.getStorageSync獲取本地數(shù)據(jù)緩存
wx.setStorage設(shè)置本地數(shù)據(jù)緩存
wx.setStorageSync設(shè)置本地數(shù)據(jù)緩存
wx.getStorageInfo獲取本地緩存的相關(guān)信息
wx.getStorageInfoSync獲取本地緩存的相關(guān)信息
wx.removeStorage刪除本地緩存內(nèi)容
wx.removeStorageSync刪除本地緩存內(nèi)容
wx.clearStorage清理本地數(shù)據(jù)緩存
wx.clearStorageSync清理本地數(shù)據(jù)緩存
5）位置API列表：
wx.getLocation獲取當(dāng)前位置
wx.chooseLocation打開地圖選擇位置
wx.openLocation打開內(nèi)置地圖
wx.createMapContext地圖組件控制
6）設(shè)備API列表：
wx.getNetworkType獲取網(wǎng)絡(luò)類型
wx.onNetworkStatusChange監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化
wx.getSystemInfo獲取系統(tǒng)信息
wx.getSystemInfoSync獲取系統(tǒng)信息
wx.onAccelerometerChange監(jiān)聽加速度數(shù)據(jù)
wx.startAccelerometer開始監(jiān)聽加速度數(shù)據(jù)
wx.stopAccelerometer停止監(jiān)聽加速度數(shù)據(jù)
wx.onCompassChange監(jiān)聽羅盤數(shù)據(jù)
wx.startCompass開始監(jiān)聽羅盤數(shù)據(jù)
wx.stopCompass停止監(jiā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)前頁面標(biāo)題
wx.showNavigationBarLoading顯示導(dǎo)航條加載動畫
wx.hideNavigationBarLoading隱藏導(dǎo)航條加載動畫
wx.navigateTo新窗口打開頁面
wx.redirectTo原窗口打開頁面
wx.switchTab切換到tabbar頁面
wx.navigateBack退回上一個頁面
wx.createAnimation動畫
wx.createContext創(chuàng)建繪圖上下文
wx.drawCanvas繪圖
wx.stopPullDownRefresh停止下拉刷新動畫
8）WXML節(jié)點信息API列表：
wx.createSelectorQuery創(chuàng)建查詢請求
selectorQuery.select根據(jù)選擇器選擇單個節(jié)點
selectorQuery.selectAll根據(jù)選擇器選擇全部節(jié)點
selectorQuery.selectViewport選擇顯示區(qū)域
nodesRef.boundingClientRect獲取布局位置和尺寸
nodesRef.scrollOffset獲取滾動位置
nodesRef.fields獲取任意字段
selectorQuery.exec執(zhí)行查詢請求
9）開放接口：
wx.login登錄
wx.getUserInfo獲取用戶信息
wx.chooseAddress獲取用戶收貨地址
wx.requestPayment發(fā)起微信支付
wx.addCard添加卡券
wx.openCard打開卡券
3笤成、相關(guān)處理代碼
1）注冊程序處理代碼
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）注冊頁面處理代碼
//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ù)請求處理代碼
//點擊搜索按鈕調(diào)用的函數(shù)? ? ? search:function(e){
var that = this;
//數(shù)據(jù)加載完成之前，顯示加載中提示框? ? ? ? wx.showToast({
title: '加載中炕泳。纵诞。。',
icon: 'loading',
duration: 10000
});
//發(fā)起請求培遵，注意 wx.request發(fā)起的是 HTTPS 請求? ? ? ? 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ā)送到視圖層浙芙，同時改變對應(yīng)的 this.data 的值? ? ? ? ? ? that.setData({
restation: data.result,
condition: false
});
//數(shù)據(jù)加載成功后隱藏加載中彈框? ? ? ? ? ? wx.hideToast();
}
})
}
