一、頁(yè)面文件

1. 小程序中的頁(yè)面文件分為四個(gè)，index.wxml、index.wxss、index.js和 index.json
2. index.wxml 是布局文件，index.wxss 是樣式文件，index.js 是邏輯文件， index.json 是配置文件
3. 頁(yè)面級(jí)別的配置會(huì)覆蓋全局級(jí)別的配置
4. 小程序全局通用配置文件只有 app.wxss、app.js和app.json文件，app.wxml文件沒(méi)有
5. 小程序頁(yè)面級(jí)別配置文件有index.js、index.json、index.wxml和index.wxss文件
6. 微信小程序的分層，配置層(.json)，視圖層(.wxml、.wxss)，邏輯層(.js)

二、tabBar 組件

1. tabBar 組件必須配置 list，數(shù)量最少為兩個(gè)，最多為五個(gè)，list 為數(shù)組
2. list 是 配置 pagePath 和 text，pagePath 為頁(yè)面路徑，text為 tab 上按鈕文字，iconPath 為默認(rèn)圖片路徑，selectedIconPath 為選中圖片路徑
3. 當(dāng) position 為 top 時(shí)，不顯示 icon，不顯示 iconPath 和 selectedIconPath
4. position 默認(rèn)為 bottom，在底部的
5. color 為 tabBar 的默認(rèn)顏色，selectedColor 為 tabBar 的選中顏色
6. 示例代碼如下：

"tabBar":{
    "backgroundColor": "#030",
    "position": "top",
    "color": "#ccc",
    "selectedColor": "#f00",
    "list": [
      {
        "selectedIconPath": "",
        "iconPath": "",
        "pagePath": "pages/test/test",
        "text": "首頁(yè)"
      },
      {
        "selectedIconPath": "",
        "iconPath": "",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

三、小程序框架 MINA

1. 基于 react native 的響應(yīng)式開(kāi)發(fā)框架，組件化開(kāi)發(fā)，數(shù)據(jù)驅(qū)動(dòng)
2. 分為視圖層和邏輯層，數(shù)據(jù)變化，邏輯也會(huì)變化
3. 數(shù)據(jù)綁定，通過(guò)插值表達(dá)式，{{}}
4. 條件渲染，wx:if、wx:elif、wx:else
5. 列表渲染，wx:for，遍歷時(shí)需要加 wx:key，如果需要修改名字，雙層循環(huán)中里面的循環(huán)獲取到外面的循環(huán)，如修改 item則為wx:for-item="user",
   修改 index則為 wx:for-index="idx"
6. 示例代碼

• test.js

data: {
    "msg": 'hello word',
    "list": [
      "vue",
      "react",
      "node"
    ],
    "show": true,
    "list2": [
      {name: "張三", city: "上海", course: ["vue", "react", "node"]},
      { name: "李四", city: "北京", course: ["vue", "react", "node"]},
      { name: "王五", city: "深圳", course: ["vue", "react", "node"]}
    ]
  },

• test.wxml

<!--pages/test/test.wxml-->
<text wx:if="{{ show }}">
  {{ msg }}
  {{ list }}
</text>

<view wx:for="{{ list }}" wx:key="{{ index}}">
  {{ item }} {{ index }}
</view>

<view wx:for="{{ list2 }}" wx:key="{{index}}" wx:for-item="user" wx:for-index="{{idx}}"> 
  {{user.name}} {{ user.city}} {{ idx }}
  <view wx:for="{{ user.course }}" wx:key="{{ index }}">
    {{ item}} {{ index }}
  </view>
</view>

四、小程序的頁(yè)面配置

1. data 是頁(yè)面第一次渲染使用的初始數(shù)據(jù)。頁(yè)面加載時(shí)，data 將會(huì)以JSON 字符串的形式由邏輯層傳至渲染層，因此 data 中的數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的類(lèi)型：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。
2. 生命周期函數(shù)

• onLoad(Object query) 頁(yè)面加載時(shí)觸發(fā)，只調(diào)用一次

• onShow() 頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)

• onReady() 頁(yè)面初次渲染完成時(shí)觸發(fā),一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互

• onHide() 頁(yè)面隱藏/切入后臺(tái)時(shí)觸發(fā)

• onUnload() 頁(yè)面卸載時(shí)觸發(fā)

3. 頁(yè)面事件處理函數(shù)

• onPullDownRefresh() 監(jiān)聽(tīng)用戶(hù)下拉刷新事件

• onReachBottom() 監(jiān)聽(tīng)用戶(hù)上拉觸底事件

• onPageScroll(Object object) 監(jiān)聽(tīng)用戶(hù)滑動(dòng)頁(yè)面事件

• onShareAppMessage(Object object) 監(jiān)聽(tīng)用戶(hù)點(diǎn)擊頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕（button 組件 open-type=“share”）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為，并自定義轉(zhuǎn)發(fā)內(nèi)容

• onResize(Object object) 小程序屏幕旋轉(zhuǎn)時(shí)觸發(fā)

• onTabItemTap(Object object) 點(diǎn)擊 tab 時(shí)觸發(fā)

五、小程序的全局配置

1. 小程序的全局配置分為
   pages 頁(yè)面路徑列表、window 全局的默認(rèn)窗口表現(xiàn)、tabBar 底部 tab 欄的表現(xiàn)、networkTimeout 網(wǎng)絡(luò)超時(shí)時(shí)間和debug開(kāi)啟debug 模式等等很多
2. 小程序的全局配置在 app.json文件中
3. 示例代碼 app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#0f0",
    "navigationBarTitleText": "Dell",
    "navigationBarTextStyle": "white",
    "backgroundColor": "pink",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "purple",
    "selectedColor": "red",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)",
        "iconPath": "resources/buy.png",
        "selectedIconPath": "resources/sell.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "resources/buy.png",
        "selectedIconPath": "resources/sell.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": false,
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

六、小程序的邏輯層

1. app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存儲(chǔ)能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

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

              // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

2. index.js

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒(méi)有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

3. logs.js

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

4. index.wxml

<view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱(chēng) </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>