一、小程序框架介紹（了解）
小程序框架包含小程序的配置、框架接口、場景值、WXML 和 WXS 等
二、小程序的配置（精通）
小程序的配置分為全局配置、頁面配置以及 配置
1、全局配置
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置。文件內容為一個 JSON 對象
?
下面介紹一下常用的配置選項
1.1 pages
用于指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會自動去尋找對于位置的 .json, .js, .wxml, .wxss 四個文件進行處理
有多少個頁面，此處就應該有多少個選項
數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
==開發小技巧==
直接在pages選項中寫頁面路徑，即可創建相應的頁面
默認項目如圖所示
創建首頁、分類、購物車、我的頁面，編輯app.json中的pages選項如下
1.2
用于設置小程序的狀態欄、導航條、標題、窗口背景色。
默認小程序展示如下
修改之后展示如下
各種屬性展示示意圖如下
1.3
如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序，每個項都是一個對象，其屬性值如下：
其展示形式如下圖所示
1.3.1 準備底部選項卡icon字體圖標 在 字體圖標庫 中選擇需要的圖標，然后選擇下載
修改相應的圖片名字如下
2、項目目錄下創建文件夾，將圖片放置進去
3、app.json中配置底部選項卡
調整首頁為第一個頁面 --- 初始化頁面
展示形式如下
1.4
各類網絡請求的超時時間微信小程序組件傳值，單位均為毫秒。
?
1.5 debug
可以在開發者工具中開啟 debug 模式，在開發者工具的控制臺面板，調試信息以 info 的形式給出，其信息有 Page 的注冊，頁面路由，數據更新，事件觸發等。可以幫助開發者快速定位一些常見的問題
1.6
插件所有者小程序需要設置這一項來啟用插件功能頁
1.7
小程序接口權限相關設置。字段類型為 ，結構為：
結構為
?
?
代碼如下
展示效果如下
1.8
指明 .json 的位置；默認為 '.json' 即在 app.json 同級目錄下名字的 .json 文件
1.9
當小程序需要使用 wx.m 接口跳轉到其他小程序時微信小程序組件傳值，需要先在配置文件中聲明需要跳轉的小程序 appId 列表，最多允許填寫 10 個。
2、頁面配置
每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 中相同的配置項。文件內容為一個 JSON 對象，有以下屬性
個人中心頁面配置
3、 配置
小程序根目錄下的 .json 文件用于配置小程序及其頁面是否允許被微信索引，文件內容為一個 JSON 對象，如果沒有 .json ，則默認為所有頁面都允許被索引。
三、框架接口（精通）1.App( )
注冊小程序。接受一個 參數，其指定小程序的生命周期回調等。
App() 必須在 app.js中調用，必須調用且只能調用一次。不然會出現無法預期的后果。
示例中app.js代碼如下
//app.js
App({
onLaunch: function () {
// 生命周期回調——監聽小程序初始化 - 全局只觸發一次
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
?
// 登錄
wx.login({
success: res => {
// 發送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
?
// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
onShow(options) {
// 小程序啟動，或從后臺進入前臺顯示時觸發
},
onHide() {
// 小程序從前臺進入后臺時觸發.
},
onError(msg) {
// 小程序發生腳本錯誤或 API 調用報錯時觸發
console.log(msg)
},
onPageNotFound(res) {
// 小程序要打開的頁面不存在時觸發;如果是 tabbar 頁面，請使用 wx.switchTab - 404
},
globalData: {
userInfo: null
}
})
2.( )
獲取到小程序全局唯一的 App 實例,在頁面的js文件中獲取
3.Page( )
注冊小程序中的一個頁面。接受一個類型參數，其指定頁面的初始數據、生命周期回調、事件處理函數等。
以個人中心的js為例
// pages/user/user.js
Page({
?
/**
* 頁面的初始數據
* data 是頁面第一次渲染使用的初始數據。
* 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。
* 渲染層可以通過 WXML 對數據進行綁定。
*/
data: {
?
},
?
/**
* 生命周期函數--監聽頁面加載
* 頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。
*/
onLoad: function (options) {
// options為打開當前頁面路徑中的參數
},
?
/**
* 生命周期函數--監聽頁面初次渲染完成
* 頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互
*/
onReady: function () {
?
},
?
/**
* 生命周期函數--監聽頁面顯示
* 頁面顯示/切入前臺時觸發
*/
onShow: function () {
?
},
?
/**
* 生命周期函數--監聽頁面隱藏
* 頁面隱藏/切入后臺時觸發
*/
onHide: function () {
?
},
?
/**
* 生命周期函數--監聽頁面卸載
* 頁面卸載時觸發。
*/
onUnload: function () {
?
},
?
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
* 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
* 可以通過wx.startPullDownRefresh觸發下拉刷新，調用后觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
* 當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新
*/
onPullDownRefresh: function () {
?
},
?
/**
* 頁面上拉觸底事件的處理函數
* 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
* 在觸發距離內滑動期間，本事件只會被觸發一次
*/
onReachBottom: function () {
?
},
?
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 來自頁面內轉發按鈕
console.log(res.target)
}
// 自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。
return {
title: '自定義轉發標題',
path: '/page/user?id=123',
imageUrl: ''
}
},
?
/**
* 監聽用戶滑動頁面事件
*/
onPageScroll: function () {
?
}
/**
* 自定義函數
*/
})
4、()
獲取當前頁面棧。數組中第一個元素為首頁，最后一個元素為當前頁面。
不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
不要在 App. 的時候調用 ()，此時 page 還沒有生成。5、自定義組件
創建自定義組件，接受一個 類型的參數
比如在首頁里需要一個產品列表的組件，可以自定義該組件
小技巧 點擊 “+”選擇目錄，輸入
右鍵點擊目錄，選擇目錄， 輸入
右鍵點擊目錄，選擇 新建 ，輸入 即可
如何使用該組件呢？
在首頁的pages/home/home.json文件中注冊組件
在首頁的pages/home/home.wxml中使用該組件，就像正常的標簽一樣使用
組件之間的傳值在后續課程中會講解
6、模塊化
建議使用es6的模塊化方法，api中提供的是基于規范的以及語法
6.1 定義工具模塊 utils/index.js
數據請求模塊 以及 可消失的提示框 模塊 - 暴露
const baseUrl = 'http://daxun.kuboy.top'
/**
* 數據請求模塊
* 接口地址 http://daxun.kuboy.top/apidoc
* 先顯示加載框，然后請求結束加載框消失
*
*/
export function request (url, data) {
// 顯示加載中
// 參考https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
wx.showLoading({
title: '加載中',
})
// 使用promise 解決異步操作問題，此處還可以使用 async + await
return new Promise((resolve, reject) => {
// 微信小程序的數據請求方法
// 必須配置小程序的安全域名，
// 在開發階段可以在“詳情” - “本地設置” - 勾選中 不校驗請求域名、web-view(業務域名)、TLS版本及HTTPS證書
wx.request({
url: baseUrl + url,
data: data || {},
success: (res) => {
// 隱藏加載中
wx.hideLoading();
// 后續處理
resolve(res.data)
}
})
})
}
?
/**
* 可消失的提示框 - 默認只顯示文字
* str 提示內容
* icon 是否需要圖標，none 、 success(默認值) 、 loading
*/
export function Toast (str, icon) {
// 微信提供的API接口
// 參照 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
wx.showToast({
title: str,
icon: icon || 'none'
})
}