??關於微信小程式開發(fā)一直想寫一篇相關的文章總結和記錄下，結果拖延癥犯了遲遲沒有下筆；這不最近天氣不錯，於是找一個空閒的下午將這篇文章輸出下（好像跟天氣沒啥關係），那我們就開始吧！

注意：本文預設開發(fā)者對微信小程式開發(fā)有一定語法基礎。 小程式開發(fā)文件

相關免費學習推薦：微信小程式開發(fā)

#微信小程式小結

??在接觸的微信小程式開發(fā)過程中，不難發(fā)現(xiàn)微信小程式為了方便開發(fā)人員入手對很多底層api進行了很好的封裝，例如針對介面請求的wx.request()，針對路由跳轉和頁面導航的wx.switchTab、wx.navigateTo···等。雖然在某種程度上簡化了開發(fā)，但是對於專案工程的系統(tǒng)化建置還是不夠的，因此本人在對比以前基於Vue開發(fā)專案的經(jīng)驗和自身的開發(fā)習慣，總結出如下3點可供參考：

• 1、全域變數(shù)與設定資訊統(tǒng)一管理；

• #2、封裝路由守衛(wèi)相關api：vue-router的router.beforeEach()和router.afterEach()真的香；

• 3、介面請求公用資訊進一步擷取封裝；

• 4、封裝介面的請求和回應攔截api：axios的axios.interceptors.request.use()和axios. interceptors.response.use()用過的都說好；

#從上述四點出發(fā)，對微信小程式初始化工程進行規(guī)範優(yōu)化，能夠很大程度提高開發(fā)效率和進行專案維護管理。封裝的好處不僅體現(xiàn)在呼叫的方便上，也體現(xiàn)在管理的方便上，同時，公共操作集中處理，很大程度減少繁雜重複程式碼。

一、專案初始化

???新建微信小程式項目，在專案下新建下列目錄與檔案：

• config資料夾：統(tǒng)一管理可設定的資訊和變數(shù)；
  • erroList.js：介面報錯錯誤碼符合清單檔案；
  • globalData.js：全域變數(shù)統(tǒng)一管理檔案（相當於vuex）；
  • keys.js：可設定係統(tǒng)資訊管理檔案（全域常數(shù)命名等）；
• pages資料夾：小程式頁面檔案管理資料夾（每個頁面一個子資料夾目錄）；
• router資料夾：路由管理檔案件;
  • router.js：對微信小程式5種路由導航api的封裝；
  • routerConfig.js：頁面路由名稱和路徑匹配設定檔;
  • routerFilter.js：路由前置攔截封裝;
• servers檔案件：介面請求服務管理資料夾;
  • apis資料夾：request請求封裝管理和介面api配置管理資料夾;
    • request.js：對wx.request的Promise封裝;
    • xxx.js：對應模組的介面管理檔；
  • requestFilter.js：介面請求和回應攔截封裝檔；
• 其他都是初始化預設檔;

二、路由跳轉與路由守衛(wèi)封裝

#1、路由跳轉封裝

??微信小程式官方文件為開發(fā)者提供了5種路由跳轉的api，每一種都有其特殊的用法：

??根據(jù)其用法，我們對路由api進行以下封裝：微信小程式路由跳轉最後對應push、replace、pop、relaunch、switchTab;routes對應routeConfig.js中路由路徑的設定；routerFilter對應routerFilter.js文件，對路由跳轉之前的邏輯進行處理；

routeConfig.js（每次新增頁面後需要手動新增）：

export?const?routes?=?
??{
????INDEX:?"/pages/index/index",
????TEST:?"/pages/test/test",
??}export?default?{...routes};

routerFilter.js：

