1.2　上手前的準備工作

“工欲善其事，必先利其器”。在介紹完了小程序后，我們再來了解一下想要開發小程序前需要準備什么。本節我們分別對需要掌握的基礎技術、安裝必備的工具和如何申請小程序賬號進行講解。

1.2.1　需要掌握的技術

微信小程序的WXML、WXSS、WXS與前端的那一套很像，所以讀者至少需要掌握HTML、CSS、JS的基礎知識，如果對這些還不太了解，建議先花幾天時間學習一下。在此基礎之上，如果有某些前端框架（如Angular、React、Vue等）的使用經驗，則學習起小程序來會更加游刃有余。

1.2.2　申請小程序

申請小程序和公眾號一樣，要去微信公眾平臺，網站地址為https://mp.weixin.qq.com。

（1）在首頁單擊右上角的“立即注冊”按鈕，打開選擇頁面。需要注意的是，賬號類型后期無法更改，本例選擇“小程序”選項，之后填寫自己的郵箱進行注冊并激活就可以了，如圖1.2所示。

圖1.2　賬號類型選擇

（2）根據賬號主體類型不同，還需要進行信息登記，好消息是個人可以申請（不一定必須是企業）。同樣，主體類型也是不可改變的，如果填錯就需要換一個郵箱重新注冊。不同主題類型說明如圖1.3所示。

圖1.3　賬號主題類型選擇說明

（3）申請完畢之后即可進入小程序管理頁面，將信息填寫完畢會顯示已完成。內容基本上都是小程序名、小程序頭像、簡介等。這里還要提示一下，名稱、頭像等大多數設置項基本都有修改次數限制，所以要考慮好了再填。完成后的界面如圖1.4所示。

（4）到這里，申請微信小程序可以說是告一段落了。此時，需要把小程序ID找出來，之后的開發過程中會用到。單擊左側列表的“開發→開發設置”選項，即可看到小程序ID，如圖1.5所示。

圖1.4　微信小程序管理頁面

圖1.5　微信小程序ID

1.2.3　安裝Node.js和NPM

Node.js是一個基于Chrome V8引擎的JavaScript運行環境，而NPM（Node Package Manager，node包管理器）是Node.js默認的以JavaScript編寫的軟件包管理系統。安裝方法十分簡單，打開Node.js中文網的網址http://nodejs.cn/download/，選擇對應自己操作系統版本的Node.js安裝包即可下載，如圖1.6所示。

圖1.6　Node.js與NPM下載

在安裝Node.js的過程中，NPM會隨著自動安裝到系統中。在命令行中輸入“npm --version”“node --version”可以檢測是否成功安裝，如圖1.7所示。

圖1.7　查看當前操作系統安裝的Node.js、NPM版本

如果在使用NPM安裝第三方庫時經常失敗，可以選擇使用CNPM。在安裝或升級完Node.js后，運行以下命令可以安裝淘寶提供的NPM軟件包庫的鏡像CNPM：

     npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝命令的成功輸出如圖1.8所示。

圖1.8　使用NPM安裝CNPM

命令成功執行完畢以后，使用NPM命令的地方就都可以用CNPM來代替了。接下來文中的內容依然使用NPM命令。安裝了CNPM的讀者可以自行替換。

到目前為止，Node.js和NPM的安裝就算完成了。最后，讀者可以檢查本地的版本號，盡量保證所使用的版本大于或等于筆者的版本。

1.2.4　安裝Git

Git是一個開源的分布式版本控制系統，由Linux之父Linus Torvalds所開發。目前基本所有的開源項目都發布在使用Git的Github網站上，包括Angular這個開源項目也上傳到了該平臺，其Github的網址為https://github.com/angular/angular。

在使用開發微信小程序的過程中，如果要使用第三方UI庫，就需要在操作系統中安裝好Git。對于Git的安裝首選，當然是從官方網站獲取，打開官方網站，選擇對應的操作系統下載即可，如圖1.9所示。

圖1.9　Git的官方下載網站

安裝完畢后輸入以下指令，驗證Git是否成功安裝并檢查安裝的版本，如圖1.10所示。

     git -–version

圖1.10　驗證Git是否成功安裝以及被安裝的版本

1.2.5　微信開發者工具的安裝

微信小程序官方推出了自己的開發工具。官方上的工具一般功能都會比較全面，所以本書的開發工具就直接選擇它了。首先打開瀏覽器，下載地址是https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，如圖1.11所示。

圖1.11　微信開發者工具下載

微信開發者工具分為多個版本，本書以穩定版作為教學工具，讀者也可以根據自己的需求進行選擇。