微信小程序項目總結(jié)之記賬小程序功能的實現(xiàn)(包括后端)
一、小程序部分
這是理財系統(tǒng)的前端,江蘇海洋大學(xué)微信小程序比賽,最后獲得了一等獎
GitHub:https://github.com/GeorgeLeoo/finance
1. 項目描述
(1). 此項目為記賬小程序
(2). 包括賬單、圖表、搜索、用戶等多個子模塊
(3). 使用微信小程序技術(shù)
(4). 采用模塊化、組件化、工程化等模式開發(fā)
2. 項目功能界面
在 1.0.2版本中刪除了扇形圖
3. 項目目錄
* pages:頁面 * components:組件 * utils:工具類 |-- util.js:工具類 |-- wxcharts.js:圖表插件 * images:資源圖片 * config:配置文件 * filter:過濾器 * http:網(wǎng)絡(luò)請求 |-- http.js:對 wx.request 的封裝 |-- api.js:對網(wǎng)絡(luò)請求接口的封裝
4. 請求封裝
一開始使用 wx.request 對數(shù)據(jù)進(jìn)行網(wǎng)絡(luò)請求,可寫完后,發(fā)現(xiàn)太過冗余,也太麻煩,故對其做了封裝。
通過創(chuàng)建一個函數(shù)返回 Promise 對象,就可以屏蔽公共的部分
// http/http.js /** * 對微信普通網(wǎng)絡(luò)請求封裝 * @param url 請求地址 * @param data 請求的參數(shù) * @param method 請求的方法類型 * @param headers 頭部信息,在這里主要是 token 認(rèn)證功能 * @returns {Promise<unknown>} 返回請求的 Promise 對象 */ function http({url, data, method, headers = {}}) { return new Promise((resolve, reject) => { wx.request({ url, method, data, header: { Authorization: headers.token, expiresIn: headers.expiresIn }, success: (result) => { const res = result.data; if (res.code === 0) { resolve(res.data); } else if (res.code === 1) { reject(res.msg); } // 隱藏 loading wx.hideLoading(); }, fail: (err) => { console.error('server error', err); } }); }) } /** * 對文件上傳接口封裝 * @param url 請求地址 * @param fileOptions 文件配置項 * @param data 請求發(fā)送的數(shù)據(jù) * @param headers 頭部信息,在這里主要是 token 認(rèn)證功能 * @returns {Promise<unknown>} 返回請求的 Promise 對象 */ function uploadFile({url, fileOptions, data, headers = {}}) { return new Promise(((resolve, reject) => { wx.uploadFile({ url: url, filePath: fileOptions.filePath, name: fileOptions.name || 'file', header: { Authorization: headers.token, expiresIn: headers.expiresIn }, formData: data, success: (res) => { console.log(res.data); if (JSON.parse(res.data).code === 0) { resolve(res.data); } else if (res.code === 1) { reject(res.msg); } }, fail: (err) => { console.error('server error', err); } }) })) } module.exports = { http, uploadFile };
5. 遇到的問題
(1). 在更新賬單數(shù)據(jù)后,如何更新賬單界面的數(shù)據(jù)?
這個問題我的解決方案是,在 globalData 中添加一個全部變量 isRefreshBills,默認(rèn)為 false,
當(dāng)更新賬單數(shù)據(jù)成功后,將 isRefreshBills 修改為 true,同時返回到賬單界面,在賬單界面的
onShow()方法中,判斷 isRefreshBills 是否為 true,若為 true 則重新請求數(shù)據(jù),同時將 isRefreshBills
設(shè)為 false,否則不請求。這樣就避免了沒有更新數(shù)據(jù)的情況下多次請求數(shù)據(jù)。
對這個解法,還有一種更加節(jié)流的方法,就是更新后不去請求,而是對原來的獲取到的數(shù)據(jù)進(jìn)行個別刪除。比如當(dāng)
更新數(shù)據(jù)成功后,獲取一個被更新的這條數(shù)據(jù)的id,然后在賬單頁面的 onShow() 方法中,遍歷找到這個 id 對應(yīng)的
數(shù)據(jù),并刪除這條數(shù)據(jù)也能達(dá)到數(shù)據(jù)更新的效果
(2). 在進(jìn)行類別添加的時候,自定義的類別會出現(xiàn)雙倍?
由于我有一分部初始數(shù)據(jù)是存在 globalData 中的,每次從服務(wù)器獲取自定義類別時,都會對其進(jìn)行拼接,
在拼接的時候修改了原來的 globalData 中的值,所以每次添加后都會請求一次自定義數(shù)據(jù),進(jìn)行拼接。
解決方案:禁止更新 globalData 中的數(shù)據(jù)
(3). 返回哪個頁面問題?
在賬單頁面可以進(jìn)去修改賬單的頁面,在搜索頁面也可以進(jìn)入修改賬單賬單的頁面,他們用的是同一個組件,
那么如何保證在賬單頁面進(jìn)入修改賬單頁面后返回到賬單頁面,在搜索頁面進(jìn)入修改賬單頁面后返回到搜索頁面。
首先在路由跳轉(zhuǎn)的時候添加當(dāng)前路由信息,然后在修改賬單頁面中接受這個路由信息,最后通過這個路由信息返回到原來的路由
6. 總結(jié)
這個項目是我5月份參加學(xué)校微信小程序的項目,兩個禮拜倉促的做了這么一個項目,前后端都有,最后榮獲一等獎。
在之前比賽用的版本中其實有很多的 bug 以及卡頓現(xiàn)象居多,故這兩天我有對這個項目進(jìn)行了一定的維護(hù),發(fā)現(xiàn)原來的代碼實在
慘不忍睹,現(xiàn)在經(jīng)過升級,頁面卡頓現(xiàn)象減少,若后期再想維護(hù),也相對于之前的版本好維護(hù)多了,但是還有很多可以維護(hù)的空間。
其實我并不對這個項目很滿意,比如之前我沒做分頁加載, 現(xiàn)在想加個分頁加載的功能,我發(fā)現(xiàn)并不是一下子就能搞定的,
因為我的數(shù)據(jù)結(jié)構(gòu)不是很合理,因為后端返回的數(shù)據(jù)和前端要顯示的數(shù)據(jù)格式是不一致,故前端要重新定義數(shù)據(jù)結(jié)構(gòu),
所以對分頁來說就有一定的困難。在我對項目進(jìn)行維護(hù)后,代碼比以前更簡潔,可讀性相對于之前的版本來說要更加好。
二、服務(wù)器部分
1.簡述
這個項目是微信小程序記賬 app 的后端代碼,使用技術(shù):MongoDB+Express。
GitHub:https://github.com/GeorgeLeoo/finance-server
這個項目的目錄是這樣的
- config: 配置文件
- routes: 路由配置
- utils: 工具類
- db: 操作數(shù)據(jù)庫的代碼
- controller: 控制是當(dāng)前地址否要 token 驗證
- service: 如何調(diào)用操作數(shù)據(jù)庫函數(shù)(我也不知道為什么要寫controller,service,感覺這兩個寫一個就可以了)
2.遇到的問題
(1). token 驗證問題?
關(guān)于 token 驗證問題我使用了 jsonwebtoken 插件,故先用 npm 安裝這個插件。
token 驗證流程大概如下圖:
使用這個插件: 定義兩個方法,一個用來生成 token,另一個用來驗證 token。
/** * 生成token * @param {object} content 對某個內(nèi)容生成 token */ const access_token=function (content) { let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘鑰 let expiresIn = Math.round((new Date().getTime()/1000)) + 3600; // 過期時間 let token = jwt.sign(content, secret, { expiresIn }); return { token, expiresIn }; } /** * 驗證token * @param {string} token token值 */ const check_token= function (token) { let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘鑰,根生成的 token 要一致 return new Promise((resolve, reject) => { jwt.verify(token, secret, (err, decode) => { if (err) { //時間失效或偽造 token 或 token 不存在 reject({ status: 10010, error: 'invalid_token' }); } else { resolve(); } }); }) }
在controller.js 中,去判斷 token 驗證成功與否
function billController(method, options, req, res) { // 驗證 token utils.check_token(req.headers.authorization, res).then(() => { // token驗證成功,調(diào)用操作數(shù)據(jù)庫的方法 billService[method](options).then((data) => { res.json(data); }).catch((err) => { res.json(err) }); }).catch((err) => { // token 驗證失敗 res.json(err) }) }
(2). 文件上傳問題?
在這個項目中,有使用文件上傳的功能,express 默認(rèn)是帶這個功能的,所以就必須使用 npm
安裝 express-fileupload 這個插件,然后再 app.js 中引入并注冊這個插件
var fileUpload = require('express-fileupload'); app.use(fileUpload());
當(dāng)前端發(fā)送文件時,后端從 req.files['name']
獲取 file 對象,然后通過 file.mv()方法進(jìn)行文件存儲
file.mv(fileSavePath, function (e) { if (e) { // 失敗時 } else { // 成功時 } });
比如我的項目中,上傳圖片代碼抽取出來就是
// 小程序代碼 wx.uploadFile({ url: 'http://localhost:3000/users/avatar', filePath: 'XXXXXXX', name: 'avatar', header: { Authorization: headers.token, expiresIn: headers.expiresIn }, formData: data, success: (res) => {}, fail: (err) => {} }); // 服務(wù)器代碼 let file = req.files.avatar file.mv('upload/a.png', function (e) { if (e) { // 失敗時 } else { // 成功時 } });
(3). 關(guān)于前端讀取upload中圖片的問題
本來想用服務(wù)器的 ip 來讀取項目中 upload 中的圖片,但是發(fā)現(xiàn)并不能讀取,或顯示404,故最后將 upload 文件放在了項目的外邊,
然后對這個 upload 文件單獨開了一個服務(wù),把他當(dāng)做圖片服務(wù)器來使用。
3. 總結(jié)
當(dāng)初選用 Express + MongoDB 的唯一原因就是開發(fā)快,因為基本上每天都滿課,所以快速開發(fā)是我的需要。在這個項目中其實還有很多可以優(yōu)化的地方,還有一定的冗余,比如在操作數(shù)據(jù)的時候,所有的查詢成功或失敗的函數(shù)都可以存放到一個公共類里面,而不是每一對應(yīng)的文件里都有一個這個方法
Github:
小程序:https://github.com/GeorgeLeoo/finance
服務(wù)器:https://github.com/GeorgeLeoo/finance-server
總結(jié)
以上所述是小編給大家介紹的微信小程序項目總結(jié)之記賬小程序功能的實現(xiàn)(包括后端),希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
js實現(xiàn)網(wǎng)頁檢測是否安裝了 Flash Player 插件
js實現(xiàn)網(wǎng)頁檢測是否安裝了 Flash Player 插件...2007-08-08如何在CocosCreator中使用http和WebSocket
這篇文章主要介紹了在Cocos Creator中使用的Http和WebSocket,對websocket感興趣的同學(xué),一定要看下2021-04-04JavaScript使用prototype定義對象類型(轉(zhuǎn))[
JavaScript使用prototype定義對象類型(轉(zhuǎn))[...2006-12-12