框架結構

• 微信小程序是一套系統(tǒng)的展示層廉嚼；

小程序項目目錄結構

• wxml 類比 html 頁面描述文件
  js 頁面邏輯文件
  wxss 類比 css 樣式表文件

• 主目錄中黍判，
  3個app開頭的文件就是微信小程序框架的主描述文件廊驼，
  這3個文件不屬于任何頁面颜骤；

• pages目錄下還有2個子目錄——index聂渊、logs：

  每個子目錄中保存著一個頁面的相關文件 —— 通常是4種不同擴展名的文件，
  分別是頁面中的邏輯文件穷躁、頁面結構文件耕肩、樣式表文件因妇、配置文件；
  為了減少開發(fā)時的配置項猿诸，框架特別約定描述頁面的這4個文件必須具備相同的路徑和文件名婚被；

主體文件

一個微信小程序的主體部分 由3個文件組成，
這個3個文件必須放在項目的主目錄中梳虽，
3個文件的名稱也是固定的（app）址芯；

• app.js
  小程序的主邏輯文件，在項目中不能缺少窜觉。
  主要用來注冊小程序谷炸；
• app.json
  小程序的主配置文件，在項目中不能缺少禀挫。
  用來對小程序進行全局配置旬陡；
• app.wxss
  小程序的主樣式表文件，在項目中可以不要语婴。
  作用同css描孟。
  主樣式表文件中設置的樣式，在其他頁面文件中也可以共享砰左；

頁面文件

微信小程序通常需要由多個頁面組成匿醒，
每個頁面由4個文件構成，
描述頁面的這4個文件必須具備相同的路徑和文件名菜职，
通過4種不同擴展名來區(qū)分青抛，擴展名的含義：

• js
  頁面的邏輯文件，負責編寫JS代碼控制頁面邏輯酬核，
  每個頁面必須有這個文件。
• wxml
  頁面的描述文件（類似html适室、htm）嫡意，
  用來設計頁面的布局，進行數據綁定等捣辆。
  每個頁面必須有這個文件蔬螟。
• wxss
  頁面的樣式表文件，
  用來定義本頁面使用到的各類樣式表汽畴。
  同時頁面可以使用app.wxss中定義的樣式旧巾，如果頁面使用的樣式都在app.wxss中定義了，這個文件也可以省略忍些。
  也可使用內聯樣式鲁猩；
  有樣式重復時，遵循層疊樣式的規(guī)則罢坝；
• json
  頁面配置文件廓握。
  如果頁面沒有特殊配置，可以省略該文件，只使用app.json中的配置即可隙券。

其他文件

• 小程序開發(fā)中男应，除了上述文件外，
  一般還會用到圖片娱仔、音視頻沐飘、通用js模塊等文件，
  這些文件可放置在項目中的任何位置牲迫，在調用時指定相對目錄即可薪铜。

• 圖片、音視頻等資源類的文件也可以單獨創(chuàng)建子目錄存放恩溅。
  大文件放在后端即可隔箍。

配置文件詳解

主配置文件app.json

主配置文件app.json位于項目主目錄中，用來對項目進行全局配置脚乡，
對所有頁面都適用蜒滩；
包括配置每個頁面文件的路徑、窗口表現奶稠、設置網絡超時時間俯艰、設置多tab等。

• 看一下初始項目的主配置文件：

  • 配置文件的內容 即 一個JSON對象锌订；

  • 屬性pages【String數組類型】：定義小程序中用到的頁面竹握；
    這里配置的是兩個界面，
    “pages/index”目錄下的“index”界面辆飘、“pages/logs”下的“l(fā)ogs”界面啦辐；

    • 在小程序中要使用到的頁面 須在app.json中配置，加在pages數組中蜈项。
    • pages數組的每一個item是String芹关，定義小程序中用到的頁面；
      每一個item代表對應頁面的【路徑+文件名】紧卒，文件名不用加后綴侥衬，框架會自動尋找路徑下.json、.js跑芳、.wxml轴总、.wxss結尾的4個文件進行編譯組合。
    • pages數組的第一項博个，表示小程序的初始頁面怀樟；

  • 屬性window：定義窗口的表現形式；
    如

    • backgroundColor：窗口背景色坡倔，
      使用十六進制的RGB方式設置顏色漂佩，
      如#ff0000為紅色脖含，默認值為白色 #ffffff；
    • navigationBarTitleText：設置標題文本投蝉；
    • navigationBarTextStyle：導航欄標題顏色养葵，支持black和white兩個值；
    • navigationBarBackgroundColor：設置標題導航欄背景顏色瘩缆；
    • backgroundTextStyle：設置下拉背景字體关拒、loading圖的樣式，
      只支持dark庸娱、light兩個值着绊；
    • enablePullDownRefresh，是否開啟下拉刷新熟尉，默認為false归露；

• 配置窗口底部tabBar

  • app.json中加一個“tabBar”屬性（數組類型），
    最少配置2個斤儿、最多5個tab剧包；
    tab按數組的順序排序；
    每個tab可配置顯示的文字往果、圖標等選項疆液；
    對于整個tabBar也可以通過屬性進行配置；

  • tabBar有5個屬性：

    • color陕贮，設置tab 未激活狀態(tài)的 文字顏色堕油；
    • selectedColor，設置tab 激活狀態(tài)的 文字顏色肮之；
    • borderStyle掉缺，設置tabBar上邊框的顏色，支持“black”或“white”局骤；
    • backgroundColor攀圈，設置tab的背景色，如#ffffff峦甩；
    • list，數組现喳，設置tab的列表項凯傲，最少2個、最多5個嗦篱；

  • list 數組的每一項是一個JSON對象冰单，可以設置4個屬性值：

    • text，tab上顯示的文字灸促；
    • iconPath诫欠，
      設置tab 處于 未激活狀態(tài)時 顯示的圖片路徑涵卵，icon圖片大小限制為40KB；
    • selectedIconPath荒叼，設置tab 處于 激活狀態(tài)時 顯示的圖片路徑轿偎，
    • pagePath，設置點擊tab時 跳轉的頁面路徑被廓；
      注意這里的路徑必須在pages中配置過坏晦。

• 網絡配置
networkTimeout屬性【JSON對象類型】，
  可以設置 各種 網絡請求的超時時間【單位：ms】嫁乘；

  • connectSocket昆婿，設置wx.connectSocket 接口網絡請求 的 超時時間；
  • downloadFile蜓斧，設置wx.downloadFile 下載文件接口 的 超時時間仓蛆；
  • uploadFile，設置wx.uploadFile 上傳文件接口 的 超時時間挎春；
  • request看疙，設置wx.request網絡請求接口 的 超時時間；

• debug屬性
  可以在開發(fā)者工具中開啟 debug模式搂蜓，
  在開發(fā)者工具的 控制臺面板狼荞，調試信息以info的形式給出，
  其信息有Page的注冊帮碰、頁面路由相味、數據更新和事件觸發(fā)，
  可以快速定位一些常見的問題殉挽；

