這篇文章主要介紹微信小程序開(kāi)發(fā)的技巧,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)公司是專業(yè)的八公山網(wǎng)站建設(shè)公司,八公山接單;提供網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行八公山網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
注意:本文默認(rèn)開(kāi)發(fā)者對(duì)微信小程序開(kāi)發(fā)有一定語(yǔ)法基礎(chǔ)。小程序開(kāi)發(fā)文檔
相關(guān)免費(fèi)學(xué)習(xí)推薦:微信小程序開(kāi)發(fā)
微信小程序小結(jié)
??在接觸的微信小程序開(kāi)發(fā)過(guò)程中,不難發(fā)現(xiàn)微信小程序?yàn)榱朔奖汩_(kāi)發(fā)人員入手對(duì)很多底層api進(jìn)行了很好的封裝,比如針對(duì)接口請(qǐng)求的wx.request()
,針對(duì)路由跳轉(zhuǎn)和頁(yè)面導(dǎo)航的wx.switchTab、wx.navigateTo···
等。雖然在一定程度上簡(jiǎn)化了開(kāi)發(fā),但是對(duì)于項(xiàng)目工程的系統(tǒng)化構(gòu)建還是不夠的,因此本人在對(duì)比以前基于Vue開(kāi)發(fā)項(xiàng)目的經(jīng)驗(yàn)和自身的開(kāi)發(fā)習(xí)慣,總結(jié)出如下3點(diǎn)可供參考:
1、全局變量和配置信息統(tǒng)一管理;
2、封裝路由守衛(wèi)相關(guān)api:vue-router
的router.beforeEach()
和router.afterEach()
真的香;
3、接口請(qǐng)求公共信息進(jìn)一步提取封裝;
4、封裝接口的請(qǐng)求和響應(yīng)攔截api:axios
的axios.interceptors.request.use()
和axios.interceptors.response.use()
用過(guò)的都說(shuō)好;
從上述四點(diǎn)出發(fā),對(duì)微信小程序初始化工程進(jìn)行規(guī)范優(yōu)化,能夠很大程度提高開(kāi)發(fā)效率和進(jìn)行項(xiàng)目維護(hù)管理。封裝的好處不只體現(xiàn)在調(diào)用的方便上,也體現(xiàn)在管理的方便上,同時(shí),公共操作集中處理,很大程度減少繁雜重復(fù)代碼。
一、項(xiàng)目初始化
???新建微信小程序項(xiàng)目,在項(xiàng)目下新建如下目錄和文件:
config文件夾:統(tǒng)一管理可配置的信息和變量;
erroList.js:接口報(bào)錯(cuò)錯(cuò)誤碼
匹配列表文件;
globalData.js:全局變量
統(tǒng)一管理文件(相當(dāng)于vuex);
keys.js:可配置系統(tǒng)信息管理文件(全局常量命名等);
pages文件夾:小程序頁(yè)面文件管理文件夾(每個(gè)頁(yè)面一個(gè)子文件夾目錄);
router文件夾:路由管理文件件;
router.js:對(duì)微信小程序5種路由導(dǎo)航
api的封裝;
routerConfig.js:頁(yè)面路由名稱和路徑匹配配置文件;
routerFilter.js:路由前置攔截
封裝;
servers文件件:接口請(qǐng)求服務(wù)管理文件夾;
request.js:對(duì)wx.request
的Promise
封裝;
xxx.js:對(duì)應(yīng)模塊的接口管理文件;
apis文件夾:request請(qǐng)求封裝管理和接口api配置管理文件夾;
requestFilter.js:接口請(qǐng)求和響應(yīng)攔截
封裝文件;
二、路由跳轉(zhuǎn)和路由守衛(wèi)封裝
1、路由跳轉(zhuǎn)封裝
??微信小程序官方文檔為開(kāi)發(fā)者提供了5種路由跳轉(zhuǎn)的api,每一種都有其特殊的用法:
??根據(jù)其用法,我們對(duì)路由api進(jìn)行如下封裝:微信小程序路由跳轉(zhuǎn)最后對(duì)應(yīng)push、replace、pop、relaunch、switchTab
;routes
對(duì)應(yīng)routeConfig.js中路由路徑的配置;routerFilter
對(duì)應(yīng)routerFilter.js文件,對(duì)路由跳轉(zhuǎn)之前的邏輯進(jìn)行處理;
export const routes = { INDEX: "/pages/index/index", TEST: "/pages/test/test", }export default {...routes};
export default () => { ··· //路由跳轉(zhuǎn)前邏輯處理}
import routes from "../router/routerConfig";import routerFilter from "./routerFilter"/** * 對(duì)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); } })}/** * 對(duì)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); } })}/** * 對(duì)wx.navigateBack的封裝 * @param {返回的層級(jí)} number */const pop = (number) => { routerFilter() wx.navigateBack({ delta: number, success(res) { console.log(res); }, fail(err) { console.log(err); } })}/** * 對(duì)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); } })}/** * 對(duì)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、全局注冊(cè)和使用
在app.js
中對(duì)封裝的路由api進(jìn)行全局注冊(cè):
import router from "./router/router.js"//全局注冊(cè)wx.router = router
在頁(yè)面邏輯中使用:
//index頁(yè)面跳轉(zhuǎn)test頁(yè)面 gotoTest(){ wx.router.push("TEST")}
三、接口請(qǐng)求Promise封裝
??對(duì)于同一個(gè)項(xiàng)目而言,微信小程序apiwx.request()
中很多參數(shù)都是相同的,如果直接使用,需要將這些重復(fù)參數(shù)一遍又一遍的copy,雖然copy很簡(jiǎn)單,但是當(dāng)有一個(gè)參數(shù)改變了需要找到所有接口一個(gè)一個(gè)修改,維護(hù)起來(lái)費(fèi)勁,再者看著也難受呀;
??借鑒axios
對(duì)請(qǐng)求的封裝,將wx.request()
封裝為Promise
形式豈不美哉:
import formatError from "../requestFilter"const app = getApp()/** * 接口請(qǐng)求封裝 * @param {請(qǐng)求方式} method * @param {請(qǐng)求的url} url * @param {請(qǐng)求傳遞的數(shù)據(jù)} data */const request = (method, url, data) => { //設(shè)置請(qǐng)求頭 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) { //對(duì)成功返回的請(qǐng)求進(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;
以u(píng)ser.js為例:
import request from "./request";// 獲取用戶openidexport const usrInfos = data => request("POST", "/user/usrInfos", data);
index頁(yè)面調(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) }) }})
四、接口的請(qǐng)求和響應(yīng)攔截封裝
??axios
的axios.interceptors.request.use()
和axios.interceptors.response.use()
分別對(duì)應(yīng)接口請(qǐng)求前的攔截處理和數(shù)據(jù)響應(yīng)后的攔截處理;根據(jù)這個(gè)原理我們對(duì)微信小程序的響應(yīng)也做攔截封裝,對(duì)接口請(qǐng)求返回錯(cuò)誤進(jìn)行統(tǒng)一管理輸出:
import formatError from "../requestFilter"const app = getApp()···const request = (method, url, data) => { ··· return new Promise((resolve, reject) => { wx.request({ ··· success(res) { //對(duì)成功返回的請(qǐng)求進(jìn)行數(shù)據(jù)管理和統(tǒng)一邏輯操作 if(res.statusCode === 200){ //請(qǐng)求返回成功 if(res.data && res.data.code === "SUCCESS"){ //后端對(duì)接口請(qǐng)求處理成功,返回?cái)?shù)據(jù)給接口調(diào)用處 resolve(res.data) //then接收 }else{ //后端對(duì)也請(qǐng)求判斷后認(rèn)為不合邏輯報(bào)錯(cuò) formatError(res) //統(tǒng)一的報(bào)錯(cuò)處理邏輯 reject(res.data) //catch接收 } }else{ reject(res.data) //catch接收 } }, fail(err) { //請(qǐng)求不通報(bào)錯(cuò) wx.showToast({ title: '網(wǎng)絡(luò)異常,稍后再試!', mask: true, icon: 'none', duration: 3000 }) } }) })}export default request;
requestFilter.js中可以做很多對(duì)報(bào)錯(cuò)的處理,這里用一個(gè)簡(jiǎn)單的toast處理示范下:
/** * 對(duì)接口返回的后端錯(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;
對(duì)報(bào)錯(cuò)進(jìn)行統(tǒng)一處理需要明確數(shù)據(jù)規(guī):
制定統(tǒng)一的報(bào)錯(cuò)碼管理規(guī)范;
制定前后端統(tǒng)一的接口請(qǐng)求數(shù)據(jù)返回格式;
五、全局?jǐn)?shù)據(jù)管理
??對(duì)于數(shù)據(jù)的管理在小項(xiàng)目的開(kāi)發(fā)中顯得不那么重要,但是隨著項(xiàng)目越來(lái)越大,數(shù)據(jù)越來(lái)越多,一個(gè)很好的數(shù)據(jù)管理方案能夠有效地避免很多bug,這也是vuex能夠在vue生態(tài)中占有一席之地的原因。秉承著合理管理數(shù)據(jù)的原則,對(duì)于該封裝的數(shù)據(jù)堅(jiān)決封裝,對(duì)于該分模塊管理的配置堅(jiān)決分塊管理:
微信小程序中全局的數(shù)據(jù)管理放在app.js
的globalData
屬性中,當(dāng)數(shù)據(jù)太多或者app.js邏輯太復(fù)雜時(shí),將全局?jǐn)?shù)據(jù)提取出來(lái)單獨(dú)管理的確是個(gè)好方案:
export default { ··· host: "http://www.wawow.xyz/api/test", //接口請(qǐng)求的域名和接口前綴 hasConfirm: "" //是否已經(jīng)有了confirm實(shí)例 currentPage: "" ···}
keys.js屬于個(gè)人開(kāi)發(fā)中的習(xí)慣操作,將項(xiàng)目中可能用到的一些常量名稱在此集中管理起來(lái),十分方便調(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"//全局注冊(cè)wx.router = router wx.$KEYS = keys//app.jsApp({ //監(jiān)聽(tīng)小程序初始化 onLaunch(options) { //獲取小程序初始進(jìn)入的頁(yè)面信息 let launchInfos = wx.getLaunchOptionsSync() //將當(dāng)前頁(yè)面路由存入全局的數(shù)據(jù)管理中 this.globalData.currentPage = launchInfos.path }, ··· //全局?jǐn)?shù)據(jù)存儲(chǔ) globalData: globalData})
在頁(yè)面代碼邏輯中可以通過(guò)app.globalData.host
,wx.$KEYS.TOKEN
方式進(jìn)行調(diào)用;
以上是“微信小程序開(kāi)發(fā)的技巧”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享名稱:微信小程序開(kāi)發(fā)的技巧
標(biāo)題來(lái)源:http://m.rwnh.cn/article6/jgppog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、電子商務(wù)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容