[微信小程序開發]全局綜述篇

項目預期

由於個人沒有任何前端基礎或語言基礎，所以框架對前端要求不高。花了一週多時間做這個框架。現在項目做得差不多了，回過頭來說一說當初原定的基礎目標：

1. 實現記事本能力，要求至少有3頁。主頁顯示預覽並具備翻頁能力，每份記事本需要至少有標題、時間、內容，存儲在雲端，並利用數據庫接口實現增刪改查。
2. 在詳情頁面可以直接對數據進行更新。
3. 在新增事項頁面可以新增一條數據。
   再給一張師兄最初設計的“概念圖”，還是比較小清新的：
   
   後來結合相關目標和美化，陸陸續續加了一些其他的要求。這些在下一篇文檔中會做整理。

這三個小目標目前可以說是基本完成了，在師兄要求下中間改了幾版，逐漸從重口味往小清新發展。目前展示效果如下：

然後給一下微信小程序開發的設計思想，在資源管理器中可以查看文件夾列表，主要文件有：

• cloudfunctions文件夾用於存儲雲函數，基本上一個文件夾對應一個雲函數。
• pages內的文件夾，基本上一個文件夾對應一個頁面，默認情況下index文件夾作爲主頁，這個可以再app.jaon文件夾中設置。
• 外部app.js/app.json/app.wxss/project.config.json用於配置全局的一些屬性。

這一篇先主要講一下外部app.js/app.json/app.wxss/project.config.json這些文件的用途和一些小技巧。

app.js

先上代碼，是JavaScript的語法：

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

在本項目中，app.js主要用途是獲取用戶的登錄信息，如用戶頭像、用戶id、用戶暱稱等。裏面包含一些授權的邏輯，之所以把登錄態判斷放在這裏，是因爲發現，服務端的登錄態和我們本地需要wx.checkSession檢測的用戶登錄態是不一樣的，所以爲了避免其他頁面重複操作，在這裏統一做了處理。

app.json

先上代碼（代碼格式是JSON）：

{
  "pages":[
    "pages/index/index",
    "pages/newPublish/newPublish",
    "pages/detail/detail",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#663",
    "navigationBarTitleText": "黃薔的記事本",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

這裏主要用到的是兩塊：
pages存儲的是頁面及其順序。一般來說主頁默認是最上面那個頁面。
鼠標指針選中某行後，按住alt+↑或者alt+↓可以比較方便地修改頁面上下的順序。
如果在裏面加入新的一行如：

"pages/detail/detail",

那麼保存後微信的IDE會自動在pages的頁面下新建detail文件夾，並在其中添加必要的四個文件（js,json,wxml,wxss）。這是比較方便地新建文件夾的操作。但是需要注意的是，在這裏刪除某行並保存後並不會直接刪除文件夾。所以這裏微信應該是隻支持新建文件夾不支持刪除文件夾。

下面那塊標題是window,是用來設置全局樣式的。頁面節點的配置可以查看這篇官方文檔。
比如我設置的文本模式是“dark”，小程序上面的title是“黃薔的記事本”，諸如此類。

再下面的style和sitemapLocation不需要去修改。比如把style中的v2修改成v1可能會改變一些按鈕的默認樣式。

app.wxss

這個文件夾的語法是css，不過看後綴就能猜到，肯定用了一些wx（微信）的SDK。

page {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

這裏相當於是一個全局的設計，我設置的是背景白色，可以豎向滑動拉動。順便一提，設置顏色有兩種方法，一種是輸入black、pink這種單詞系統會自動識別轉化成顏色，也可以輸入16進制的RGB來度量，如#fff就是白色，#000就是黑色。

project.config.json

這個我沒有對其進行修改，基本都是自己生成的代碼。

.gitignore

微信小程序中有些額外生成的文件不需要在git上同步。在網上找到的一個“配方”，可以直接使用。

# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msm
*.msp

# Windows shortcuts
*.lnk

# =========================
# Operating System Files
# =========================

# OSX
# =========================

.DS_Store
.AppleDouble
.LSOverride

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk