【小程序】小程序優化-代碼篇

本文主要是從代碼方面跟你們分享我本身在開發小程序的一些作法，但願能幫到一些同窗。

前言

不知道你們有沒有這種體會，剛到公司時，領導要你維護以前別人寫的代碼，你看着別人寫的代碼陷入了深深的思考：「這誰寫的代碼，這麼殘忍」

俗話說「不怕本身寫代碼，就怕改別人的代碼」，一言不和就改到你吐血，因此爲了別人好，也爲了本身好，代碼規範，從我作起。

項目目錄結構

在開發以前，首先要明確你要作什麼，不要一上來就是幹，我們先把項目結構搭好。通常來講，開發工具初始化的項目基本能夠知足需求，若是你的項目比較複雜又有必定的結構的話就要考慮分好目錄結構了，個人作法以下圖：

• component文件夾是放自定義組件的
• pages放頁面
• public放公共資源如樣式表和公共圖標
• units放各類公共api文件和封裝的一些js文件
• config.js是配置文件

這麼分已經足以知足個人需求，你能夠根據本身的項目靈活拆分。

配置文件

個人項目中有個config.js，這個文件是用來配置項目中要用到的一些接口和其它私有字段，咱們知道在開發時一般會有測試環境和正式環境，而測試環境跟正式環境的域名可能會不同，若是不作好配置的話直接寫死接口那等到上線的時候一個個改會很是麻煩，因此作好配置是必需的，文件大體以下：

首先是定義域名，而後在config對象裏定義接口名稱，getAPI(key)是獲取接口方法，最後經過module暴露出去就能夠了.引用的時候只要在頁面引入 import domain from '../../config';，而後wx.request的時候url的獲取方式是 domain.getAPI('')

代碼健壯性、容錯性

例子

代碼的健壯性、容錯性也是咱們應該要考慮的一點，移動端的項目不像pc端的網絡那麼穩定，不少時候網絡一不穩定就決定咱們的項目是否能正常運行，而一個好的項目就必定要有良好的容錯性，就是說在網絡異常或其它因素致使咱們的項目不能運行時程序要有一個友好的反饋，下面是一個網絡請求的例子：

相信多數人請求的方式是這樣，包括我之前剛接觸小程序的時候也是這樣寫，這樣寫不是說很差，而是不太嚴謹，若是可以正常獲取數據那還好，可是一旦請求出現錯誤那程序能夠到此就無法運行下去了，有些比較好的會加上faill失敗回調，但也只是請求失敗時的判斷，在請求成功到獲取數據的這段流程內實際上是還有一些須要咱們判斷的，通常個人作法是這樣：

在請求成功後小程序會進行以下判斷：

• 判斷是否返回200，是則進行一下步操做，不然拋出錯誤
• 判斷數據結構是否完整，是則進行一下步操做，不然拋出錯誤

而後就能夠在頁面根據狀況進行相應的操做了。

定製錯誤提示碼

能夠看到上面的截圖的錯誤打印後面會帶一個gde0或gde1的英文代碼，這個代碼是幹嗎用的呢，實際上是用來報障的，當咱們的小程序上線後可能會遇到一些用戶發來的報障，通常是經過截圖發給咱們，以前沒有作錯誤提示碼的時候可能只是根據一句錯誤提示來定位錯誤，可是不少時候誤提示語都是同樣的，咱們根本不知道是哪裏錯了，這樣一來就不能很快的定位的錯誤，因此加上這樣一個提示碼，到時用戶一發截圖來，咱們只要根據這個錯誤碼就能很快的定位錯誤並解決了，錯誤提示碼建議命名以下：

• 不宜過長，3個字母左右
• 惟一性
• 意義明確

像上面gde表示獲取草稿失敗，後面加上數字表示是哪一步出錯。

模塊化

咱們組內的大神說過， 模塊化的意義在義分治，不在於複用。 以前我覺得模塊化只是爲了能夠複用，其實否則，不管模塊多麼小也是能夠模塊化，哪怕只是一個簡單的樣式也同樣，並是不爲了複用，而是管理起來方便。 不少同窗常常將一些公共的樣式事js放在app.wxss和app.js裏以便調用，這樣作其實有一個壞處，就是維護性比較差，若是是比較小的項目還好，項目一大問題就來了。並且項目是會迭代的，不可能老是一我的開發，可能後面會交接給其餘人開發，因此會形成的問題就是：

• app.wxss和app.js裏的內容只會愈來愈多，由於別人不肯定哪些是沒用的也不敢刪，只能往裏加東西，形成文件臃腫，不利於維護。
• app.wxss和app.js對於每一個頁面都有效，可讀性方面比較差。

因此模塊化的意義就出來了，將公共的部分進行模塊化統一管理，也便於維護。

樣式模塊化

公共樣式根據上面的目錄結構我是放在public裏的css裏，每一個文件命名好說明是哪一個部分的模塊化，好比下面這個就表示一個按鈕的模塊化

前面說過模塊化不在於大小，就算只是一個簡單的樣式也能夠進行模塊化，只要在用到的地方import一下就好了，就知道哪裏有用到，哪裏沒有用到，清晰明瞭。

js模塊化

js模塊化這裏分爲兩個部分的模塊化，一部分是公共js的模塊化，另外一部分是頁面js的模塊化即業務與數據的拆分。

公共js模塊化

比較經常使用的公共js有微信登陸，彈窗，請求等，通常我是放在units文件夾裏，這裏經微信彈窗api爲例：

如圖是在小程序中常常會用到的彈窗提示，這裏進行封裝，定義變量，只要在頁面中引入就能直接調用了，不用每次都寫一大串。好比在請求的時候是這樣用的

toast()就是封裝的彈窗api，這樣看起來是否是清爽多了！

業務與數據模塊化

業務與數據模塊化就是指業務和數據分開，互不影響，業務只負責業務，數據只負責數據，能夠看到頁面會比普通的頁面多了一個api.js

這個文件主要就是用來獲取數據的，而index.js主要用來處理數據，這樣分工明確，相比以往獲取數據和處理數據都在一個頁面要好不少，並且我這裏獲取數據是返回一個promise對象的，也方便處理一些異步操做。

組件化

組件化相信你們都不陌生了，自從小程序支持自定義組件，能夠說是大大地提升了開發效率，咱們能夠將一些公共的部分進行組件化，這部分就不詳細介紹，你們能夠去看文檔。組件化對於咱們的項目來講有很大的好處，並且組件化的可移植性強，從一個項目複用到另外一個項目基本不須要作什麼改動。

總結

這篇文章經過我本身的一些經驗來給你們介紹如何優化本身的代碼，主要有如下幾點

• 分好項目目錄結構
• 作好接口配置文件
• 代碼健壯性、容錯性的處理
• 定製錯誤提示碼方便定位錯誤
• 樣式模塊化和js模塊化
• 組件化

最後放上項目目錄結構的代碼片斷，你們能夠研究一下，有問題一塊兒探討：developers.weixin.qq.com/s/1uVHRDmT7…