1月9日凌晨，在經(jīng)過了長(zhǎng)達(dá)180多天的內(nèi)測(cè)之后，微信小程序終于正式上線。這個(gè)設(shè)定為“無處不在”的產(chǎn)品，終于來了。

面對(duì)鋪天蓋地的解讀，小編我也是按耐不住躁動(dòng)的雙手，想為眾多開發(fā)者支招，在開發(fā)小程序的過程中，少走彎路。

小程序的代碼寫完了， 突然冒出個(gè)Bug，這真是讓人百感交集、痛不欲生。那么，如何平心靜氣地解決每一個(gè)Bug，提升代碼質(zhì)量，是每個(gè)程序猿需要提高的自我修養(yǎng)。

今天，我就要給大家介紹，提升代碼質(zhì)量問題的法寶，讓程序猿能把更多修BUG的時(shí)間，用來建設(shè)小家庭上。

一、 小程序開發(fā)工具介紹

1. 導(dǎo)語

微信小程序已于1月9日正式發(fā)布，但很多開發(fā)者還不是很了解如何開發(fā)小程序代碼，本文通過華為軟件開發(fā)云對(duì)小程序進(jìn)行代碼檢查為例做個(gè)簡(jiǎn)單介紹。

2.小程序開發(fā)者工具介紹

1.1 小程序開發(fā)工具的下載地址

在正式開發(fā)之前需要安裝微信小程序的開發(fā)工具，這里分享一下小程序開發(fā)者工具的下載地址：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359

1.2 小程序開發(fā)工具的界面

下載完成后直接安裝，界面如下：

與傳統(tǒng)的IDE界面布局風(fēng)格不同，菜單欄在左側(cè)的豎條，分為編輯、調(diào)試、和項(xiàng)目。編輯區(qū)可以對(duì)當(dāng)前項(xiàng)目進(jìn)行代碼編寫和文件的添加、刪除以及重命名等基本操作。工具目前提供了5種文件類型的編輯：wxml、wxss、js、json以及圖片文件，擁有自動(dòng)保存、自動(dòng)補(bǔ)齊、實(shí)時(shí)預(yù)覽等功能。

1.3 開發(fā)者工具支持哪些快捷鍵?

下面是總結(jié)的開發(fā)工具所支持的常用的快捷鍵方式：

3.小程序的項(xiàng)目結(jié)構(gòu)介紹

3.1 組成小程序項(xiàng)目的元素

再來說一下項(xiàng)目結(jié)構(gòu)，整個(gè)項(xiàng)目由以幾部分組成：

app.js 主要是全局公共的js方法聲明及調(diào)用所在的文件，是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。程序從“骨架”成為“血肉之軀”的正是js的作用。js做一些動(dòng)態(tài)的東西，比如請(qǐng)求數(shù)據(jù)，控制元素上下移動(dòng)，判斷用戶輸入密碼是否安全等等。

app.json 是是對(duì)整個(gè)小程序的全局配置。所有的頁(yè)面都要在此注冊(cè)，不然不允許訪問。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。

app.wxss 是小程序全局的css文件，是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

pages下是對(duì)應(yīng)著所有頁(yè)面，每個(gè)頁(yè)面可以添加以上三種類型的文件。另外還有wxml類型文件。wxml是一種類xml的結(jié)構(gòu)化文本，描述了小程序頁(yè)面有哪些元素，比如一個(gè)文章需要有標(biāo)題、作者、時(shí)間、正文，但是不關(guān)心這些元素怎么排列。

utils 是我們公共的js存放的地方，因?yàn)槲⑿判〕绦蛞?，每個(gè)js文件里的方法不可以直接引用或調(diào)用，必須要用 module.exports方法導(dǎo)出，這樣pages 下的.js文件才可以調(diào)用到我們?cè)谶@里寫的js方法。

attachment下存放的是圖片等資源文件(單個(gè)不大于1M)。

3.2 如何編寫js文件?

那么以上語法規(guī)則最復(fù)雜的就是js文件，下面我們重點(diǎn)了解一下js文件。

3.2.1 app.js文件

app.js是整個(gè)小程序的入口文件，也是控制整個(gè)小程序生命周期的文件。App.js用App()來實(shí)現(xiàn)對(duì)整個(gè)程序的注冊(cè)，同時(shí)App()里面還實(shí)現(xiàn)了對(duì)小程序生命周期的監(jiān)控函數(shù)：

當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進(jìn)入了后臺(tái);當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過高，才會(huì)被真正的銷毀。簡(jiǎn)單地說，前臺(tái)就是你在操作小程序時(shí);后臺(tái)就是你離開了小程序，去打開其他手機(jī)服務(wù)時(shí)，這時(shí)小程序就隱藏到后臺(tái)。

3.2.2 index.js文件

小程序中每一個(gè)頁(yè)面可以放在一個(gè)文件夾中，這個(gè)文件夾中一般包括4個(gè)文件：.js, .json, .wxml, .wxss。官方建議這四個(gè)文件的名字***和文件夾的名字一致，這樣便于框架自動(dòng)查找。

每個(gè)頁(yè)面都需要注冊(cè)，index.js用Page()這個(gè)函數(shù)來注冊(cè)一個(gè)頁(yè)面，它接受一個(gè)object參數(shù)，用這個(gè)參數(shù)來指定頁(yè)面的初始數(shù)據(jù)，生命周期函數(shù)，事件處理函數(shù)。Page()內(nèi)部參數(shù)說明：

4.如何在軟件開發(fā)云上進(jìn)行小程序代碼檢查?

小程序的代碼寫好后，我們需要對(duì)js文件做靜態(tài)代碼檢查，檢查語法和邏輯是否有錯(cuò)誤的地方。下面是介紹如何在軟件開發(fā)云上對(duì)小程序進(jìn)行代碼檢查。

4.1 創(chuàng)建代碼托管倉(cāng)庫(kù)

在軟件開發(fā)云“配置管理”服務(wù)創(chuàng)建代碼倉(cāng)庫(kù)，使用git工具可以將小程序代碼上傳到云端進(jìn)行安全可靠的版本管理。

4.2 創(chuàng)建代碼檢查任務(wù)

在軟件開發(fā)云“代碼檢查”服務(wù)創(chuàng)建一個(gè)代碼檢查任務(wù)，選擇“JS”檢查規(guī)則。新建成功后，點(diǎn)擊“開始檢查”。

4.3 查看代碼檢查結(jié)果

檢查完畢，可以看到，檢查結(jié)果包括了詳盡的代碼出錯(cuò)定位、問題描述、修改建議。

4.4 定位并修改代碼行

回到微信開發(fā)者工具編輯區(qū)查看源碼，定位出問題的代碼行完成修改。

5.結(jié)語

靜態(tài)代碼檢查是開發(fā)工作中不可缺少的一環(huán)，畢竟對(duì)于程序化的工作人的眼睛是不可靠的，更何況是自己的眼睛看自己的代碼。即使***的運(yùn)行結(jié)果通過，但可能存在一些未定義的變量、定義了但***沒用過的變量、分號(hào)有沒有加以及其他的問題。

華為軟件開發(fā)云提供精準(zhǔn)、全面、高效的的代碼檢查服務(wù)，為微信小程序開發(fā)保駕護(hù)航。