2017年，微信正式推出了小程序,，允許外部開發(fā)者在微信 內(nèi)部運(yùn)行自己的代碼,，開展業(yè)務(wù)。這引發(fā)了熱烈反響,，截止2020年6月,，小程序數(shù)量已經(jīng)超過了550萬個^[2]。

小程序已經(jīng)成為國內(nèi)前端的一個重要業(yè)務(wù),，跟 Web 和手機(jī) App 有著同等的重要性,。小程序開發(fā)者供不應(yīng)求，市場招聘需求極其旺盛,，企業(yè)都搶著要,。

盡管如此，小程序的教程卻很缺,，要么是不夠系統(tǒng),，要么就是跳躍性太大，很多關(guān)鍵的地方寥寥數(shù)語,，初學(xué)者摸不著頭腦,。我自己學(xué)的時候，就苦于找不到好一點(diǎn)的教程,。

本文就是我的小程序?qū)W習(xí)筆記,，整理成教程的形式，希望對于初學(xué)者有用,。需要學(xué)會的主要知識點(diǎn),，我都會講到，我的目標(biāo)是你讀完這個教程,，就能學(xué)會怎么寫小程序,。

考慮到很多同學(xué)并沒有開發(fā)經(jīng)驗(yàn)，小程序是他們接觸的第一個開發(fā)領(lǐng)域,。我會講得比較細(xì),，希望新人也能沒有困難地閱讀這個教程。由于內(nèi)容比較多，這個教程將分成四次連載,。

所有示例的完整代碼,，都可以從 GitHub 的代碼倉庫^[3]下載。

一,、小程序是什么,？

學(xué)習(xí)小程序之前，先簡單說一下,，它到底是什么,。

字面上講，小程序就是微信里面的應(yīng)用程序,，外部代碼通過小程序這種形式,，在微信這個手機(jī) App 里面運(yùn)行。

但是,，更準(zhǔn)確的說法是,， 小程序可以視為只能用微信打開和瀏覽的網(wǎng)站。小程序和網(wǎng)頁的技術(shù)模型是一樣的,，用到的 JavaScript 語言和 CSS 樣式也是一樣的,，只是網(wǎng)頁的 HTML 標(biāo)簽被稍微修改成了 WXML 標(biāo)簽。所以,，小程序頁面本質(zhì)上就是網(wǎng)頁,。

小程序的特殊之處在于，雖然是網(wǎng)頁,，但是它不支持瀏覽器,，所有瀏覽器的 API 都不能使用，只能用微信提供的 API,。這也是為什么小程序只能用微信打開的原因,，因?yàn)榈讓尤兞恕?/p>

二,、小程序的優(yōu)勢

小程序最大的優(yōu)勢,，就是它基于微信。

微信 App 的功能（比如拍照,、掃描,、支付等等），小程序大部分都能使用,。微信提供了各種封裝好的 API,，開發(fā)者不用自己實(shí)現(xiàn)，也不用考慮 iOS 和安卓的平臺差異,，只要一行代碼就可以調(diào)用,。

而且，開發(fā)者也不用考慮用戶的注冊和登錄,，直接使用微信的注冊和登錄,，微信的用戶自動成為你的用戶,。

三、知識準(zhǔn)備

由于小程序基于網(wǎng)頁技術(shù),，所以學(xué)習(xí)之前,，最好懂一點(diǎn)網(wǎng)頁開發(fā)。具體來說,，下面兩方面的知識是必需的,。

（1）JavaScript 語言：懂基本語法，會寫簡單的 JS 腳本程序,。

（2）CSS 樣式：理解如何使用 CSS 控制網(wǎng)頁元素的外觀,。

此外，雖然 HTML 標(biāo)簽和瀏覽器 API 不是必備知識,，但是了解瀏覽器怎么渲染網(wǎng)頁,，對于理解小程序模型有很大的幫助。

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

四,、開發(fā)準(zhǔn)備

小程序開發(fā)的第一步，是去微信公眾平臺注冊,，申請一個 AppID,，這是免費(fèi)的。

申請完成以后,，你會得到一個 AppID（小程序編號） 和 AppSecret（小程序密鑰）,，后面都會用到。

