您好,登錄后才能下訂單哦!
這篇文章主要介紹微信小程序開發(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、全局變量和配置信息統(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)一管理可配置的信息和變量;
erroList.js:接口報錯錯誤碼
匹配列表文件;
globalData.js:全局變量
統(tǒng)一管理文件(相當于vuex);
keys.js:可配置系統(tǒng)信息管理文件(全局常量命名等);
pages文件夾:小程序頁面文件管理文件夾(每個頁面一個子文件夾目錄);
router文件夾:路由管理文件件;
router.js:對微信小程序5種路由導航
api的封裝;
routerConfig.js:頁面路由名稱和路徑匹配配置文件;
routerFilter.js:路由前置攔截
封裝;
servers文件件:接口請求服務管理文件夾;
request.js:對wx.request
的Promise
封裝;
xxx.js:對應模塊的接口管理文件;
apis文件夾:request請求封裝管理和接口api配置管理文件夾;
requestFilter.js:接口請求和響應攔截
封裝文件;
二、路由跳轉和路由守衛(wèi)封裝
1、路由跳轉封裝
??微信小程序官方文檔為開發(fā)者提供了5種路由跳轉的api,每一種都有其特殊的用法:
??根據(jù)其用法,我們對路由api進行如下封裝:微信小程序路由跳轉最后對應push、replace、pop、relaunch、switchTab
;routes
對應routeConfig.js中路由路徑的配置;routerFilter
對應routerFilter.js文件,對路由跳轉之前的邏輯進行處理;
export const routes = { INDEX: "/pages/index/index", TEST: "/pages/test/test", }export default {...routes};
export default () => { ··· //路由跳轉前邏輯處理}
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
形式豈不美哉:
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)一管理輸出:
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中可以做很多對報錯的處理,這里用一個簡單的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ù)堅決封裝,對于該分模塊管理的配置堅決分塊管理:
微信小程序中全局的數(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屬于個人開發(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ā)的技巧”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。