---

一、什麼是小程式？

微信小程式，小程式的一種，英文名Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或搜一下即可開啟應用。

https://mp.weixin.qq.com/cgi-bin/wx

二、開發工具

1.小程式開發者工具

這個工具整合了公眾號網頁除錯和小程式除錯兩種開發模式。我這裡使用了Beta版本，沒有用正式版。因為我想體驗使用其中的Git版本管理功能。下載地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

下載安裝好後，先要微信掃描登入。然後選擇小程式專案。

新建小程式專案。

選擇新建小程式的專案目錄，AppID沒有註冊的話，可以先點選下面的使用測試號即可，不影響開發。

大致的工具介面如下圖，新版有版本管理。紅色圈起來的為小程式專案的一個頁面包含的元素：

工具用起來很方便、簡單、直接。詳細用法就不說了，主要的功能大概說下。左側是模擬器，可以模擬安卓手機和蘋果手機的效果，因為有些小程式元件在安卓和蘋果上顯示是有區別的，大家可以注意下。圈紅的為小程式一個頁面的基本組成檔案元素：xx.js、xx.wxml、xx.wxss、xx.json。其實就是有JS檔案、HTML檔案（xx.wxml）、CSS樣式檔案（xx.wxss）和配置檔案（xx.json）組成，非常的容易理解。我們就是在使用小程式的元件、控制元件來繪製UI佈局，主要是xx.wxml和xx.wxss檔案。xx.js負責生命週期函式和事件處理，例如：點選事件、資料請求、資料繫結等等邏輯操作。

我們在編寫完後，可以點選工具欄上的預覽按鈕，掃描二維碼在真機上體驗，也可以直接用左側的模擬器時時預覽即可。

看完了工具，我們看下基本開發的要素和需要注意的問題吧，以免新手再次重蹈覆轍。

2.檔案目錄結構

看下預設的新建後的結構：

app.json是小程式全域性配置檔案，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。

大致程式碼結構如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages是配置小程式所有頁面，類似於註冊清單。window是全域性的視窗配置，如顏色、標題等等。當然每個頁面也可以自己單獨配置，就是頁面名稱.json檔案。例如：page.json。不過需要注意的是，單獨頁面配置的json無需寫window這個關鍵字，直接如下程式碼所示：

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#34495e",
  "navigationBarTitleText": "日記",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true,
  "backgroundColor": "#34495e"
}

那麼再看工具配置檔案project.config.json。

通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如介面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。考慮到這點，小程式開發者工具在每個專案的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個檔案，當你重新安裝工具或者換電腦工作時，你只要載入同一個專案的程式碼包，開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置，其中會包括編輯器的顏色、程式碼上傳時自動壓縮等等一系列選項。具體詳細配置大家可以看小程式官方文件有詳細介紹。

還有一個app.wxss和app.js。這個app.wxss就是全域性的樣式檔案，也就是css檔案，當然和頁面配置檔案一樣，每個頁面可以單獨寫頁面名稱.wxss。

WXSS 具有 CSS 大部分的特性，小程式在 WXSS 也做了一些擴充和修改。

新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機裝置的螢幕會有不同的寬度和裝置畫素比，採用一些技巧來換算一些畫素單位。WXSS 在底層支援新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程式底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。

提供了全域性的樣式和區域性樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全域性樣式，會作用於當前小程式的所有頁面，區域性頁面樣式 page.wxss 僅對當前頁面生效。

此外 WXSS 僅支援部分 CSS 選擇器

再來看app.js，很明顯是一個js檔案。負責UI互動、資料繫結更新、網路請求、頁面生命週期等等操作相關的都在這裡。當然每個頁面都有自己單獨的.js檔案，這個app.js可以做一些需要全域性共享和操作的邏輯在裡面。在這裡可以呼叫微信小程式的很多API，也可以自己寫js方法使用。

那麼我們看下一個頁面的組成，基本上就是下圖這些結構元素。有介面、有樣式、有js互動、有配置。

每新增一個頁面都要在app.json裡新增註冊進去。

一個.js檔案裡有生命週期的管理函式，可以在這裡面做相應的操作。

Page({
 
  /**
   * 頁面的初始資料
   */
  data: {
    
  },
 
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
  },
 
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },
 
  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    
  },
 
  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
    
  },
 
  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
    
  },
 
  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作*/
  onPullDownRefresh: function () {
    
  },
 
  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
    
  },
 
  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