例程：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0af",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color":"#dddddd",
    "selectedColor":"#3cc51f",
    "borderStyle":"black",
    "backgroundColor":"#ffffff",
    "list":[{
      "pagePath": "pages/index/index",
      "text":"首頁"
    },{
      "pagePath": "pages/logs/logs",
      "text":"日志"
    }]
  },
  "networkTimeout":{
    "request":10000,
    "downloadFile":10000
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

頁面配置文件

• 頁面配置文件的文件名 與 頁面其他3個文件名相同丰涉，擴展名為.json；
  如index頁面的配置文件名全稱為 index.json斯碌；
• 頁面配置 比 主配置文件要 簡單一死，
  因為在頁面配置文件中，
  只能設置 app.json 中的 window配置項的內容（頁面配置 會覆蓋 主配置 的相同的屬性內容）傻唾，
  最終決定本頁面的窗口表現投慈。
  無需寫window這個鍵，但要保留花括號冠骄；
  例程：

{
  "navigationBarBackgroundColor":"#00aaff",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText": "查看啟動日志（Demo）",
  "backgroundColor":"#eeeeee",
  "backgroundTextStyle":"dark",
  "usingComponents": {}
}

邏輯層js文件

小程序作為前端：

• 通常要對 從后端接收到數據進行進一步的加工伪煤；

• 界面中的數據也可能會 根據數據的變化 而改變；
  這些都需要前端的邏輯代碼實現凛辣；

• 小程序分邏輯層和視圖層抱既；
  邏輯層將數據進行處理后 發(fā)送給 視圖層，
  同時接受視圖層的 事件反饋扁誓。

• 官方為方便小程序開發(fā)防泵，
  在JS的基礎上做了封裝和修改：

  • 提供了App 和 Page 方法蚀之，用來進行程序和頁面的注冊；

  • 提供豐富的API捷泞，如掃一掃足删、支付 等微信特有能力；

  • 每個頁面有 獨立的作用域肚邢， 并提供模塊化能力壹堰；

  • 由于框架沒有運行在瀏覽器中，
    所以JS在Web中的一些能力無法使用骡湖，
    如不能方法document贱纠、window等JS對象；

  • 開發(fā)者寫的所有代碼 最終將被打包成一份JS响蕴，
    并在小程序啟動的時候運行谆焊，直到小程序銷毀。
    類似ServiceWorker浦夷，所以邏輯層也稱之為App Service辖试。

用App函數注冊小程序

• 每個微信小程序必須在app.js中進行程序的注冊，并且只能注冊一次劈狐；
  因此罐孝，主邏輯文件app.js中必須包含注冊的方法；
• 注冊小程序直接使用App()函數即可肥缔，
  函數參數是一個JSON對象莲兢，
  在這個對象中可指定小程序的生命周期函數：
  • onLaunch：當小程序初始化完成時，會觸發(fā)onLaunch续膳，全局只觸發(fā)一次改艇；
  • onShow：當小程序啟動，或從后臺進入前臺顯示坟岔，會觸發(fā)onShow谒兄；
  • onHide：當小程序從前臺進入后臺，會觸發(fā)onHide社付；
    如點擊關閉按鈕承疲，或手機的返回主界面按鈕離開微信時，
    小程序并不會直接被銷毀鸥咖，只是進入了后臺纪隙，觸發(fā)onHide；
    （前后后臺 指 小程序界面 是否展示出來）
• 當小程序 進入后臺一定時間扛或，或手機資源占用過高，就會被 手機系統(tǒng) 從后臺銷毀碘饼；
• 看下初始項目的主邏輯文件【app.js】：

//app.js
App({
  onLaunch: function () {
    // 展示本地存儲能力
    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']) {
          // 已經授權熙兔，可以直接調用 getUserInfo 獲取頭像昵稱悲伶，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發(fā)送給后臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

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

• 上述代碼中住涉，
  只定義了onLaunch函數麸锉，沒定義onShow、onHide函數舆声，
  這3個函數其實都不是必須的花沉，按需定義即可；

• 開發(fā)者可以在App()函數中 添加 任意名稱的函數 或數據 到參數中媳握，以完成特定的功能碱屁；

用Page函數注冊頁面

• 小程序中每個頁面 必須使用 Page() 函數進行注冊，
  函數參數 類似App()注冊程序函數蛾找，是一個JSON對象娩脾，
  在這個對象中可定義頁面的生命周期函數，
  也可編寫 自定義的函數來響應頁面的事件打毛；

• 在參數中 有一個 data屬性柿赊，用于定義頁面中使用到的數據；

• 頁面邏輯文件的文件名 與 頁面其他3個文件名相同幻枉，擴展名為.js碰声；
  如index頁面的配置文件名全稱為 index.js；

• 看下初始項目的index.js：

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數
  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 是網絡請求熬甫，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 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
    })
  }
})

• 初始化數據

  • 初始化數據位于data中胰挑，初始化數據 將作為頁面的第一次渲染；
  • data將會以JSON的形式 由 邏輯層 傳至 視圖層罗珍，
    所以其 數據 必須是可以轉成 JSON格式的數據洽腺，
    如字符串、數字覆旱、布爾值蘸朋、對象、數組等扣唱；
    
    如上藕坯，
    在data中定義了motto【字符串】，
    定義了userInfo【空對象】噪沙；
  • 視圖層 可以 通過wxml 對 data中定義的數據 進行綁定炼彪；

• 生命周期函數

  • 在Page()函數的參數中，可定義當前界面的生命周期函數

參考自《從零開始學微信小程序開發(fā)》