微信小程序项目总结--记账小程序(含后台)
一、小程序部分
这是理财系统的前端,江苏海洋大学微信小程序比赛,最后获得了一等奖
GitHub:https://github.com/GeorgeLeoo/finance
1. 项目描述
(1). 此项目为记账小程序
(2). 包括账单、图表、搜索、用户等多个子模块
(3). 使用微信小程序技术
(4). 采用模块化、组件化、工程化等模式开发
2. 项目功能界面
在 1.0.2版本中删除了扇形图
3. 项目目录
* pages:页面
* components:组件
* utils:工具类
|-- util.js:工具类
|-- wxcharts.js:图表插件
* images:资源图片
* config:配置文件
* filter:过滤器
* http:网络请求
|-- http.js:对 wx.request 的封装
|-- api.js:对网络请求接口的封装
4. 请求封装
一开始使用 wx.request 对数据进行网络请求,可写完后,发现太过冗余,也太麻烦,故对其做了封装。
通过创建一个函数返回 Promise 对象,就可以屏蔽公共的部分
// http/http.js
/**
* 对微信普通网络请求封装
* @param url 请求地址
* @param data 请求的参数
* @param method 请求的方法类型
* @param headers 头部信息,在这里主要是 token 认证功能
* @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 请求发送的数据
* @param headers 头部信息,在这里主要是 token 认证功能
* @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). 在更新账单数据后,如何更新账单界面的数据?
这个问题我的解决方案是,在 globalData 中添加一个全部变量 isRefreshBills,默认为 false,
当更新账单数据成功后,将 isRefreshBills 修改为 true,同时返回到账单界面,在账单界面的
onShow()方法中,判断 isRefreshBills 是否为 true,若为 true 则重新请求数据,同时将 isRefreshBills
设为 false,否则不请求。这样就避免了没有更新数据的情况下多次请求数据。
对这个解法,还有一种更加节流的方法,就是更新后不去请求,而是对原来的获取到的数据进行个别删除。比如当
更新数据成功后,获取一个被更新的这条数据的id,然后在账单页面的 onShow() 方法中,遍历找到这个 id 对应的
数据,并删除这条数据也能达到数据更新的效果
(2). 在进行类别添加的时候,自定义的类别会出现双倍?
由于我有一分部初始数据是存在 globalData 中的,每次从服务器获取自定义类别时,都会对其进行拼接,
在拼接的时候修改了原来的 globalData 中的值,所以每次添加后都会请求一次自定义数据,进行拼接。
解决方案:禁止更新 globalData 中的数据
(3). 返回哪个页面问题?
在账单页面可以进去修改账单的页面,在搜索页面也可以进入修改账单账单的页面,他们用的是同一个组件,
那么如何保证在账单页面进入修改账单页面后返回到账单页面,在搜索页面进入修改账单页面后返回到搜索页面。
首先在路由跳转的时候添加当前路由信息,然后在修改账单页面中接受这个路由信息,最后通过这个路由信息返回到原来的路由
6. 总结
这个项目是我5月份参加学校微信小程序的项目,两个礼拜仓促的做了这么一个项目,前后端都有,最后荣获一等奖。
在之前比赛用的版本中其实有很多的 bug 以及卡顿现象居多,故这两天我有对这个项目进行了一定的维护,发现原来的代码实在
惨不忍睹,现在经过升级,页面卡顿现象减少,若后期再想维护,也相对于之前的版本好维护多了,但是还有很多可以维护的空间。
其实我并不对这个项目很满意,比如之前我没做分页加载, 现在想加个分页加载的功能,我发现并不是一下子就能搞定的,
因为我的数据结构不是很合理,因为后端返回的数据和前端要显示的数据格式是不一致,故前端要重新定义数据结构,
所以对分页来说就有一定的困难。在我对项目进行维护后,代码比以前更简洁,可读性相对于之前的版本来说要更加好。
二、服务器部分
1.简述
这个项目是微信小程序记账 app 的后端代码,使用技术:MongoDB+Express。
GitHub:https://github.com/GeorgeLeoo/finance-server
这个项目的目录是这样的
- config: 配置文件
- routes: 路由配置
- utils: 工具类
- db: 操作数据库的代码
- controller: 控制是当前地址否要 token 验证
- service: 如何调用操作数据库函数(我也不知道为什么要写controller,service,感觉这两个写一个就可以了)
2.遇到的问题
(1). token 验证问题?
关于 token 验证问题我使用了 jsonwebtoken 插件,故先用 npm 安装这个插件。
token 验证流程大概如下图:
使用这个插件: 定义两个方法,一个用来生成 token,另一个用来验证 token。
/**
* 生成token
* @param {object} content 对某个内容生成 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验证成功,调用操作数据库的方法
billService[method](options).then((data) => {
res.json(data);
}).catch((err) => {
res.json(err)
});
}).catch((err) => {
// token 验证失败
res.json(err)
})
}
(2). 文件上传问题?
在这个项目中,有使用文件上传的功能,express 默认是带这个功能的,所以就必须使用 npm
安装 express-fileupload 这个插件,然后再 app.js 中引入并注册这个插件
var fileUpload = require('express-fileupload');
app.use(fileUpload());
当前端发送文件时,后端从 req.files['name']
获取 file 对象,然后通过 file.mv()方法进行文件存储
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) => {}
});
// 服务器代码
let file = req.files.avatar
file.mv('upload/a.png', function (e) {
if (e) {
// 失败时
} else {
// 成功时
}
});
(3). 关于前端读取upload中图片的问题
本来想用服务器的 ip 来读取项目中 upload 中的图片,但是发现并不能读取,或显示404,故最后将 upload 文件放在了项目的外边,
然后对这个 upload 文件单独开了一个服务,把他当做图片服务器来使用。
3. 总结
当初选用 Express + MongoDB 的唯一原因就是开发快,因为基本上每天都满课,所以快速开发是我的需要。
在这个项目中其实还有很多可以优化的地方,还有一定的冗余,比如在操作数据的时候,所有的查询成功或失败的函数
都可以存放到一个公共类里面,而不是每一对应的文件里都有一个这个方法。
Github:
小程序:https://github.com/GeorgeLeoo/finance
服务器:https://github.com/GeorgeLeoo/finance-server
推荐阅读
-
2020全新微信小程序学习宝典:一网打尽文档、视频教程、实战课、开源项目及框架资源
-
Tarocli开发微信小程序遇到的问题与经验总结
-
小程序搜索栏新增 "搜索历史" | iOS 版微信更新至 6.6.0,客户端更新,公众号界面、后台改版
-
微信小程序 Java 后台获取电话号码
-
微信小程序项目实现书单渲染、书籍详情跳转
-
微信小程序获取用户手机号教程(前台+后台)
-
基于Springboot的农产品销售管理系统/电商项目/水果超市管理系统/微信小程序毕节/农村电商资源对接平台【含源码】。
-
基于微信小程序的校园跑腿+后台管理系统-前言
-
智联招聘发布第三季度平均薪酬报告;价值13亿美元的Metaverse日活跃用户仅38人;统一充电接口或让苹果一年损失数百亿美元 | EA周报 - 热点大事件 微信推出刷掌付小程序,开启全新支付模式 据悉,微信已上线 "微信刷掌付 "小程序,可以为用户刷掌付增加更便捷的管理方式,但刷掌付功能需要在刷掌设备上开通。刷掌付是继密码支付、指纹支付、刷脸支付之后,微信的又一新型支付方式。据悉,目前微信支付已在深圳部分商户接入刷掌付设备进行测试,用户可通过刷掌纹支付订单。刷掌纹设备由微信支付提供,设备上设有显示屏和掌纹识别区,用户开通微信刷掌纹支付功能后,只需在掌纹识别区扫描,即可完成商品支付,相比传统的密码支付和指纹支付,更加便捷。(星球科技) 微软多项云服务落户中国新数据中心 2022年10月13日,微软年度技术大会Ignite 2022和Ignite China中国技术峰会同步开启在线直播。面对中国市场日益增长的客户需求,微软宣布,Azure、Dynamics Power Platform等多项服务已在北上广三地数据中心落地,提升在中国市场的服务能力;世纪互联运营的Office 365上的Teams服务和世纪互联运营的Microsoft 365服务将于2023年上半年正式上线,为中国市场带来更全面、更优质的本地化服务体验和技术保障。 IBM宣布将红帽存储并入存储业务部 根据IBM与红帽的协议,IBM将成为Ceph基金会的主要赞助商,该基金会的成员合作推动Ceph开源项目的创新、开发、营销和社区活动。红帽OpenStack客户仍可从红帽及其合作伙伴处购买红帽Ceph存储,而拥有现有订购服务的红帽OpenShift和红帽OpenStack客户将能够在不改变与红帽关系的情况下,根据需要维护和扩展其存储足迹。 扎克伯格谈新款1万美元VR头显:成本价,我们不会像苹果那样定高价 元CEO扎克伯格在接受采访时谈到了公司新发布的Quest Pro新款VR头显的价格,他表示1499.99美元的定价只是 "性价比",让更多人通过购买硬件来体验元宇宙。扎克伯格还借此机会挖苦了竞争对手苹果公司,称苹果公司对该设备的定价 "已经到了极限"。他说:"通常,人们制造硬件,然后想从中获利。例如,苹果公司就是这样做的,制造硬件,然后尽可能多地收费。他说,公司还计划推出 Quest 3,售价在 300 美元到 500 美元之间。 智联招聘发布招聘薪资报告,第三季度全国平均薪资为10168美元/月
-
基于微信小程序实现日常学习打卡系统项目演示【附项目源码】--微信小程序文件目录