這篇文章主要介紹微信小程序開發的技巧，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
注意：本文默認開發者對微信小程序開發有一定語法基礎。小程序開發文檔
相關免費學習推薦：微信小程序開發
微信小程序小結
??在接觸的微信小程序開發過程中，不難發現微信小程序為了方便開發人員入手對很多底層api進行了很好的封裝，比如針對接口請求的wx.request()，針對路由跳轉和頁面導航的wx.switchTab、wx.navigateTo···等。雖然在一定程度上簡化了開發，但是對于項目工程的系統化構建還是不夠的，因此本人在對比以前基于Vue開發項目的經驗和自身的開發習慣，總結出如下3點可供參考：
1、全局變量和配置信息統一管理；
2、封裝路由守衛相關api：vue-router的router.beforeEach()和router.afterEach()真的香；
3、接口請求公共信息進一步提取封裝；
4、封裝接口的請求和響應攔截api：axios的axios.interceptors.request.use()和axios.interceptors.response.use()用過的都說好；
從上述四點出發，對微信小程序初始化工程進行規范優化，能夠很大程度提高開發效率和進行項目維護管理。封裝的好處不只體現在調用的方便上，也體現在管理的方便上，同時，公共操作集中處理，很大程度減少繁雜重復代碼。
一、項目初始化
???新建微信小程序項目，在項目下新建如下目錄和文件：
config文件夾：統一管理可配置的信息和變量；
erroList.js：接口報錯錯誤碼匹配列表文件；
globalData.js：全局變量統一管理文件（相當于vuex）；
keys.js：可配置系統信息管理文件（全局常量命名等）；
pages文件夾：小程序頁面文件管理文件夾（每個頁面一個子文件夾目錄）；
router文件夾：路由管理文件件;
router.js：對微信小程序5種路由導航api的封裝；
routerConfig.js：頁面路由名稱和路徑匹配配置文件；
routerFilter.js：路由前置攔截封裝；
servers文件件：接口請求服務管理文件夾；
request.js：對wx.request的Promise封裝；
xxx.js：對應模塊的接口管理文件；
apis文件夾：request請求封裝管理和接口api配置管理文件夾；
requestFilter.js：接口請求和響應攔截封裝文件；
二、路由跳轉和路由守衛封裝
1、路由跳轉封裝
??微信小程序官方文檔為開發者提供了5種路由跳轉的api，每一種都有其特殊的用法：
??根據其用法，我們對路由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 {參數} 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 {參數} 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 {參數} 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()中很多參數都是相同的，如果直接使用，需要將這些重復參數一遍又一遍的copy，雖然copy很簡單，但是當有一個參數改變了需要找到所有接口一個一個修改，維護起來費勁，再者看著也難受呀；
??借鑒axios對請求的封裝，將wx.request()封裝為Promise形式豈不美哉：
import formatError from "../requestFilter"const app = getApp()/**
* 接口請求封裝
* @param {請求方式} method
* @param {請求的url} url
* @param {請求傳遞的數據} 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) {
//對成功返回的請求進行數據管理和統一邏輯操作
··· resolve(res.data)
},
fail(err) {
wx.showToast({
title: '網絡異常，稍后再試！',
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()分別對應接口請求前的攔截處理和數據響應后的攔截處理；根據這個原理我們對微信小程序的響應也做攔截封裝，對接口請求返回錯誤進行統一管理輸出：
import formatError from "../requestFilter"const app = getApp()···const request = (method, url, data) => {
··· return new Promise((resolve, reject) => {
wx.request({
··· success(res) {
//對成功返回的請求進行數據管理和統一邏輯操作
if(res.statusCode === 200){ //請求返回成功
if(res.data && res.data.code === "SUCCESS"){ //后端對接口請求處理成功，返回數據給接口調用處
resolve(res.data) //then接收
}else{ //后端對也請求判斷后認為不合邏輯報錯
formatError(res) //統一的報錯處理邏輯
reject(res.data) //catch接收
}
}else{
reject(res.data) //catch接收
}
},
fail(err) { //請求不通報錯
wx.showToast({
title: '網絡異常，稍后再試！',
mask: true,
icon: 'none',
duration: 3000
})
}
})
})}export default request;requestFilter.js中可以做很多對報錯的處理，這里用一個簡單的toast處理示范下：
/**
* 對接口返回的后端錯誤進行格式轉化
* @param {接口成功返回的數據} res
*/const formatError = (err =>{
wx.showToast({
title: err.message,
mask: false,
icon: 'none',
duration: 3000
})}export default formatError;對報錯進行統一處理需要明確數據規：
制定統一的報錯碼管理規范；
制定前后端統一的接口請求數據返回格式；
五、全局數據管理
??對于數據的管理在小項目的開發中顯得不那么重要，但是隨著項目越來越大，數據越來越多，一個很好的數據管理方案能夠有效地避免很多bug，這也是vuex能夠在vue生態中占有一席之地的原因。秉承著合理管理數據的原則，對于該封裝的數據堅決封裝，對于該分模塊管理的配置堅決分塊管理：
微信小程序中全局的數據管理放在app.js的globalData屬性中，當數據太多或者app.js邏輯太復雜時，將全局數據提取出來單獨管理的確是個好方案：
export default {
···
host: "http://www.wawow.xyz/api/test", //接口請求的域名和接口前綴
hasConfirm: "" //是否已經有了confirm實例
currentPage: ""
···}keys.js屬于個人開發中的習慣操作，將項目中可能用到的一些常量名稱在此集中管理起來，十分方便調用和修改維護：
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({
//監聽小程序初始化
onLaunch(options) {
//獲取小程序初始進入的頁面信息
let launchInfos = wx.getLaunchOptionsSync()
//將當前頁面路由存入全局的數據管理中
this.globalData.currentPage = launchInfos.path },
··· //全局數據存儲
globalData: globalData})在頁面代碼邏輯中可以通過app.globalData.host，wx.$KEYS.TOKEN方式進行調用；
以上是“微信小程序開發的技巧”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
