微信小程序作為微信生態重要的一環，在實際生活、工作、商業中的應用越來越廣泛。想學習微信小程序開發的朋友也越來越多，本文將在小程序框架的基礎上就微信小程序項目開發所必需的基礎知識及語法特點進行了詳細總結和闡述，包括配置、函數、語法、事件及其處理、數據綁定、模塊、樣式等。想開發小程序，這些內容是必須掌握的。
全文知識結構預覽：
一、程序配置：
1、全局配置；2、頁面配置
二、邏輯層：
1、程序注冊：App()方法；2、頁面注冊：Page()方法；3、模塊與調用；4、微信原生API
三、視圖層（將在單獨文章中闡述）
一、程序配置
1、全局配置
先來看一個典型的全局配置app.jason文件內容：
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "navigationBarTitleText":"Demo", "navigationBarTextStyle": "black" }, "tabBar":{ "list":[{ "pagePath":"pages/index/index", "text":"首頁" },{ "pagePath":"pages/logs/logs", "text":"日志" }] }, "networkTimeout":{ "request":10000, "downloadFile":"10000" }, "debug":true }
如上所示，小程序的全局配置是保存在app.jason文件中的。
從文件內容可以看出小程序的全局配置局並不多，包括頁面路徑（page）、窗口表現（window）、切換頁簽（tabBar）、網絡超時設定（networkTimeout）、調試模式（debug）。而且並不是每一項配置都是必需的。
在詳細介紹每一個配置項之前，先說一下小程序里JSON配置的一些注意事項。
JSON文件都是被包裹在一個大括號中 {}，通過key-value的方式來表達數據。JSON的Key必須包裹在一個“雙引號”中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。
JSON的值只能是以下幾種數據格式，其他任何格式都會觸發報錯，例如 JavaScript 中的 undefined。
- 數字，包含浮點數和整數
- 字符串，需要包裹在雙引號中
- Bool值，true 或者 false
- 數組，需要包裹在方括號中 []
- 對象，需要包裹在大括號中 {}
- Null
還需要注意的是 JSON 文件中無法使用注釋，試圖添加注釋將會引發報錯。
下面我們詳細說明一下app.jason中每個配置項的類型及注意事件：
1.1 pages配置項
pages是程序必需的配置項。pages接受一個數組（Array），用來指定小程序由哪些頁面組成。數組的每一項都是字符串類型，代表對應頁面的“路徑+文件名”。
pages配置時需要注意以下三點：
a）數組第一項即小程序的啟動頁，即首頁；
b）小程序新增或減少頁面，都需要修改pages數組；
c）文件名不需要加后綴，如"pages/index/index"，小程序框架會自動尋找路徑下的四類文件（.js/.jason/.wxml/.wxss）進行整合。
1.2 window配置項
window不是必需的配置項。沒有配置時系統將采用默認值。window接受對象值（Object），用來設置小程序的狀態欄、導航欄、標題、窗口等對象的顏色、背景、內容屬性。
window的可配置的對象及其描述如下：
a）navigationBarBackgroundColor，設置導航欄背景顏色，value類型HexColor，默認值#000000；
b）navigationBarTextStyle，設置導航欄標題顏色，value類型String，僅支持black或white；
c）navigationBarTitleText，設置導航欄標題文字內容，value類型String；
d）backgroundColor，設置窗口的背景色，value類型HexColor，默認值#ffffff；
e）backgroundTextStyle，下拉背景字體、loading圖的樣式，value類型String，僅支持dark/light；
f）ebablePullDownRefresh，是否開啟下拉刷新，value類型Boolean，默認值false。
示例：我們在app.jason中設置如下的window配置：
"window": { "navigationBarBackgroundColor": "#405f80", "navigationBarTextStyle": "white", "navigationBarTitleText": "光與影", "backgroundColor":"#eeeeee", "backgroundTextStyle":"light" }
則小程序產生的界面效果如圖：
1.3 tabBar配置項
tabBar配置項可以實現小程序多頁簽切換的功能。tabBar用來指定標簽頁的樣式以及切換時對應的頁面。
tabBar配置項及其說明：
a）color，設置標簽上的文字默認顏色，value類型HexColor，必填項；
b）selectedColor，設置標簽上的文字選中時的顏色，value類型HexColor，必填項；
c）backgroundColor，標簽頁的背景色，value類型HexColor，必填項；
d）boderStyle，標簽的框線顏色，value類型String，默認值black，僅支持black或white，選填；
e）position，標簽欄的位置，value類型String，默認值bottom，可選值bottom或top，選填；
f）list，標簽頁列表，value類型Array，支持最少2個、最多5個標簽頁。
需要注意的是，list接受的是一個數組值，數組元素的順序就是標簽頁顯示的順序，數組中的每一項也都是一個對象，其類型、功能描述如下（均是必填項）：
a）pagePath，頁面路徑，需要在pages中預定義，value類型String；
b）text，標簽上按鈕文字，value類型String；
c）iconPath，標簽上icon圖標路徑，圖標大小不能超過40KB，value類型String；
d）selectedIconPath，標簽被選中時顯示的icon圖標路徑，圖標大小不能超過40KB，value類型String；
下面的示例設置了2個標簽頁“閱讀”和“電影”，代碼如下：
"tabBar": { "color":"#dddddd", "selectedColor":"#3cc51f", "borderStyle": "white", "backgroundColor":"#ffffff", "list": [ { "pagePath": "pages/posts/post", "text": "閱讀", "iconPath": "/images/tab/yuedu.png", "selectedIconPath": "/images/tab/yuedu_hl.png" }, { "pagePath": "pages/movies/movies", "text": "電影", "iconPath": "/images/tab/dianying.png", "selectedIconPath": "/images/tab/dianying_hl.png" } ] }
界面的實際效果如下圖所示：
1.4 networkTimeout配置項
networkTimeout用於設置各種網絡請求對象的超時時間，非必須配置項。可以設置網絡請求超時的相關對象有request、connectSocket、uploadFile、downloadFile。時間單位均為毫秒。當然，這些超時若沒有設置， 則默認使用操作系統內核或遵循服務器WebServer的設定值。
1.5 debug配置項
debug配置項用於是否開啟開發者工具的調試模式。它的value類型是一個boolean值，默認是false。開啟后，頁面page的注冊、頁面路由、數據更新、事件觸發等調試信息將以info的形式，輸出在調試功能的console面板上。開啟配置如下：
{ "debug":true }
顯然開啟后調試模式后，對開發者快速定位一些常見問題很有幫助，但在正式發布時應當關閉此配置項開關。
2、頁面配置
小程序中的頁面配置page.jason，只能設置本頁面的窗口表現，也就是只能設置window配置項的內容。頁面.jason文件中的window配置值將覆蓋app.jason中的配置值。
因為頁面.jason文件中只能設置window配置項，以決定本頁面的窗口表現，所以文件中也無需寫window這個鍵值，直接寫window下的可配置項即可。window的可配置項已在本文（1.2）小節中說明。
二、邏輯層
關於小程序邏輯層的概念和特點，在微信小程序開發框架（MINA）中已做闡述，此處不再贅述。
1、注冊程序的App()方法
先來看一下App()方法的代碼示例：
App({ onLaunch:function(){ //程序啟動時執行的初始化操作 }, onShow:function(){ //程序進入前台時執行的操作 }, onHide:function(){ //程序進入后台時執行的操作 }, onError:function(msg){ console.log(msg) }, globalData:'This is global data' })
PS:前台、后台：用戶操作小程序的當前界面稱之為前台，當點擊關閉或按HOME鍵離開微信，小程序並沒有直接銷毀，而是進入后台；當再次進入微信或再次打開小程序，又會從后台進入前台了。
App()方法用來注冊一個程序，且只能注冊一次，存在於app.js中。它接受的參數是object類型：
a）onLaunch，生命周期函數，監聽小程序初始化，當小程序初始化完成時，會觸發onLaunch，且全局只觸發一次；
b）onShow，生命周期函數，監聽小程序顯示，小程序啟動或從后台進入前台顯示，會觸發onShow；
c）onHide，生命周期函數，監聽小程序隱藏，小程序從前台進入后台會觸發onHide；
d）onError，錯誤監聽函數，小程序發生腳本錯誤或API調用失敗，會觸發onError並帶出錯誤信息；
e）開發者還可以添加任意object類型的參數，用this訪問；
可以使用全局函數getApp()獲取小程序實例。使用示例如下：
//**.js var app = getApp() console.log(app.globalData) //輸出'This is global data'
但是在App()函數中不要使用getApp()，使用this就可以拿到App()實例。
2、注冊頁面的page()方法
先來看一下page()方法的代碼示例：
Page({ data：{ text:"This is page data." }, onLoad:function(){ //頁面加載時執行的初始化操作 }, onReady:function(){ //頁面初次渲染時執行的操作 }, onShow:function(){ //頁面顯示時執行的操作 }, onHide:function(){ //頁面隱藏時執行的操作 }, onUnload:function(){ //頁面卸載或關閉時執行的操作 }, onPullDownRefresh:function(){ //頁面被用戶下拉時執行的操作 }, onReachBottom:function(){ //頁面到達底部時執行的操作 }, onShareAppMessage:function(){ //用戶分享時返回個性化的分享數據 }, //響應wxml綁定事件處理 viewTap:function(){ this.setData({ text:'Set some data for update view' }) } })
page()方法用來注冊一個頁面。它接受object類型參數，用來指定頁面的初始數據、生命周期函數、事件處理函數等。每個頁面有且僅有一個page()方法，存在於該頁面的.js文件中。
2.1 初始化數據
data參數提供頁面的初始化數據，作為頁面的第一次渲染。對象 data 將會以 JASON 的形式由邏輯層傳至視圖層，所以其數據必須是可以轉成 JASON 的格式：字符串、數字、布爾值、對象、數組。
在視圖層通過WXML對數據進行綁定。示例代碼如下：
<!--wxml--> //渲染page()的數據 <view>{{text}}</view>
2.2 頁面生命周期函數
頁面的生命周期包括：onLoad、onShow、onReady、onHide、onUnload。
onLoad是頁面加載時執行的初始化操作。一個頁面只會調用一次，參數可以獲取wx.navigationTo和wx.redirectTo及<navigator />中的query。
onShow是頁面顯示時執行的操作。每次打開頁面都會調用一次。
onReady是頁面渲染完成時執行的操作。一個頁面只會調用一次，代表頁面已經准備妥當，可以和視圖層進行交互。對頁面的設置（如wx.setNavigationBarTitle）應該在onReady之后。
onHide是頁面隱藏時執行的操作。當進行 navigateTo 或底部進行 tab 切換時調用。
onUnload是頁面卸載時執行的操作。當進行 redirectTo 或 navigateBack 操作時調用。
2.3 頁面相關事件處理函數
onPullDownRefresh是下拉刷新時執行的操作，監聽用戶下拉刷新事件。需要在頁面 .json 文件的window配置項中開啟enablePullDownRefresh。當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
onShareAppMessage是用戶分享時返回定制的分享內容。只有定義了此事件處理函數，右上角菜單才會顯示“分享”按鈕。用戶點擊分享按鈕的時候會調用。此事件需要return一個object對象，用於自定義分享內容。
title 是分享的標題，默認值是當前小程序的名稱。
path 是分享路徑，當前頁面的 path，必須是以 / 開頭的完整路徑。
onShareMessage示例代碼如下：
page({ onShareMessage:function(){ return{ title:'分享標題', path:'/page/url?id=5' } } })
2.4 視圖層綁定的事件處理函數
page()方法除了初始化數據和生命周期函數，還可以定義一些特殊的事件處理函數。我們可以在視圖層通過對組件加入事件綁定，當滿足觸發事件時，就會執行page()中定義的事件處理函數。
示例代碼如下：
<!--wxml 綁定tap事件到view組件上，函數名為viewTap--> <view bindtap = "viewTap"> click me </view> //page.js page({ //定義 viewTap 事件處理函數 viewTap:function(){ console.log('view tap') } })
2.5 頁面數據設置與展現
在page()中我們使用setData函數來設置數據。改變對應的this.data的值。
this是指包含它的函數作為方法被調用時所屬的對象，在小程序中一般指調用頁面。
不能直接修改this.data，這樣無法改變頁面的狀態，還會造成數據不一致。
盡量避免一次設置過多的數據，單次不能超過1024KB。
setData函數參數是對象類型。以key、value的形式表示，將this.data中的key對應的值改變成value。其中key無須在this.data中預定義。
示例代碼如下：
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap = "changeText">Change normal data</button>
<view>{{array[0].text}}</view>
<button bindtap = "changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap = "changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap = "addNewField">Add new data</button>
//index.js
page({
data:{
texe:'init data',
array:[{text:'init data'}],
object:{
text:'init data'
}
},
changeText:function(){
//this.data.text = 'changed data'錯誤設置方法
this.setData({
text:'changed data'
})
},
changeItemInArray:function(){
//注意修改的key是數據路徑的形式（有引號）
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject:function(){
//注意修改的key是數據路徑的形式（有引號）
this.setData({
'object.text':'changed data'
})
},
addNewField:function(){
//注意添加的key是數據路徑的形式（有引號）
this.setData({
'newField.text':'new data'
})
}
})
實際效果示例：
2.6 頁面棧及其實例獲取
框架以棧的形式維護了程序的所有頁面。當發生頁面切換的時候，頁面棧的表現如下：
| 路由方式 | 頁面棧表現 |
| 初始化 | 新頁面入棧。 |
| 打開新頁面 | 新頁面入棧。 |
| 頁面重定向 | 當前頁面出棧，新頁面入棧。 |
| 頁面返回 | 頁面不斷出棧，直到目標返回，新頁面入棧。 |
| Tab 切換 | 當前頁面出棧，新頁面入棧。 |
框架提供了獲取當前頁面棧實例的方法getCurrentPages()，頁面以數組形式按棧的形式給出，第一個元素為首頁，最后一個元素為當前頁面。不要嘗試修改頁面棧，會導致路由及頁面狀態錯誤。
2.7 頁面路由
小程序框架管理所有頁面的路由。路由的觸發方式以及頁面的生命周期函數對應關系如下：
| 路由方式 | 觸發時機 | 路由后頁面 | 路由前頁面 |
| 初始化 | 小程序打開的第一個頁面 | onLoad，onShow | |
| 打開新頁面 | 調用API wx.navigateTo 或 使用組件<navigator open-type="navigator"/> |
onLoad，onShow | onHide |
| 頁面重定向 | 調用API wx.navigateTo 或 使用組件<navigator open-type="navigator"/> |
onLoad，onShow | onUnload |
| 頁面返回 | 調用API wx.navigateTo 或 用戶按左上角返回按鈕 |
onShow | onUnload |
| Tab 切換 | 調用API wx.switchTab 或使用組件<navigator open-type="switchTab"/> 或多 Tab 模式下用戶切換Tab |
第一次打開 onLoad，onShow； 否則 onShow |
onHide |
3、模塊化與調用
3.1 文件作用域
在頁面的JavaScript腳本文件（.js）中聲明的變量和函數只在該文件中有效，不同的文件中可以聲明相同名字的變量和函數，不會互相影響。
通過全局函數getApp()可以獲取全局的應用實例，如果需要全局的數據可以在App()方法中設置，例如：
//app.js App（{ globalData:1 }） //a.js //在a.js中定義變量localValue var localValue = 'a' //在a.js中獲取App實例 var app = getApp() //修改a.js中獲取到的全局數據值 app.globalData++ //b.js //在b.js中定義變量localValue，不影響a.js中的localValue var localValue = 'b' //假設a.js在b.js之前運行，那么下面的語句之后globalData就會是2 console.log(getApp().globalData)
3.2 模塊化
我們可以將一些公共的代碼抽離成為一個單獨的.js腳本文件，作為一個模塊。
模塊只有通過 module.exports 才能對外暴露接口以供其他.js文件引入使用。在需要使用公共模塊的.js文件中，使用 require(path)將公共代碼引入。
示例代碼如下：
//common.js function Hello(name) { console.log('Hello' + name + '!') } module.exports = { sayHello: Hello } //下面的call.js使用common.js模塊 //call.js var common = require('common.js') page({ helloMINA:function(){ common.sayHello('MINA') } })
4、微信原生API
小程序開發框架提供了功能豐富的微信原生API，可以方便我們調取微信提供的能力，如獲取用戶信息、本地存儲、支付等。
微信原生的API共有八大類：界面API、文件API、數據緩存API、媒體API、網絡API、位置API、設備API以及微信開放接口。
微信API的共性特點：
wx.on開頭的API是監聽事件發生的API接口，接受一個回調函數（CALLBACK）作為參數。當事件發生時會調用該回調函數。
其他API接口都接受一個Object作為參數，除非有特殊約定。
Object中可以指定success、fail、complete方法來接收接口調用結果。success表示接口調用成功的回調函數，fail是接口調用失敗的回調函數，complete是接口調用結束的回調函數且無論成功、失敗都會執行。
關於原生API的種類、名稱、作用的詳細說明可以參考微信小程序開發者文檔中的API部分。
以上闡述的是小程序開發基礎中的「配置」與「邏輯層」部分，為避免篇幅過長，「視圖層」部分的講解將在單獨的文章中予以講述。