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

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

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

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

1、全局配置

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

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

1.1 pages

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

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

==開發(fā)小技巧==

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

默認項目如圖所示

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

1.2 window

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

默認小程序展示如下

修改之后展示如下

各種屬性展示示意圖如下

1.3 tabBar

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

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

其展示形式如下圖所示

1.3.1 準備底部選項卡

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

修改相應的圖片名字如下

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

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

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

展示形式如下

1.4 networkTimeout

各類網(wǎng)絡請求的超時時間，單位均為毫秒。

?

1.5 debug

可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺面板，調試信息以 info 的形式給出，其信息有 Page 的注冊，頁面路由，數(shù)據(jù)更新，事件觸發(fā)等?？梢詭椭_發(fā)者快速定位一些常見的問題

1.6 functionalPages

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

1.7 permission

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

PermissionObject 結構為

?

代碼如下

展示效果如下

1.8 sitemapLocation

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

1.9 navigateToMiniProgramAppIdList

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

2、頁面配置

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

個人中心頁面配置

3、sitemap 配置

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

三、框架接口（精通）

1.App(Object object)

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

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

示例中app.js代碼如下

//app.js
App({
  onLaunch: function () {
    // 生命周期回調——監(jiān)聽小程序初始化 - 全局只觸發(fā)一次
    // 展示本地存儲能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登錄
    wx.login({
      success: res => {
        // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經(jīng)授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發(fā)送給后臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是網(wǎng)絡請求，可能會在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow(options) {
    // 小程序啟動，或從后臺進入前臺顯示時觸發(fā)
  },
  onHide() {
    // 小程序從前臺進入后臺時觸發(fā).
  },
  onError(msg) {
    // 小程序發(fā)生腳本錯誤或 API 調用報錯時觸發(fā)
    console.log(msg)
  },
  onPageNotFound(res) {
    // 小程序要打開的頁面不存在時觸發(fā);如果是 tabbar 頁面，請使用 wx.switchTab - 404
  },
  globalData: {
    userInfo: null
  }
})
復制代碼

2.getApp(Object object)

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

3.Page(Object object)

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

以個人中心的js為例

// pages/user/user.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   * data 是頁面第一次渲染使用的初始數(shù)據(jù)。
   * 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數(shù)據(jù)必須是可以轉成JSON的類型：字符串，數(shù)字，布爾值，對象，數(shù)組。
   * 渲染層可以通過 WXML 對數(shù)據(jù)進行綁定。
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   * 頁面加載時觸發(fā)。一個頁面只會調用一次，可以在 onLoad 的參數(shù)中獲取打開當前頁面路徑中的參數(shù)。
   */
  onLoad: function (options) {
    // options為打開當前頁面路徑中的參數(shù)
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   * 頁面初次渲染完成時觸發(fā)。一個頁面只會調用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   *  頁面顯示/切入前臺時觸發(fā)
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   * 頁面隱藏/切入后臺時觸發(fā)
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   * 頁面卸載時觸發(fā)。
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   * 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
   * 可以通過wx.startPullDownRefresh觸發(fā)下拉刷新，調用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致。
   * 當處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   * 可以在app.json的window選項中或頁面配置中設置觸發(fā)距離onReachBottomDistance。
   * 在觸發(fā)距離內滑動期間，本事件只會被觸發(fā)一次
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發(fā)按鈕
      console.log(res.target)
    }
    // 自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。
    return {
      title: '自定義轉發(fā)標題',
      path: '/page/user?id=123',
      imageUrl: ''
    }
  },

  /**
   * 監(jiān)聽用戶滑動頁面事件
   */
  onPageScroll: function () {

  }
  /**
   * 自定義函數(shù)
   */
})
復制代碼

4、getCurrentPages()

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

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

5、自定義組件

創(chuàng)建自定義組件，接受一個 Object 類型的參數(shù)

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

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

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

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

如何使用該組件呢？

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

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

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

6、模塊化

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

6.1 定義工具模塊 utils/index.js

數(shù)據(jù)請求模塊 以及 可消失的提示框 模塊 - 暴露

const baseUrl = 'http://daxun.kuboy.top'
/**
 * 數(shù)據(jù)請求模塊
 * 接口地址 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) => {
    // 微信小程序的數(shù)據(jù)請求方法
    // 必須配置小程序的安全域名，
    // 在開發(fā)階段可以在“詳情” - “本地設置” - 勾選中 不校驗請求域名、web-view(業(yè)務域名)、TLS版本及HTTPS證書
    wx.request({
      url: baseUrl + url,
      data: data || {},
      success: (res) => {
        // 隱藏加載中
        wx.hideLoading();
        // 后續(xù)處理
        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中測試，先引入模塊

四、WXML語法參考（精通）

創(chuàng)建一個新的頁面pages/test/test

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

1.數(shù)據(jù)綁定

WXML 中的動態(tài)數(shù)據(jù)均來自對應 Page 的 data。

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

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

內容

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

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

"item-{{id}}"> view>
Page({
  data: {
    id: 0
  }
})
復制代碼

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

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

4.boolean以及number數(shù)據(jù)類型

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

"{{false}}"> checkbox>
"{{100}}">view>
復制代碼

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

"{{flag ? true : false}}"> 屬性 </view>

 {{a + b}} + {{c}} + d view>

<view wx:if="{{len > 5}}"> view>

{{"hello" + name}}</view>
復制代碼

2.列表渲染

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

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

默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 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: '合肥'
      },
    ]
  }
})

for="{{teachers}}" wx:key="index">
  <text>{{index}}text>
  -
  <text>{{item.city}}text>
  -
  <text>{{item.name}}text>
</view>
復制代碼

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

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="" 來判斷是否需要渲染該代碼塊

if="{{flag}}"> True </view>
復制代碼

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

if="{{len > 5}}"> 1 </view>
 2 view>
<view wx:else> 3 view>
復制代碼

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

if="{{true}}">
  <view> view1 view>
   view2 </view>
block>
復制代碼

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

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

因為 wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當 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 的組件應該怎么顯示。

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

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

尺寸單位

樣式導入

1.尺寸單位

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

?

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

2.樣式導入

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

3.全局樣式與局部樣式

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