瞭解小程序的構成

前言

最近發佈了一批搞笑的文字類小程序；故記錄一下有關小程序的一些開發心得。開篇就拿樣例工程入手。

此篇主要是介紹一下小程序樣例工程的目錄結構，以及小程序的文件構成。另外還對於本身認爲callback獲取用戶信息的疑點作出了一些說明。

樣例工程

小程序樣例工程（QuickStart）目錄結構

│  app.js
│  app.json
│  app.wxss
│  jsconfig.json
│  project.config.json
│
├─.vscode
│      settings.json
│
├─pages
│  ├─index
│  │      index.js
│  │      index.wxml
│  │      index.wxss
│  │
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
├─typings
│      wx.d.ts
│
└─utils
        util.js

注意：因我使用了vscode做爲小程序的開發工具，故會自動增長.vscode以及typings(vscode小程序開發插件自動增長)目錄

官網中的API文檔有提到不一樣文件的含義

.json 後綴的 JSON 配置文件
.wxml 後綴的 WXML 模板文件
.wxss 後綴的 WXSS 樣式文件
.js 後綴的 JS 腳本邏輯文件

JSON文件

在項目中有如下幾個JSON文件 app.json、project.config.json、pages/logs/logs.json

app.json

app.json 是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等

pages用於描述當前小程序全部頁面路徑（讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄）

window定義小程序全部頁面的頂部背景顏色。

工具配置 project.config.json

project.config.json 是指個性化的配置信息；如配置版本庫、該小程序是發佈到哪一個appId，以及工程名等...

頁面配置 page.json

爲每一個page定義頂部顏色、是否容許下拉刷新等

該文件在page中無關緊要，若是不存在，則默認爲app.json的配置；存在則以該文件的配置爲準。

WXML 模板

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。簡單來講：WXML 充當相似 HTML 的角色。

並且小程序是基於MVVM的開發模式，對於已經熟悉Vue、React等前端開發框架的話，會很容易上手。另外有個WXML的一些數據綁定、事件等可參考官網API：WXML

須要注意的是小程序自己已經封裝了屬於自身的標籤: view, button, text 等等；具體用法能夠在官網API中瞭解：組件說明

WXSS 樣式

也就是小程序的頁面樣式，官網有提到app.wxss 做爲全局樣式，會做用於當前小程序的全部頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。

另外WXSS 在底層支持新的尺寸單位 rpx ，開發者能夠免去換算的煩惱。也就是說，rpx是相似於rem等單位尺寸；但rpx不須要要增長根大小，直接使用便可。

JS 交互邏輯

該文件是做爲小程序的交互邏輯文件；處理相關交互邏輯。 在此可查看與小程序交互邏輯API：交互邏輯API

小程序的啓動

微信客戶端在打開小程序以前，會把整個小程序的代碼包下載到本地。

小程序啓動以後，在 app.js 定義的 App 實例的 onLaunch 回調會被執行

整個小程序只有一個 App 實例，所有頁面共享

App實例相關回調函數說明

對於樣例工程中，callback的理解

下面先看看樣例工程中的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)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

上面有關callback的的疑問大多都在

if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
}

其實 userInfoReadyCallback 能夠換成你想要的命名。

咱們在index.js中能夠看到有這樣的代碼:

const app = getApp()
......
 // 因此此處加入 callback 以防止這種狀況
app.userInfoReadyCallback = res => {
this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
})
}
......

結合app.js、index.js的代碼，能夠得出callback的做用：

//app.js
if (this.userInfoReadyCallback) { //是否認義了userInfoReadyCallback
    this.userInfoReadyCallback(res) //定義後就調用該函數，而且傳入res的參數信息
}

//index.js
//此處定義了function userInfoReadyCallback(res)，注意app.userInfoReadyCallback；也就是在app.js中定義了userInfoReadyCallback；故在執行獲取用戶信息的時候，會將用戶信息設置到index.wxml頁面的data中
app.userInfoReadyCallback = res => {
this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
})
}

最後有關 js 的 callback 能夠參考一下：Understand JavaScript Callback Functions and Use Them 文章。

後續將介紹，在小程序中使用Promise。