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

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

相關(guān)免費(fèi)學(xué)習(xí)推薦：微信小程式開發(fā)

#微信小程式小結(jié)

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

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

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

• 3、介面請求公用資訊進(jìn)一步擷取封裝；

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

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

一、專案初始化

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

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

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

#1、路由跳轉(zhuǎn)封裝

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

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

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

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

routerFilter.js：

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

router.js（routerFilter負(fù)責(zé)路由跳轉(zhuǎn)前公共操作處理，在success和fail中對路由跳轉(zhuǎn)後的公共操作進(jìn)行處理）：

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進(jìn)行全域註冊：

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

在頁面邏輯中使用：

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

三、介面請求Promise封裝

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

??借鑒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)?=>?{
??//設(shè)置請求頭
??const?header?=?{
????···??}
??//promise封裝一層，使得調(diào)用的時(shí)候直接用then和catch接收
??return?new?Promise((resolve,?reject)?=>?{
????wx.request({
??????method:?method,
??????url:?app.globalData.host?+?url,?//完整的host
??????data:?data,
??????header:?header,
??????success(res)?{
????????//對成功返回的請求進(jìn)行數(shù)據(jù)管理和統(tǒng)一邏輯操作
????????···????????resolve(res.data)
??????},
??????fail(err)?{
????????wx.showToast({
??????????title:?'網(wǎng)絡(luò)異常，稍后再試！',
??????????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頁面調(diào)用：

//index.js//獲取應(yīng)用實(shí)例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)
??????})
??}})

四、接口的請求和響應(yīng)攔截封裝

??axios的axios.interceptors.request.use()和axios.interceptors.response.use()分別對應(yīng)接口請求前的攔截處理和數(shù)據(jù)響應(yīng)后的攔截處理；根據(jù)這個(gè)原理我們對微信小程序的響應(yīng)也做攔截封裝，對接口請求返回錯(cuò)誤進(jìn)行統(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)?{
????????//對成功返回的請求進(jìn)行數(shù)據(jù)管理和統(tǒng)一邏輯操作
????????if(res.statusCode?===?200){?//請求返回成功
??????????if(res.data?&&?res.data.code?===?"SUCCESS"){?//后端對接口請求處理成功，返回?cái)?shù)據(jù)給接口調(diào)用處
????????????resolve(res.data)??//then接收
??????????}else{		//后端對也請求判斷后認(rèn)為不合邏輯報(bào)錯(cuò)
????????????formatError(res)???//統(tǒng)一的報(bào)錯(cuò)處理邏輯
????????????reject(res.data)?	//catch接收
??????????}?
????????}else{
??????????reject(res.data)		//catch接收
????????}
??????},
??????fail(err)?{		//請求不通報(bào)錯(cuò)
????????wx.showToast({
??????????title:?'網(wǎng)絡(luò)異常，稍后再試！',
??????????mask:?true,
??????????icon:?'none',
??????????duration:?3000
????????})
??????}
????})
??})}export?default?request;

requestFilter.js

requestFilter.js中可以做很多對報(bào)錯(cuò)的處理，這里用一個(gè)簡單的toast處理示范下：

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

對報(bào)錯(cuò)進(jìn)行統(tǒng)一處理需要明確數(shù)據(jù)規(guī)：

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

五、全局?jǐn)?shù)據(jù)管理

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

globalData.js

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

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

keys.js

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

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)?{
????//獲取小程序初始進(jìn)入的頁面信息
????let?launchInfos?=?wx.getLaunchOptionsSync()
????//將當(dāng)前頁面路由存入全局的數(shù)據(jù)管理中
????this.globalData.currentPage?=?launchInfos.path??},
??···??//全局?jǐn)?shù)據(jù)存儲
??globalData:?globalData})

使用

在頁面代碼邏輯中可以通過app.globalData.host，wx.$KEYS.TOKEN方式進(jìn)行調(diào)用；

六、總結(jié)

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

??有需要源碼的可以關(guān)注微信公眾號 哇喔WEB 回復(fù) "wxmp"獲取；

??歡迎大家討論留言、進(jìn)行補(bǔ)充！

相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程

以上是讓微信小程式開發(fā)如魚得水的方法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！