一、小程序框架介紹（了解）

小程序框架包含小程序的配置、框架接口、場景值、WXML 和 WXS 等

二、小程序的配置（精通）

小程序的配置分為全局配置、頁面配置以及sitemap 配置

1、全局配置

小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置。文件內容為一個 JSON 對象

img

下面介紹一下常用的配置選項

1.1 pages

用于指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會自動去尋找對于位置的 .json, .js, .wxml, .wxss 四個文件進行處理

有多少個頁面，此處就應該有多少個選項 數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數組進行修改。

==開發小技巧==

直接在pages選項中寫頁面路徑，即可創建相應的頁面

默認項目如圖所示

img

創建首頁、分類、購物車、我的頁面，編輯app.json中的pages選項如下

img

1.2 window

用于設置小程序的狀態欄、導航條、標題、窗口背景色。

img

默認小程序展示如下

img

修改之后展示如下

img

各種屬性展示示意圖如下

img

1.3 tabBar

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

img

其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序，每個項都是一個對象，其屬性值如下：

img

其展示形式如下圖所示

img

1.3.1 準備底部選項卡

1. icon字體圖標 在 iconfont字體圖標庫 中選擇需要的圖標，然后選擇下載

修改相應的圖片名字如下

2、項目目錄下創建resource文件夾，將圖片放置進去

5.jpg

3、app.json中配置底部選項卡

調整首頁為第一個頁面 --- 初始化頁面

展示形式如下

1.4 networkTimeout

各類網絡請求的超時時間，單位均為毫秒。

img

?

1.5 debug

可以在開發者工具中開啟 debug 模式，在開發者工具的控制臺面板，調試信息以 info 的形式給出，其信息有 Page 的注冊，頁面路由，數據更新，事件觸發等。可以幫助開發者快速定位一些常見的問題

1.6 functionalPages

插件所有者小程序需要設置這一項來啟用插件功能頁

1.7 permission

小程序接口權限相關設置。字段類型為 Object，結構為：

img

PermissionObject 結構為

img

?

代碼如下

1.jpg

展示效果如下

1.8 sitemapLocation

指明 sitemap.json 的位置；默認為 'sitemap.json' 即在 app.json 同級目錄下名字的 sitemap.json 文件

1.9 navigateToMiniProgramAppIdList

當小程序需要使用 wx.navigateToMiniProgram 接口跳轉到其他小程序時，需要先在配置文件中聲明需要跳轉的小程序 appId 列表，最多允許填寫 10 個。

2、頁面配置

每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容為一個 JSON 對象，有以下屬性

img

個人中心頁面配置

img

3、sitemap 配置

小程序根目錄下的 sitemap.json 文件用于配置小程序及其頁面是否允許被微信索引，文件內容為一個 JSON 對象，如果沒有 sitemap.json ，則默認為所有頁面都允許被索引。

三、框架接口（精通）

1.App(Object object)

注冊小程序。接受一個 Object 參數，其指定小程序的生命周期回調等。

App() 必須在 app.js中調用，必須調用且只能調用一次。不然會出現無法預期的后果。

img

示例中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.getApp(Object object)

獲取到小程序全局唯一的 App 實例,在頁面的js文件中獲取

3.Page(Object object)

注冊小程序中的一個頁面。接受一個Object類型參數，其指定頁面的初始數據、生命周期回調、事件處理函數等。

img

以個人中心的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、getCurrentPages()

獲取當前頁面棧。數組中第一個元素為首頁，最后一個元素為當前頁面。

不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

5、自定義組件

創建自定義組件，接受一個 Object 類型的參數

比如在首頁里需要一個產品列表的組件，可以自定義該組件

小技巧 點擊 “+”選擇目錄，輸入components

右鍵點擊components目錄，選擇目錄， 輸入prolist

右鍵點擊prolist目錄，選擇 新建Component ，輸入prolist 即可

如何使用該組件呢？

在首頁的pages/home/home.json文件中注冊組件

在首頁的pages/home/home.wxml中使用該組件，就像正常的標簽一樣使用

組件之間的傳值在后續課程中會講解

6、模塊化

建議使用es6的模塊化方法，api中提供的是基于commonjs規范的exports以及require語法

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'
 })
}

6.2 首頁中測試