然后,，下載微信提供的小程序開發(fā)工具^[4],。這個工具是必需的，因?yàn)橹挥兴拍苓\(yùn)行和調(diào)試小程序源碼。

開發(fā)者工具支持 Windows 和 MacOS 兩個平臺,。我裝的是 Windows （64位）的版本,，這個教程的內(nèi)容也是基于該版本的，但是 MacOS 版本的操作應(yīng)該是完全一樣的,。

安裝好打開這個軟件,，會要求你使用微信掃描二維碼登錄。

登錄后,，進(jìn)入新建項(xiàng)目的頁面,，可以新建不同的項(xiàng)目，默認(rèn)是新建小程序項(xiàng)目,。

點(diǎn)擊右側(cè)的+號,，就跳出了新建小程序的頁面。

如果直接新建小程序,，會生成一個完整的項(xiàng)目腳手架,。對于初學(xué)者來說，這樣反而不利于掌握各個文件的作用,。更好的學(xué)習(xí)方法是,，自己從頭手寫每一行代碼，然后切換到“導(dǎo)入項(xiàng)目”的選項(xiàng),，將其導(dǎo)入到開發(fā)者工具,。

導(dǎo)入時，需要給小程序起一個名字,，并且填寫項(xiàng)目代碼所在的目錄,，以及前面申請的 AppID。

五,、 hello world 示例

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

第一步，新建一個小程序的項(xiàng)目目錄,。名字可以隨便起,，這里稱為wechat-miniprogram-demo,。

你可以在 Windows Terminal 里面執(zhí)行下面的命令,，新建并進(jìn)入該目錄。

第二步,，在該目錄里面,，新建一個腳本文件app.js。這個腳本用于對整個小程序進(jìn)行初始化。

app.js內(nèi)容只有一行代碼,。

App({});

上面代碼中,，App由小程序原生提供，它是一個函數(shù),，表示新建一個小程序?qū)嵗?。它的參?shù)是一個配置對象，用于設(shè)置小程序?qū)嵗男袨閷傩?。這個例子不需要任何配置,，所以使用空對象即可。

第三步,，新建一個配置文件app.json,，記錄項(xiàng)目的一些靜態(tài)配置。

app.json采用 JSON 格式,。JSON 是基于 JavaScript 語言的一種數(shù)據(jù)交換格式,，只有五條語法規(guī)則，非常簡單,，不熟悉 JSON 的同學(xué)可以參考這篇教程^[5],。

app.json文件的內(nèi)容，至少必須有一個pages屬性,，指明小程序包含哪些頁面,。

上面代碼中，pages屬性是一個數(shù)組,，數(shù)組的每一項(xiàng)就是一個頁面,。這個示例中，小程序只有一個頁面,，所以數(shù)組只有一項(xiàng)pages/home/home,。

pages/home/home是一個三層的文件路徑。

1.所有頁面都放在pages子目錄里面,。2.每個頁面有一個自己的目錄,，這里是pages下面的home子目錄，表示這個頁面叫做home,。頁面的名字可以隨便起,，只要對應(yīng)的目錄確實(shí)存在即可。3.小程序會加載頁面目錄pages/home里面的home.js文件,，.js后綴名可以省略,，所以完整的加載路徑為pages/home/home。home.js這個腳本的文件名也可以隨便起,，但是習(xí)慣上跟頁面目錄同名,。

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

$ mkdir -p pages/home

然后,，在這個目錄里面新建一個腳本文件home.js,。該文件的內(nèi)容如下。

上面代碼中,，Page由小程序原生提供,，它是一個函數(shù)，用于初始化一個頁面實(shí)例,。它的參數(shù)是一個配置對象,，用于設(shè)置當(dāng)前頁面的行為屬性。這里是一個空對象,，表示不設(shè)置任何屬性,。

第五步，在pages/home目錄新建一個home.wxml文件,。WXML 是微信頁面標(biāo)簽語言,，類似于 HTML 語言，用于描述小程序的頁面,。

home.wxml的內(nèi)容很簡單,，就寫一行hello world。

hello world

到這一步,，就算基本完成了?，F(xiàn)在，打開小程序開發(fā)工具,，導(dǎo)入項(xiàng)目目錄wechat-miniprogram-demo,。如果一切正常，就可以在開發(fā)者工具里面,，看到運(yùn)行結(jié)果了,。

點(diǎn)擊工具欄的“預(yù)覽”或“真機(jī)調(diào)試”按鈕，還可以在你的手機(jī)上面,，查看真機(jī)運(yùn)行結(jié)果,。

這個示例的完整代碼，可以到代碼倉庫^[6]查看,。

六,、WXML 標(biāo)簽語言

上一節(jié)的home.wxml文件，只寫了最簡單的一行hello world,。實(shí)際開發(fā)中,，不會這樣寫，而是要加上各種標(biāo)簽,，以便后面添加樣式和效果,。

小程序的 WXML 語言提供各種頁面標(biāo)簽,。下面,，對home.wxml改造一下,，加上兩個最常用的標(biāo)簽。

上面的代碼用到了兩個標(biāo)簽：<view>和<text>,。

<view>標(biāo)簽表示一個區(qū)塊,，用于跟其他區(qū)塊分隔，類似 HTML 語言的<div>標(biāo)簽,。<text>表示一段行內(nèi)文本,，類似于 HTML 語言的<span>標(biāo)簽，多個<text>標(biāo)簽之間不會產(chǎn)生分行,。

注意,，每個標(biāo)簽都是成對使用，需要有閉合標(biāo)記,，即標(biāo)簽名前加斜杠表示閉合,，比如<view>的閉合標(biāo)記是</view>。如果缺少閉合標(biāo)記,，小程序編譯時會報錯,。

由于我們還沒有為頁面添加任何樣式，所以頁面的渲染效果跟上一節(jié)是一樣的,。后面添加樣式時,，大家就可以看到標(biāo)簽的巨大作用。

七,、小程序的項(xiàng)目結(jié)構(gòu)

總結(jié)一下,，這個示例一共有4個文件，項(xiàng)目結(jié)構(gòu)如下,。

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

這就是最簡單,、最基本的小程序結(jié)構(gòu)。所有的小程序項(xiàng)目都是這個結(jié)構(gòu),，在上面不斷添加其他內(nèi)容,。

這個結(jié)構(gòu)分成兩層：描述整體程序的頂層 app 腳本，以及描述各個頁面的 page 腳本,。

九,、項(xiàng)目配置文件 app.json

頂層的app.json文件用于整個項(xiàng)目的配置，對于所有頁面都有效,。

除了前面提到的必需的pages屬性,，app.json文件還有一個window屬性，用來設(shè)置小程序的窗口,。window屬性的值是一個對象,，其中有三個屬性很常用,。

·navigationBarBackgroundColor：導(dǎo)航欄的顏色，默認(rèn)為#000000（黑色）,?！?code>navigationBarTextStyle：導(dǎo)航欄的文字顏色，只支持black（黑色）或white（白色）,，默認(rèn)為white,。·navigationBarTitleText：導(dǎo)航欄的文字,，默認(rèn)為空,。

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

上面代碼中，window屬性設(shè)置導(dǎo)航欄的背景顏色為紅色（#ff0000）,，文本顏色為白色（white）,，標(biāo)題文字為“小程序 Demo”。

開發(fā)者工具導(dǎo)入項(xiàng)目代碼,，就可以看到導(dǎo)航欄變掉了,。

這個示例的完整代碼，可以到代碼倉庫^[7]查看,。

除了窗口的樣式,，很多小程序的頂部或尾部，還有選項(xiàng)欄,，可以切換到不同的選項(xiàng)卡,。

這個選項(xiàng)欄，也是在app.json里面設(shè)置,，使用tabBar屬性,，這里就不展開了。

如果你看到了結(jié)尾,，說明真的對小程序開發(fā)非常感興趣,。今天就講到這里，下一篇將講解如何設(shè)置基本的頁面樣式,，做出用戶界面 UI,。

（完）

References

[1]2019年底統(tǒng)計: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]小程序開發(fā)工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

[5]這篇教程:https:///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