微信小程式入門教程之一：初次上手

阮一峰發表於2020-10-26
微信小程式

微信是中國使用量最大的手機 App 之一，日活躍使用者超過3億，月活躍使用者超過11億（2019年底統計），市場極大。

2017年，微信正式推出了小程式，允許外部開發者在微信內部執行自己的程式碼，開展業務。這引發了熱烈反響，截止2020年6月，小程式數量已經超過了550萬個。

小程式已經成為國內前端的一個重要業務，跟 Web 和手機 App 有著同等的重要性。小程式開發者供不應求，市場招聘需求極其旺盛，企業都搶著要。

儘管如此，小程式的教程卻很缺，要麼是不夠系統，要麼就是跳躍性太大，很多關鍵的地方寥寥數語，初學者摸不著頭腦。我自己學的時候，就苦於找不到好一點的教程。

本文就是我的小程式學習筆記，整理成教程的形式，希望對於初學者有用。需要學會的主要知識點，我都會講到，我的目標是你讀完這個教程，就能學會怎麼寫小程式。

考慮到很多同學並沒有開發經驗，小程式是他們接觸的第一個開發領域。我會講得比較細，希望新人也能沒有困難地閱讀這個教程。由於內容比較多，這個教程將分成四次連載。

所有示例的完整程式碼，都可以從 GitHub 的程式碼倉庫下載。

一、小程式是什麼？

學習小程式之前，先簡單說一下，它到底是什麼。

字面上講，小程式就是微信裡面的應用程式，外部程式碼通過小程式這種形式，在微信這個手機 App 裡面執行。

但是，更準確的說法是， 小程式可以視為只能用微信開啟和瀏覽的網站。 小程式和網頁的技術模型是一樣的，用到的 JavaScript 語言和 CSS 樣式也是一樣的，只是網頁的 HTML 標籤被稍微修改成了 WXML 標籤。所以，小程式頁面本質上就是網頁。

小程式的特殊之處在於，雖然是網頁，但是它不支援瀏覽器，所有瀏覽器的 API 都不能使用，只能用微信提供的 API。這也是為什麼小程式只能用微信開啟的原因，因為底層全變了。

二、小程式的優勢

小程式最大的優勢，就是它基於微信。

微信 App 的功能（比如拍照、掃描、支付等等），小程式大部分都能使用。微信提供了各種封裝好的 API，開發者不用自己實現，也不用考慮 iOS 和安卓的平臺差異，只要一行程式碼就可以呼叫。

而且，開發者也不用考慮使用者的註冊和登入，直接使用微信的註冊和登入，微信的使用者自動成為你的使用者。

三、知識準備

由於小程式基於網頁技術，所以學習之前，最好懂一點網頁開發。具體來說，下面兩方面的知識是必需的。

（1）JavaScript 語言：懂基本語法，會寫簡單的 JS 指令碼程式。

（2）CSS 樣式：理解如何使用 CSS 控制網頁元素的外觀。

此外，雖然 HTML 標籤和瀏覽器 API 不是必備知識，但是瞭解瀏覽器怎麼渲染網頁，對於理解小程式模型有很大的幫助。

總的來說，先學網頁開發，再學小程式，是比較合理的學習途徑，而且網頁開發的資料比較多，遇到問題容易解決。但是，網頁開發要學的東西太多，不是短期能掌握的，如果想快速上手，先學小程式，遇到不懂的地方再去查資料，也未嘗不可。

四、開發準備

小程式開發的第一步，是去微信公眾平臺註冊，申請一個 AppID，這是免費的。

申請完成以後，你會得到一個 AppID（小程式編號） 和 AppSecret（小程式金鑰），後面都會用到。

然後，下載微信提供的小程式開發工具。這個工具是必需的，因為只有它才能執行和除錯小程式原始碼。

開發者工具支援 Windows 和 MacOS 兩個平臺。我裝的是 Windows （64位）的版本，這個教程的內容也是基於該版本的，但是 MacOS 版本的操作應該是完全一樣的。

安裝好開啟這個軟體，會要求你使用微信掃描二維碼登入。

登入後，進入新建專案的頁面，可以新建不同的專案，預設是新建小程式專案。

點選右側的+號，就跳出了新建小程式的頁面。

如果直接新建小程式，會生成一個完整的專案腳手架。對於初學者來說，這樣反而不利於掌握各個檔案的作用。更好的學習方法是，自己從頭手寫每一行程式碼，然後切換到"匯入專案"的選項，將其匯入到開發者工具。

匯入時，需要給小程式起一個名字，並且填寫專案程式碼所在的目錄，以及前面申請的 AppID。

五、 hello world 示例

下面，就請大家動手，跟著寫一個最簡單的小程式，只要五分鐘就能完成。

第一步，新建一個小程式的專案目錄。名字可以隨便起，這裡稱為wechat-miniprogram-demo。

你可以在 Windows Terminal 裡面執行下面的命令，新建並進入該目錄。


$ mkdir wechat-miniprogram-demo
$ cd wechat-miniprogram-demo

第二步，在該目錄裡面，新建一個指令碼檔案app.js。這個指令碼用於對整個小程式進行初始化。

app.js內容只有一行程式碼。


