2017年1月9日凌晨，在經過了長達180多天的內測之後，微信小程序終於正式上線。這個設定為“無處不在”的產品，終於來了。
面對鋪天蓋地的解讀，小編我也是按耐不住躁動的雙手，想為眾多開發者支招，在開發小程序的過程中，少走彎路。
小程序的代碼寫完了， 突然冒出個Bug，這真是讓人百感交集、痛不欲生。那麼，如何平心靜氣地解決每一個Bug，提升代碼質量，是每個程序猿需要提高的自我修養。
今天，我就要給大家介紹，提升代碼質量問題的法寶，讓程序猿能把更多修BUG的時間，用來建設小家庭上。
一、 小程序開發工具介紹
1.小程序開發工具的下載地址
在正式開發之前需要安裝微信小程序的開發工具。
2.小程序開發工具的界面
下載完成後直接安裝，界面如下：
與傳統的IDE界面佈局風格不同，菜單欄在左側的豎條，分為編輯、調試、和項目。編輯區可以對當前項目進行代碼編寫和文件的添加、刪除以及重命名等基本操作。
工具目前提供了5種文件類型的編輯：wxml、wxss、js、json以及圖片文件，擁有自動保存、自動補齊、實時預覽等功能。
3.開發者工具支持哪些快捷鍵？
下面是總結的開發工具所支持的常用的快捷鍵方式
二、 小程序的項目結構介紹
1. 組成小程序項目的元素
再來說一下項目結構，整個項目由以幾部分組成：
app.js 主要是全局公共的js方法聲明及調用所在的文件，是小程序的腳本代碼。我們可以在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。程序從“骨架”成為“血肉之軀”的正是js的作用。js做一些動態的東西，比如請求數據，控制元素上下移動，判斷用戶輸入密碼是否安全等等。
app.json 是是對整個小程序的全局配置。所有的頁面都要在此註冊，不然不允許訪問。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。
app.wxss 是小程序全局的css文件，是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。
pages下是對應著所有頁面，每個頁面可以添加以上三種類型的文件。另外還有wxml類型文件。wxml是一種類xml的結構化文本，描述了小程序頁面有哪些元素，比如一個文章需要有標題、作者、時間、正文，但是不關心這些元素怎麼排列。
utils 是我們公共的js存放的地方，因為微信小程序要求，每個js文件裡的方法不可以直接引用或調用，必須要用 module.exports方法導出，這樣pages 下的.js文件才可以調用到我們在這裡寫的js方法。
attachment下存放的是圖片等資源文件（單個不大於1M）。
2. 如何編寫js文件？
那麼以上語法規則最複雜的就是js文件，下面我們重點了解一下js文件。
2.1 app.js文件
app.js是整個小程序的入口文件，也是控制整個小程序生命週期的文件。App.js用App()來實現對整個程序的註冊，同時App()裡面還實現了對小程序生命週期的監控函數：
當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷燬，而是進入了後臺;當再次進入微信或再次打開小程序，又會從後臺進入前臺。只有當小程序進入後臺一定時間，或者系統資源佔用過高，才會被真正的銷燬。簡單地說，前臺就是你在操作小程序時;後臺就是你離開了小程序，去打開其他手機服務時，這時小程序就隱藏到後臺。
2.2 index.js文件
小程序中每一個頁面可以放在一個文件夾中，這個文件夾中一般包括4個文件：.js, .json, .wxml, .wxss。官方建議這四個文件的名字最好和文件夾的名字一致，這樣便於框架自動查找。
每個頁面都需要註冊，index.js用Page()這個函數來註冊一個頁面，它接受一個object參數，用這個參數來指定頁面的初始數據，生命週期函數，事件處理函數。Page()內部參數說明：
閱讀更多 智業科技招商經理 的文章
