【小程序二维码展示】
扫描二维码即可感受我们程序的便捷,目前页面设计简洁而大气,主要功能已全部实现,展望未来,我们将持续优化界面布局和用户交互体验。
项目效果展示
该小程序板块集成了基础操作,其界面设计着重于实用性的考虑。在首页,用户能够便捷地使用核心的计算功能;在历史页面,用户可以轻松地查找所需数据;至于“我的”页面,则主要负责账户的登录与管理工作。尽管外观上显得简洁,但所有功能都能流畅运行。
项目功能模块说明
1. 首页功能
作为核心页面,用户可在其上输入信息并实现自动化处理。处理完毕后的数据,通过点击“保存”按钮,能够上传至云端。若用户未完成登录,系统将自动跳转至登录页面,确保数据的安全性和可追溯性。
2. 历史记录查询
用户登录成功,便可以访问历史记录页面,查看所有保存的计算数据。这些数据按照时间先后顺序,由近及远排列,同时配备了方便快捷的搜索功能,让用户能够轻松回顾历史数据。
3. 账户管理
该页面配备了登录及注册功能,通过手机验证码机制,对用户身份进行严谨的验证。用户成功登录后,其状态信息将被保存,从而降低用户进行重复操作的频率。
技术实现要点
核心代码涉及以下关键功能:
数据计算逻辑:首页采用前端校验与后端双重计算校验,确保结果准确性
登录拦截:未登录状态下触发保存操作时,自动路由跳转并携带原数据参数
云端同步:历史记录通过用户ID关联数据库,实现多端数据同步
获取完整代码
代码内容较多,文章中仅展示了核心的算法环节。若您希望获取整个项目的全部代码以及相关的技术细节,烦请将您的电子邮箱地址在评论区留言,我将迅速将包括前端、后端代码以及数据库设计方案在内的完整项目文件发送至您的邮箱。
//请求数据库,用户信息
wx.cloud.callFunction({
name: 'getId',
}).then(res => {
app.openID = res.result.openid
db.collection('userList').where({
_openid: res.result.openid
}).get().then(res => {
app.data = res.data[0]
console.log(res.data);
if (res.data[0]) {
app.status = 1
} else {
app.status = 0
}
})
})
后续优化方向
1. 增加数据可视化图表展示
// 年级选择
gradeChange(e) {
this.setData({
index: e.detail.value
})
},
// 性别选择
genderChange(e) {
this.setData({
gender: e.detail.value
})
},
2. 添加计算结果分享功能
3. 优化移动端适配体验
//存档
cundang() {
console.log(app.status, 'cundang');
if (app.status) {
db.collection('userList').where({
_openid: app.openID
}).update({
data: {
history: _.push(this.data.zong),
bmi: _.push(this.data.bmi)
}
})
} else {
wx.showToast({
title: '请先登录!',
icon: 'loading',
}).then(res => {
setTimeout(() => {
wx.switchTab({
url: '/pages/mine/index',
})
}, 1000)
版权声明:本文为 “博览广文网” 原创文章,转载请附上原文出处链接及本声明;
工作时间:8:00-18:00
客服电话
0755-88186625
电子邮件
admin@lanyu.com
扫码二维码
获取最新动态