我們看下最簡單的一個index.wxml頁面，可以當做是Html頁面，只有一個text控制元件，裡面的bindtap就是點選事件的繫結。

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto" bindtap='click'>{{motto}}</text>
  </view>
</view>

那麼這個class就是index.wxss裡的樣式檔案。裡面的{{motto}}就是指向index.js裡的data裡定義的一個變數。小程式都是通過{{…}}兩個大括號包括一個英文名字來進行變數繫結的。這樣我們就可以動態更換裡面的顯示內容了。那麼怎麼更新內容呢？

在js裡使用下面的this.setData方式動態更新重新整理資料：

this.setData({ motto: "名字" })

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: #aaa;
}
 
.usermotto {
  margin-top: 200px;
}

再看下index.js檔案。

//index.js
//獲取應用例項
const app = getApp()
 
Page({
  data: {
    motto: 'Hello World',
  },
  
  //事件處理函式
  click: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
    
})

Page函式是必須要有的，裡面包含data:{ … }，用於放置資料、常量、變數等等。這裡的click:function就是我們定義的點選事件。wx.navigateTo…方法就是小程式的官方API，具體其他API的用法和返回引數是什麼可以看官方API文件，很詳細。

觀察下，上面有個宣告瞭app這個常量。這個就是app.js裡拿到的全域性管理呼叫app.js裡的方法和常量用的。很多需要儲存和全域性讀寫、處理的都可以進行操作以及放置在app.js裡。在 JavaScript 檔案中宣告的變數和函式只在該檔案中有效；不同的檔案中可以宣告相同名字的變數和函式，不會互相影響。通過全域性函式 getApp() 可以獲取全域性的應用例項，如果需要全域性的資料可以在 App() 中設定。

Page({
  data: { // 參與頁面渲染的資料
    logs: []
  },
  onLoad: function () {
    // 頁面渲染後執行
  }
})

小程式的元件和控制元件有很多，可以看做是Html的標籤，對稱方式使用。具體元件特性看官方文件：
https://developers.weixin.qq.com/miniprogram/dev/component/

3.頁面生命週期

頁面的生命週期,這個比較重要，大家可以看下理解下。

看下邏輯層需要注意的。除了頁面的生命週期，還有頁面的監聽事件。onPullDownRefresh()：監聽使用者下拉重新整理事件。

需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
可以通過wx.startPullDownRefresh觸發下拉重新整理，呼叫後觸發下拉重新整理動畫，效果與使用者手動下拉重新整理一致。
當處理完資料重新整理後，wx.stopPullDownRefresh可以停止當前頁面的下拉重新整理。

onReachBottom()：監聽使用者上拉觸底事件。可以在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance，預設為50px。
在觸發距離內滑動期間，本事件只會被觸發一次。

onPageScroll(Object)：監聽使用者滑動頁面事件。

onShareAppMessage(Object)：

監聽使用者點選頁面內轉發按鈕（ 元件 open-type=“share”）或右上角選單“轉發”按鈕的行為，並自定義轉發內容。

注意：只有定義了此事件處理函式，右上角選單才會顯示“轉發”按鈕。

onTabItemTap(Object)：點選 tab 時觸發。

Page.prototype.setData(Object data, Function callback)：setData 函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的 this.data 的值（同步）。

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以資料路徑的形式給出，支援改變陣列中的某一項或物件的某個屬性，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。
僅支援設定可 JSON 化的資料。
單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。
請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題。

4.路由跳轉

接下來看下小程式裡的路由、跳轉。

主要有這幾種方式：

這幾種方式url都可以傳遞引數。

wx.navigateTo：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。注意：目前頁面路徑最多隻能十層。

wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內的某個頁面。如果你想讓頁面沒有返回按鈕，不能返回的話，就用這個跳轉方式吧。

wx.reLaunch(OBJECT)：關閉所有頁面，開啟到應用內的某個頁面。

wx.switchTab(OBJECT)：跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。

wx.navigateBack(OBJECT)：關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

注意：

1、navigateTo, redirectTo 只能開啟非 tabBar 頁面。
2、switchTab 只能開啟 tabBar 頁面。
3、reLaunch 可以開啟任意頁面。
4、頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
5、呼叫頁面路由帶的引數可以在目標頁面的onLoad中獲取。