微信小程式入門：初次上手
阿新 • • 發佈：2020-10-26
 2017年，微信正式推出了小程式，允許外部開發者在微信 內部執行自己的程式碼，開展業務。這引發了熱烈反響，截止2020年6月，小程式數量已經超過了550萬個[2]。  小程式已經成為國內前端的一個重要業務，跟 Web 和手機 App 有著同等的重要性。小程式開發者供不應求，市場招聘需求極其旺盛，企業都搶著要。 儘管如此，小程式的教程卻很缺，要麼是不夠系統，要麼就是跳躍性太大，很多關鍵的地方寥寥數語，初學者摸不著頭腦。我自己學的時候，就苦於找不到好一點的教程。 本文就是我的小程式學習筆記，整理成教程的形式，希望對於初學者有用。需要學會的主要知識點，我都會講到，我的目標是你讀完這個教程，就能學會怎麼寫小程式。 考慮到很多同學並沒有開發經驗，小程式是他們接觸的第一個開發領域。我會講得比較細，希望新人也能沒有困難地閱讀這個教程。由於內容比較多，這個教程將分成四次連載。  所有示例的完整程式碼，都可以從 GitHub 的程式碼倉庫[3]下載。 <h4>一、小程式是什麼？</h4> 學習小程式之前，先簡單說一下，它到底是什麼。 字面上講，小程式就是微信裡面的應用程式，外部程式碼通過小程式這種形式，在微信這個手機 App 裡面執行。 但是，更準確的說法是， 小程式可以視為只能用微信開啟和瀏覽的網站。 小程式和網頁的技術模型是一樣的，用到的 JavaScript 語言和 CSS 樣式也是一樣的，只是網頁的 HTML 標籤被稍微修改成了 WXML 標籤。所以，小程式頁面本質上就是網頁。 小程式的特殊之處在於，雖然是網頁，但是它不支援瀏覽器，所有瀏覽器的 API 都不能使用，只能用微信提供的 API。這也是為什麼小程式只能用微信開啟的原因，因為底層全變了。 <h4>二、小程式的優勢</h4> 小程式最大的優勢，就是它基於微信。 微信 App 的功能（比如拍照、掃描、支付等等），小程式大部分都能使用。微信提供了各種封裝好的 API，開發者不用自己實現，也不用考慮 iOS 和安卓的平臺差異，只要一行程式碼就可以呼叫。 而且，開發者也不用考慮使用者的註冊和登入，直接使用微信的註冊和登入，微信的使用者自動成為你的使用者。 <h4>三、知識準備</h4> 由於小程式基於網頁技術，所以學習之前，最好懂一點網頁開發。具體來說，下面兩方面的知識是必需的。 （1）JavaScript 語言：懂基本語法，會寫簡單的 JS 指令碼程式。 （2）CSS 樣式：理解如何使用 CSS 控制網頁元素的外觀。 此外，雖然 HTML 標籤和瀏覽器 API 不是必備知識，但是瞭解瀏覽器怎麼渲染網頁，對於理解小程式模型有很大的幫助。 總的來說，先學網頁開發，再學小程式，是比較合理的學習途徑，而且網頁開發的資料比較多，遇到問題容易解決。但是，網頁開發要學的東西太多，不是短期能掌握的，如果想快速上手，先學小程式，遇到不懂的地方再去查資料，也未嘗不可。 <h4>四、開發準備</h4> 小程式開發的第一步，是去微信公眾平臺註冊，申請一個 AppID，這是免費的。   申請完成以後，你會得到一個 AppID（小程式編號） 和 AppSecret（小程式金鑰），後面都會用到。 然後，下載微信提供的小程式開發工具[4]。這個工具是必需的，因為只有它才能執行和除錯小程式原始碼。 開發者工具支援 Windows 和 MacOS 兩個平臺。我裝的是 Windows （64位）的版本，這個教程的內容也是基於該版本的，但是 MacOS 版本的操作應該是完全一樣的。  安裝好開啟這個軟體，會要求你使用微信掃描二維碼登入。  登入後，進入新建專案的頁面，可以新建不同的專案，預設是新建小程式專案。  點選右側的+號，就跳出了新建小程式的頁面。  如果直接新建小程式，會生成一個完整的專案腳手架。對於初學者來說，這樣反而不利於掌握各個檔案的作用。更好的學習方法是，自己從頭手寫每一行程式碼，然後切換到“匯入專案”的選項，將其匯入到開發者工具。  匯入時，需要給小程式起一個名字，並且填寫專案程式碼所在的目錄，以及前面申請的 AppID。 <h4>五、 hello world 示例</h4> 下面，就請大家動手，跟著寫一個最簡單的小程式，只要五分鐘就能完成。 <b>第一步</b>，新建一個小程式的專案目錄。名字可以隨便起，這裡稱為wechat-miniprogram-demo。 你可以在 Windows Terminal 裡面執行下面的命令，新建並進入該目錄。 $ mkdir wechat-miniprogram-demo $ cd wechat-miniprogram-demo <b>第二步</b>，在該目錄裡面，新建一個指令碼檔案app.js。這個指令碼用於對整個小程式進行初始化。 app.js內容只有一行程式碼。 App({}); 上面程式碼中，App()由小程式原生提供，它是一個函式，表示新建一個小程式例項。它的引數是一個配置物件，用於設定小程式例項的行為屬性。這個例子不需要任何配置，所以使用空物件即可。 <b>第三步</b>，新建一個配置檔案app.json，記錄專案的一些靜態配置。 app.json採用 JSON 格式。JSON 是基於 JavaScript 語言的一種資料交換格式，只有五條語法規則，非常簡單，不熟悉 JSON 的同學可以參考這篇教程[5]。 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這個指令碼的檔名也可以隨便起，但是習慣上跟頁面目錄同名。 <b>第四步</b>，新建pages/home子目錄。 $ mkdir -p pages/home 然後，在這個目錄裡面新建一個指令碼檔案home.js。該檔案的內容如下。 Page({}); 上面程式碼中，Page()由小程式原生提供，它是一個函式，用於初始化一個頁面例項。它的引數是一個配置物件，用於設定當前頁面的行為屬性。這裡是一個空物件，表示不設定任何屬性。 <b>第五步</b>，在pages/home目錄新建一個home.wxml檔案。WXML 是微信頁面標籤語言，類似於 HTML 語言，用於描述小程式的頁面。 home.wxml的內容很簡單，就寫一行hello world。 hello world 到這一步，就算基本完成了。現在，開啟小程式開發工具，匯入專案目錄wechat-miniprogram-demo。如果一切正常，就可以在開發者工具裡面，看到執行結果了。  點選工具欄的“預覽”或“真機除錯”按鈕，還可以在你的手機上面，檢視真機執行結果。  這個示例的完整程式碼，可以到程式碼倉庫[6]檢視。 <h4>六、WXML 標籤語言</h4> 上一節的home.wxml檔案，只寫了最簡單的一行hello world。實際開發中，不會這樣寫，而是要加上各種標籤，以便後面新增樣式和效果。 小程式的 WXML 語言提供各種頁面標籤。下面，對home.wxml改造一下，加上兩個最常用的標籤。 <view> <text>hello world</text> </view> 上面的程式碼用到了兩個標籤：<view>和<text>。 <view>標籤表示一個區塊，用於跟其他區塊分隔，類似 HTML 語言的<div>標籤。<text>表示一段行內文字，類似於 HTML 語言的<span>標籤，多個<text>標籤之間不會產生分行。 注意，每個標籤都是成對使用，需要有閉合標記，即標籤名前加斜槓表示閉合，比如<view>的閉合標記是</view>。如果缺少閉合標記，小程式編譯時會報錯。 由於我們還沒有為頁面新增任何樣式，所以頁面的渲染效果跟上一節是一樣的。後面新增樣式時，大家就可以看到標籤的巨大作用。 <h4>七、小程式的專案結構</h4> 總結一下，這個示例一共有4個檔案，專案結構如下。 |- app.json |- app.js |- pages |- home |- home.wxml |- home.js 這就是最簡單、最基本的小程式結構。所有的小程式專案都是這個結構，在上面不斷新增其他內容。 這個結構分成兩層：描述整體程式的頂層 app 指令碼，以及描述各個頁面的 page 指令碼。 <h4>八、專案配置檔案 app.json</h4> 頂層的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”。 開發者工具匯入專案程式碼，就可以看到導航欄變掉了。  這個示例的完整程式碼，可以到程式碼倉庫[7]檢視。 除了視窗的樣式，很多小程式的頂部或尾部，還有選項欄，可以切換到不同的選項卡。  這個選項欄，也是在app.json裡面設定，使用tabBar屬性，這裡就不展開了。 References [1] 2019年底統計: http://www.xinhuanet.com/info/2020-01/10/c_138692663.htm [2] 550萬個: https://www.sohu.com/a/414519022_116132 [3] 程式碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos [4] 小程式開發工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html [5] 這篇教程: https://wangdoc.com/javascript/stdlib/json.html#json-%E6%A0%BC%E5%BC%8F [6] 程式碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/01.hello-world [7] 程式碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/02.app-json