App({});

上面程式碼中，App()由小程式原生提供，它是一個函式，表示新建一個小程式例項。它的引數是一個配置物件，用於設定小程式例項的行為屬性。這個例子不需要任何配置，所以使用空物件即可。

第三步，新建一個配置檔案app.json，記錄專案的一些靜態配置。

app.json採用 JSON 格式。JSON 是基於 JavaScript 語言的一種資料交換格式，只有五條語法規則，非常簡單，不熟悉 JSON 的同學可以參考這篇教程。

app.json檔案的內容，至少必須有一個pages屬性，指明小程式包含哪些頁面。


{
  "pages": [
    "pages/home/home"
  ]
}

上面程式碼中，pages屬性是一個陣列，陣列的每一項就是一個頁面。這個示例中，小程式只有一個頁面，所以陣列只有一項pages/home/home。

pages/home/home是一個三層的檔案路徑。

  1. 所有頁面都放在pages子目錄裡面。
  2. 每個頁面有一個自己的目錄，這裡是pages下面的home子目錄，表示這個頁面叫做home。頁面的名字可以隨便起，只要對應的目錄確實存在即可。
  3. 小程式會載入頁面目錄pages/home裡面的home.js檔案，.js字尾名可以省略，所以完整的載入路徑為pages/home/home。home.js這個指令碼的檔名也可以隨便起，但是習慣上跟頁面目錄同名。

第四步，新建pages/home子目錄。


$ mkdir -p pages/home

然後，在這個目錄裡面新建一個指令碼檔案home.js。該檔案的內容如下。


Page({});

上面程式碼中，Page()由小程式原生提供，它是一個函式，用於初始化一個頁面例項。它的引數是一個配置物件，用於設定當前頁面的行為屬性。這裡是一個空物件，表示不設定任何屬性。

第五步，在pages/home目錄新建一個home.wxml檔案。WXML 是微信頁面標籤語言，類似於 HTML 語言，用於描述小程式的頁面。

home.wxml的內容很簡單，就寫一行hello world。


hello world

到這一步，就算基本完成了。現在，開啟小程式開發工具，匯入專案目錄wechat-miniprogram-demo。如果一切正常，就可以在開發者工具裡面，看到執行結果了。

點選工具欄的"預覽"或"真機除錯"按鈕，還可以在你的手機上面，檢視真機執行結果。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

六、WXML 標籤語言

上一節的home.wxml檔案，只寫了最簡單的一行hello world。實際開發中，不會這樣寫，而是要加上各種標籤，以便後面新增樣式和效果。

小程式的 WXML 語言提供各種頁面標籤。下面，對home.wxml改造一下，加上兩個最常用的標籤。


<view>
  <text>hello world</text>
</view>

上面的程式碼用到了兩個標籤：<view>和<text>。

<view>標籤表示一個區塊，用於跟其他區塊分隔，類似 HTML 語言的<div>標籤。<text>表示一段行內文字，類似於 HTML 語言的<span>標籤，多個<text>標籤之間不會產生分行。

注意，每個標籤都是成對使用，需要有閉合標記，即標籤名前加斜槓表示閉合，比如<view>的閉合標記是</view>。如果缺少閉合標記，小程式編譯時會報錯。

由於我們還沒有為頁面新增任何樣式，所以頁面的渲染效果跟上一節是一樣的。後面新增樣式時，大家就可以看到標籤的巨大作用。

七、小程式的專案結構

總結一下，這個示例一共有4個檔案，專案結構如下。


|- app.json
|- app.js
|- pages
   |- home
      |- home.wxml
      |- home.js

這就是最簡單、最基本的小程式結構。所有的小程式專案都是這個結構，在上面不斷新增其他內容。

這個結構分成兩層：描述整體程式的頂層 app 指令碼，以及描述各個頁面的 page 指令碼。

九、專案配置檔案 app.json

頂層的app.json檔案用於整個專案的配置，對於所有頁面都有效。

除了前面提到的必需的pages屬性，app.json檔案還有一個window屬性，用來設定小程式的視窗。window屬性的值是一個物件，其中有三個屬性很常用。

  • navigationBarBackgroundColor：導航欄的顏色，預設為#000000（黑色）。
  • navigationBarTextStyle：導航欄的文字顏色，只支援black（黑色）或white（白色），預設為white。
  • navigationBarTitleText：導航欄的文字，預設為空。

下面，改一下前面的app.json，加入window屬性。


{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程式 Demo"     
  }
}

上面程式碼中，window屬性設定導航欄的背景顏色為紅色（#ff0000），文字顏色為白色（white），標題文字為"小程式 Demo"。

開發者工具匯入專案程式碼，就可以看到導航欄變掉了。

這個示例的完整程式碼，可以到程式碼倉庫檢視。

除了視窗的樣式，很多小程式的頂部或尾部，還有選項欄，可以切換到不同的選項卡。

這個選項欄，也是在app.json裡面設定，使用tabBar屬性，這裡就不展開了。

如果你看到了結尾，說明真的對小程式開發非常感興趣。今天就講到這裡，下一篇將講解如何設定基本的頁面樣式，做出使用者介面 UI。

（完）

相關文章