在首頁 pages/home/home.js中測試，先引入模塊

img

四、WXML語法參考（精通）

創建一個新的頁面pages/test/test

img

選擇工具欄的 小程序編譯，添加編譯模式，可以更快捷的只渲染本頁面，便于開發者的調試

1.數據綁定

WXML 中的動態數據均來自對應 Page 的 data。

1.簡單綁定（類似于vue中的Mustache 語法）

數據綁定使用 Mustache 語法（雙大括號）將變量包起來，可以作用于：

內容

<view> {{ message }} </view>
Page({
 data: {
 message: 'Hello MINA!'
 }
})

1. 組件屬性(需要在雙引號之內)

<view id="item-{{id}}"> </view>
Page({
 data: {
 id: 0
 }
})

img

3.控制屬性(需要在雙引號之內)

<view wx:if="{{flag}}"> 條件為真我就顯示 </view>
Page({
 data: {
 flag: true
 }
})

4.boolean以及number數據類型

如果數據類型是booblean 或者number類型的數據，需要使用{{}}包裹

<checkbox checked="{{false}}"> </checkbox>
<view data-num = "{{100}}"></view>

img

5.表達式運算 可以在 {{}} 內進行簡單的運算，支持三元運算、算數運算、邏輯判斷、字符串運算等

<view test="{{flag ? true : false}}"> 屬性 </view>
?
<view> {{a + b}} + {{c}} + d </view>
?
<view wx:if="{{len > 5}}"> </view>
?
<view>{{"hello" + name}}</view>

2.列表渲染

wx:for（vue中使用v-for）

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item

列表渲染必須添加 wx:key指令， 來指定列表中項目的唯一的標識符。

key值可以設置為索引值

Page({
 data: {
 teachers: [
 {
 name: '劉沛君',
 city: '大連'
 },
 {
 name: '韋華文',
 city: '長沙'
 },
 {
 name: '盧有燁',
 city: '重慶'
 },
 {
 name: '劉春華',
 city: '北科'
 },
 {
 name: '黃俊健',
 city: '北科'
 },
 {
 name: '謝晉榮',
 city: '廣州'
 },
 {
 name: '李威',
 city: '深圳'
 },
 {
 name: '李鵬',
 city: '鄭州'
 },
 {
 name: '趙小康',
 city: '南京'
 },
 {
 name: '張路',
 city: '成都'
 },
 {
 name: '李響',
 city: '合肥'
 },
 ]
 }
})
?
<view wx:for="{{teachers}}" wx:key="index">
 <text>{{index}}</text>
 -
 <text>{{item.city}}</text>
 -
 <text>{{item.name}}</text>
</view>

默認 選項為item，默認索引值為index，如果需要更改，可以使用如下方式

<view wx:for="{{teachers}}" wx:for-item="itm" wx:for-index="idx"  wx:key="idx">
 <text>{{idx}}</text>
 -
 <text>{{itm.city}}</text>
 -
 <text>{{itm.name}}</text>
</view>

3.條件渲染

wx:if 在框架中，使用 wx:if="" 來判斷是否需要渲染該代碼塊

<view wx:if="{{flag}}"> True </view>

也可以用 wx:elif 和 wx:else 來添加一個 else 塊

<view wx:if="{{len > 5}}"> 1 </view>
<view wx:elif="{{len > 2}}"> 2 </view>
<view wx:else> 3 </view>

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性

<block wx:if="{{true}}">
 <view> view1 </view>
 <view> view2 </view>
</block>

==注意==： <block/> 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

wx:if vs hidden --- (對比vue中的 v-if 與 v-show)

因為 wx:if 之中的模板也可能包含數據綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好

五、WXS語法（了解）

WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

WXS 與 JavaScript 是不同的語言，有自己的語法，并不和 JavaScript 一致。

熟悉js語法的可以很快速的接收并且掌握它。

六、WXSS語法

WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應該怎么顯示。

為了適應廣大的前端開發者，WXSS具有CSS大部分特性。同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。

與 CSS 相比，WXSS 擴展的特性有：

尺寸單位

樣式導入

1.尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

?

==建議==： 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。 ==注意==： 在較小的屏幕上不可避免的會有一些毛刺，請在開發時盡量避免這種情況

2.樣式導入

使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束

3.全局樣式與局部樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。