export?default?()?=>?{
??···??//路由跳轉前邏輯處理}

router.js（routerFilter負責路由跳轉前公共操作處理，在success和fail中對路由跳轉後的公共操作進行處理）：

import?routes?from?"../router/routerConfig";import?routerFilter?from?"./routerFilter"/**
?*?對wx.navigateTo的封裝
?*?@param?{路由}?path?
?*?@param?{參數(shù)}?params?
?*?@param?{事件}?events?
?*/const?push?=?(path,?params,?events)?=>?{
??routerFilter()
??wx.navigateTo({
????url:?routes[path]?+?`?query=${JSON.stringify(params)}`,
????events:?events,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對wx.redirectTo的封裝
?*?@param?{路由}?path?
?*?@param?{參數(shù)}?params?
?*/const?replace?=?(path,?params)?=>?{
??routerFilter()
??wx.redirectTo({
????url:?routes[path]?+?`?query=${JSON.stringify(params)}`,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對wx.navigateBack的封裝
?*?@param?{返回的層級}?number?
?*/const?pop?=?(number)?=>?{
??routerFilter()
??wx.navigateBack({
????delta:?number,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對wx.reLaunch的封裝
?*?@param?{路由}?path?
?*?@param?{參數(shù)}?params?
?*/const?relaunch?=?(path,?params)?=>?{
??routerFilter()
??wx.reLaunch({
????url:?routes[path]?+?`?query=${JSON.stringify(params)}`,
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}/**
?*?對tabbar的封裝
?*?@param?{路由}?path?
?*/const?switchTab?=?(path)?=>?{
??routerFilter()
??wx.switchTab({
????url:?routes[path],
????success(res)?{
??????console.log(res);
????},
????fail(err)?{
??????console.log(err);
????}
??})}module.exports?=?{
??push,
??replace,
??pop,
??relaunch,
??switchTab}

#2、全域註冊和使用

在app.js中對封裝的路由api進行全域註冊：

import?router??from?"./router/router.js"//全局注冊wx.router?=?router

在頁面邏輯中使用：

//index頁面跳轉test頁面?gotoTest(){
???wx.router.push("TEST")}

三、介面請求Promise封裝

??對於同一個專案而言，微信小程式apiwx.request()中許多參數(shù)都是相同的，如果直接使用，需要將這些重複參數(shù)一遍又一遍的copy，雖然copy很簡單，但是當有一個參數(shù)改變了需要找到所有接口一個一個修改，維護起來費勁，再者看著也難受呀；

??借鑒axios對請求的封裝，將wx.request()封裝為Promise形式豈不美哉：

request.js：

import?formatError?from?"../requestFilter"const?app?=?getApp()/**
?*?接口請求封裝
?*?@param?{請求方式}?method?
?*?@param?{請求的url}?url?
?*?@param?{請求傳遞的數(shù)據(jù)}?data?
?*/const?request?=?(method,?url,?data)?=>?{
??//設置請求頭
??const?header?=?{
????···??}
??//promise封裝一層，使得調用的時候直接用then和catch接收
??return?new?Promise((resolve,?reject)?=>?{
????wx.request({
??????method:?method,
??????url:?app.globalData.host?+?url,?//完整的host
??????data:?data,
??????header:?header,
??????success(res)?{
????????//對成功返回的請求進行數(shù)據(jù)管理和統(tǒng)一邏輯操作
????????···????????resolve(res.data)
??????},
??????fail(err)?{
????????wx.showToast({
??????????title:?'網(wǎng)絡異常，稍后再試！',
??????????mask:?true,
??????????icon:?'none',
??????????duration:?3000
????????})
??????}
????})
??})}export?default?request;

具體使用

以user.js為例：

import?request?from?"./request";//?獲取用戶openidexport?const?usrInfos?=?data?=>?request("POST",?"/user/usrInfos",?data);

index頁面調用：

//index.js//獲取應用實例const?app?=?getApp()import?{?usrInfos?}?from?"../../servers/apis/user"Page({
??onLoad:?function?()?{
????//獲取用戶信息
????usrInfos({
??????uid:?"xxxx"
????})
??????.then(res?=>?{
????????console.log(res)
??????})
??????.catch(err?=>?{
????????console.log(err)
??????})
??}})

四、接口的請求和響應攔截封裝

??axios的axios.interceptors.request.use()和axios.interceptors.response.use()分別對應接口請求前的攔截處理和數(shù)據(jù)響應后的攔截處理；根據(jù)這個原理我們對微信小程序的響應也做攔截封裝，對接口請求返回錯誤進行統(tǒng)一管理輸出：

request.js

import?formatError?from?"../requestFilter"const?app?=?getApp()···const?request?=?(method,?url,?data)?=>?{
??···??return?new?Promise((resolve,?reject)?=>?{
????wx.request({
??????···??????success(res)?{
????????//對成功返回的請求進行數(shù)據(jù)管理和統(tǒng)一邏輯操作
????????if(res.statusCode?===?200){?//請求返回成功
??????????if(res.data?&&?res.data.code?===?"SUCCESS"){?//后端對接口請求處理成功，返回數(shù)據(jù)給接口調用處
????????????resolve(res.data)??//then接收
??????????}else{		//后端對也請求判斷后認為不合邏輯報錯
????????????formatError(res)???//統(tǒng)一的報錯處理邏輯
????????????reject(res.data)?	//catch接收
??????????}?
????????}else{
??????????reject(res.data)		//catch接收
????????}
??????},
??????fail(err)?{		//請求不通報錯
????????wx.showToast({
??????????title:?'網(wǎng)絡異常，稍后再試！',
??????????mask:?true,
??????????icon:?'none',
??????????duration:?3000
????????})
??????}
????})
??})}export?default?request;

requestFilter.js

requestFilter.js中可以做很多對報錯的處理，這里用一個簡單的toast處理示范下：

/**
?*?對接口返回的后端錯誤進行格式轉化
?*?@param?{接口成功返回的數(shù)據(jù)}?res?
?*/const?formatError?=?(err?=>{
??wx.showToast({
????title:?err.message,
????mask:?false,
????icon:?'none',
????duration:?3000
??})}export?default?formatError;

對報錯進行統(tǒng)一處理需要明確數(shù)據(jù)規(guī)：

• 制定統(tǒng)一的報錯碼管理規(guī)范；
• 制定前后端統(tǒng)一的接口請求數(shù)據(jù)返回格式；

五、全局數(shù)據(jù)管理

??對于數(shù)據(jù)的管理在小項目的開發(fā)中顯得不那么重要，但是隨著項目越來越大，數(shù)據(jù)越來越多，一個很好的數(shù)據(jù)管理方案能夠有效地避免很多bug，這也是vuex能夠在vue生態(tài)中占有一席之地的原因。秉承著合理管理數(shù)據(jù)的原則，對于該封裝的數(shù)據(jù)堅決封裝，對于該分模塊管理的配置堅決分塊管理：

globalData.js

微信小程序中全局的數(shù)據(jù)管理放在app.js的globalData屬性中，當數(shù)據(jù)太多或者app.js邏輯太復雜時，將全局數(shù)據(jù)提取出來單獨管理的確是個好方案：

export?default?{
??···
??host:?"http://www.wawow.xyz/api/test",?//接口請求的域名和接口前綴?
??hasConfirm:?""?//是否已經(jīng)有了confirm實例
??currentPage:?""
??···}

keys.js

keys.js屬于個人開發(fā)中的習慣操作，將項目中可能用到的一些常量名稱在此集中管理起來，十分方便調用和修改維護：

export?default?{
??···??TOKEN:?"token",
??STORAGEITEM:?"test"
??···}

全局引用和注冊

引入app.js:

import?router??from?"./router/router.js"import?keys?from?"./config/keys"import?globalData?from?"./config/globalData"//全局注冊wx.router?=?router
wx.$KEYS?=?keys//app.jsApp({
??//監(jiān)聽小程序初始化
??onLaunch(options)?{
????//獲取小程序初始進入的頁面信息
????let?launchInfos?=?wx.getLaunchOptionsSync()
????//將當前頁面路由存入全局的數(shù)據(jù)管理中
????this.globalData.currentPage?=?launchInfos.path??},
??···??//全局數(shù)據(jù)存儲
??globalData:?globalData})

使用

在頁面代碼邏輯中可以通過app.globalData.host，wx.$KEYS.TOKEN方式進行調用；

六、總結

??上述關于微信小程序開發(fā)的幾個方面都是在實踐中學習和總結的，技術層面的實現(xiàn)其實很容易，但是個人覺得開發(fā)規(guī)范項目工程構建才是一個項目的重要基礎；完善的規(guī)范能夠有效的提高開發(fā)效率和開發(fā)者之間非必要的扯皮！合理的項目工程構建能夠優(yōu)化開發(fā)邏輯，提高代碼邏輯易讀性，減少后期項目的管理時間，同時給予項目更大的擴展性。

相關學習推薦：小程序開發(fā)教程

以上是讓微信小程式開發(fā)如魚得水（實例）的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！