只因为给我打了0.1分,重新撸了个记账小程序

2019年的时候和朋友出去旅行,因为需要A账单,所以前一天开发了一个记账小程序,时间匆忙,就随便完成基础记账和AA计算功能后就上线,旅行结束后也就没用过了,前几天无意登录,发现被打了1.0分。
叔能忍,婶婶不可忍,摸鱼两周升级完成新的记账小程序。
u=4042531557,4167091400&fm=253&fmt=auto&app=138&f=JPEG.jpg

技术栈:uni-app + uniCloud + TM-vuetify

在这里插入图片描述


具体实现功能思路:

  1. 用户进入小程序自动登录,未注册自动注册,免去登录步骤
  2. 记账功能
    • 多种记账类型(ICON图标)
    • 可选记账日期
    • 计算器(因为小程序为了安全起见不支持eval,所以这块需要自己实现)
  3. 月度账单图表查看(收支排行榜、当月结余)
  4. 年度账单查看
  5. 共享协同账单(目前只实现了AA协同方式,因为太懒了,其他先不搞了)
  6. 个人中心
    • 用户设置(头像啊、昵称什么的,共享账单不得知道谁是谁)
    • 意见反馈(用于收集用户反馈bug等,ps:不得给用户留个发泄口,免得再给我打1.0分)
    • 分享功能
    • 在线客服

需求理清楚了,开干!(好吧,其实并没有,因为没有设计天赋,所以摆烂了两天,o(╥﹏╥)o)

u=1314092844,1004821285&fm=253&fmt=auto&app=138&f=JPEG.jpg

用户登录/注册

因为微信小程序一直在变更用户信息获取方式

从# UserInfo => # wx.getUserInfo => # wx.getUserProfile 最后到现在的需要通过用户授权才能获取到头像和昵称,所以初始化注册无法自动补全用户信息

# 小程序用户头像昵称获取规则

前端通过 uni.login 获取用户code

uni.login({success: async (res) => {// 获取用户codeconst {code} = res// 调用云函数登录/注册uniCloud.callFunction({name: 'user',data: {code}}).then(res => {// 存储返回的当前用户的信息uni.setStorageSync('userInfo', JSON.stringify(res.result))this.$store.dispatch('setUserInfo', res.result)})}
})

user云函数负责处理登录返回用户信息,未注册则自动注册后返回用户信息

/*
* 通过请求session接口获取用户openId(微信用户唯一标识)
* appid、secret在公众平台查看
*/
const res = await uniCloud.httpclient.request('https://api.weixin.qq.com/sns/jscode2session', {method: 'GET',data: {appid,secret,js_code,grant_type: 'authorization_code'},contentType: 'json',dataType: 'json'
})
/*
* 通过user集合的length可判断是否注册
*/
const {data:user} = await db.collection('user').where({openId}).get()
if(user.length > 0){// 已注册过直接返回用户信息return user[0]
}else{// 未注册则创建用户后返回用户信息const userObj = {nickname: `微信用户${str}`, // 因为初始化无法获取,所以给默认昵称,str:随机字符串avatar: null,openId,phone: ''}await db.collection('user').add(userObj)return userObj
}

记账

ICON图标

引用阿里字体图标,将资源包导入项目static目录,App.vue引入iconfont.css

创建icon组件,通过name参数生成图标

<text :class="'iconfont icon-' + name"></text>
ICONS

计算器

因为微信小程序因为安全策略不支持eval函数,所以这块通过另类实现计算器功能

// 操作符
const code_symbol = ['.', '+', '-']
let str = (this.bill.money === '0' ? '0' : this.bill.money)const end = str[str.length - 1]
// 禁止触发多个操作符
if ((code_symbol.includes(key) && !code_symbol.includes(end)) || (!code_symbol.includes(key)) 
) str += key// 判断操作符变更
if (code_symbol.includes(end) && end !== key) {let key_arr = str.split('')key_arr[key_arr.length - 1] = keystr = key_arr.join('')
}/*
* 计算同理
*/
const code_symbol = ['+', '-']
// 格式化处理展示金额值
const arr = this.formatStr(this.bill.money)
let prev, result
for (let i = 0; i < arr.length - 1; i++) {const item = arr[i]const next = arr[i + 1]// 处理点位符,处理最后位数为操作符if (code_symbol.includes(item)) {item === '+' ? (result = parseFloat(prev || 0) + parseFloat(next || 0)) : (result =parseFloat( prev || 0) - parseFloat(next || 0))prev = result} else {prev = result || arr[i]}
}/** 格式化处理计算 string * return {Array}*/
formatStr(str) {let arr = []const code_symbol = ['+', '-']for (let i = 0; i < str.length; i++) {let len = arr.length === 0 ? 0 : arr.length - 1const v = str[i]if (code_symbol.includes(v)) {arr.push(v)} else {if (code_symbol.includes(arr[len])) {arr[len + 1] = (arr[len + 1] || '') + v} else {arr[len] = (arr[len] || '') + v}}}return arr
}
计算器

月度账单

引入echarts图表,实现收支饼状图

this.$refs.incomeChart.setOption({
tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'
},
grid: {left: 20,
},
legend: {type: 'scroll',orient: 'vertical',right: 10,top: 10,bottom: 30,data: this.incomeData.map((v) => {return v.name}),formatter: function(name) {return name.length > 4 ? `${name.substring(0,4)}...` : name;}
},
toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},restore: {show: true},saveAsImage: {show: true}}
},
series: [{type: 'pie',radius: ['40%', '70%'],center: ["30%", "50%"],label: {show: false},emphasis: {label: {show: true}},data: this.incomeData
}]
微信图片_20230330170838.jpg

年度账单

这块需要判断查询年份是否为当年,如果为本年度则只展示到当前月份,如果为过去年份,则展示全年统计

const now = new Date().getFullYear()
const months = ((this.year === now) ? (new Date().getMonth() + 1) : 12)
微信图片_20230410131558.jpg

协同账单

// 账单Schema
{name, // 账单名称img, // 缩略图users: [userId], // 成员、默认加入创建人createTime: Date.now(), bills: [], // 账单createUser: userId, audit, // 是否需要审核member, // 是否允许成员记账allocation // 计算方式
}// 邀请用户自动加入
if (!res.users.includes(this.userInfo.openId)) {// 判断是否开始审核if (!res.audit) {await uniCloud.callFunction({name: 'add-share-user',data: {_id: this.shareId,openId: this.userInfo.openId}})this.getDetail(this.shareId)} else {// 触发审核const params = {ownId: res.createUser,shareBillId: this.shareId,auditId: this.userInfo.openId}await uniCloud.callFunction({name: 'send-audit',data: params})setTimeout(() => {this.$refs.toast.show({model: 'warn',label: '创建者已开启审核,待审核通过后自动加入'})}, 1000)}
}
微信图片_20230410131554.jpg

我的

这块主要说下个人设置,因为现在获取用户头像和昵称需要用户授权

官方文档说的是通过个人设置页面让用户授权获取,参考文档:头像昵称填写能力

注:如果需要存储用户手机号等敏感信息,务必在填写页面声明用户协议及隐私政策,否则不予通过

QQ截图20230410132800.png

总结

记录下时隔好几年重新写小程序,官方生态很多都变了,现在官方越来越注重用户隐私这块了,基本上所以牵扯到用户的地方都需要用户授权后才可调用。代码大部分还是无脑梭出来的,毕竟时间有限,后续还需要优化代码,但是喜欢摆烂就这样吧。对了,我还接入了ChatGPT,但是被官方禁止了,不允许接入,那页面都做了能怎么办,接了个睿智机器人。

转载或者引用本文内容请注明来源及原作者:_元十七 (https://juejin.cn/post/7220262023472103485)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/15662.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

总体设计(软件项目)

1.引言 1.1编写目的 由前面的需求分析&#xff0c;得出了系统的基本需求&#xff0c;要实现整个系统&#xff0c;需要对用户的需求进行设计&#xff0c;概要设计主要是利用比较抽象的语言对整个系统进行概括&#xff0c;确定对系统的物理配置&#xff0c;确定整个系统的处理流…

ChatGPT是什么,一文读懂ChatGPT

ChatGPT是个啥? 近期很多朋友后台私信GPT如何访问,我在网上找到一个免梯子的GPT,使用起来还是挺顺畅的,有需要的可以尝试使用,传送门,界面也挺清新的 近期,OpenAI 发布了 ChatGPT,是一个可以对话的方式进行交互的模型,因为它的智能化,得到了很多用户的欢迎。ChatG…

ChatGPT实战:如何进行高难度沟通

最近发现了一个很实用的 ChatGPT 在职场中的应用场景——高难度沟通。对于一个没有什么经验的职场人来说&#xff0c;在第一次面对催促项目进度、礼貌地告诉甲方你们给的钱实在太少了、向老板反馈最近加班太多了等等沟通场景&#xff0c;会很手足无措。 有了 ChatGPT 之后&…

chatgpt搭建企业级量身定制

如果要搭建企业级量身定制的ChatGPT系统&#xff0c;可能需要经过以下几个步骤&#xff1a; 需求分析和设计&#xff1a;根据企业的实际需求&#xff0c;确定ChatGPT的功能和性能指标&#xff0c;并进行系统设计和架构规划。 数据收集和预处理&#xff1a;收集与应用场…

ChatGPT重磅升级!GPT-4懂幽默、会图文,无所不能,你更焦虑了嘛

AI时代已经来临&#xff0c;AI方便了人类&#xff0c;同时他们将替代人类。 以后很多人可能连做螺丝钉的位子都没有。 你选择主动加入还是被动淘汰&#xff1f; 留给你焦虑的时间不多了

搞笑的chitgpt

纯纯接用chatgpt&#xff0c;这个笑话一看就是英文翻译过来的

IBM 成立 | 历史上的今天

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 2 月 14 日&#xff0c;在 1819 年的今天&#xff0c;打字机和第一台 QWERTY 布局键盘的发明者克里斯托弗肖尔斯&#xff08;Christopher Sholes&#xff09;出…

美通企业周刊 | 生成式AI成为全球焦点;诺维信和科汉森股东批准合并;沈阳威斯汀酒店开业...

以下是一周来美通社发布的企业资讯要点。 热点&#xff1a;ChatGPT 埃森哲最新研究指出&#xff0c;在现实世界和数字世界越来越密不可分的今天&#xff0c;生成式人工智能等技术的迅速演进正在创造更为广阔的全新商业未来。随着ChatGPT的快速兴起&#xff0c;生成式人工智能展…

无论是企业或个人,你知道数据泄露有多严重吗?

现代科技的发展使我们的隐私越来越容易受到侵犯&#xff0c;互联网、社交媒体和智能手机等技术使我们的信息变得更加易于访问和共享。此外商业公司和机构也积极收集和利用我们的个人数据&#xff0c;这些公司和机构可能利用我们的数据来推销产品和服务&#xff0c;或者在不经过…

挖呀挖和ChatGPT-UMLChina建模知识竞赛第4赛季第1轮

DDD领域驱动设计批评文集>> 《软件方法》强化自测题集>> 《软件方法》各章合集>> 参考潘加宇在《软件方法》和UMLChina公众号文章中发表的内容作答。在本文下留言回答&#xff0c;先全部答对者得分&#xff0c;本轮总分为3分。 1. [单选] 以黄老师版“挖…

微博语料情感分析

目录 独创性说明 第一章 绪论 1.1研究背景 1.2课题研究 第一章 情感分析准备 2.1情感分析知识基础 2.2 SnowNLP库 2.3 Word2vec方式 2.3 词向量工作原理 第三章没想好...... 第四章 没想好...... 第五章 没想好...... 写在末尾&#xff1a; Chat一出&#xff0c;…

被ChatGPT骗了!再用ChatGPT可要小心了。

被ChatGPT戏耍的周末 1. 被ChatGPT戏耍全过程2. 拆穿ChatGPT的把戏3. AIGC与内容安全 1. 被ChatGPT戏耍全过程 电动垂直起降飞行器&#xff08;eVTOL&#xff0c;Electric Vertical Takeoff and Landing&#xff09;技术越来越成熟&#xff0c;为了解下相关产品我周末打开了Cha…

清华大学:ChatGPT发展研究报告

围绕ChatGPT的技术军备竞赛正热火朝天&#xff0c;发酵之势愈演愈烈。近日&#xff0c;清华大学沈阳教授团队发布了《AIGC发展研究报告1.0版》&#xff0c;总计192页&#xff0c;分为技术篇、产业篇、评测篇、职业篇、风险篇、哲理篇、未来篇、团队篇等多个篇章&#xff0c;对A…

给ChatGPT喂黑话学得贼快,网友:你把AI教恶心了我们还怎么玩?

梦晨 萧箫 发自 凹非寺量子位 | 公众号 QbitAI ChatGPT彻底让网友们陷入疯狂&#xff0c;也带&#x1f525;了一众理论研究。 原因无他&#xff0c;这只AI说话太“对味”&#xff0c;不仅准确掌握沟通要领&#xff0c;就连人类的语言艺术都玩得明明白白。 这不&#xff0c;让它…

ChatGPT与低代码开发:危机四伏、技术暴走!

随着人工智能技术和低代码开发平台的不断发展&#xff0c;越来越多的企业开始采用AI技术来提高业务效率和创造更好的用户体验。AI技术与低代码开发的结合&#xff0c;为企业节省了大量时间和成本&#xff0c;同时也提高了业务创新和竞争力。然而&#xff0c;一些潜在的问题也开…

ChatGPT 帮我回答 SAP 技术交流群里关于 BAPI 使用的问题

ChatGPT 帮我回答 SAP 技术交流群里关于 BAPI 使用的问题。 一个朋友在我的 SAP 技术交流群里提问&#xff1a; 各位大神们&#xff0c;我在 BAPI_PO_CREATE1 创建委外加工采购订单时&#xff0c;把原来自动带出的BOM组件物料删除了&#xff0c;后续怎么用程序代码 新增一BOM子…

【花雕学AI】ChatGPT帮我快速优化标题:古老的非洲部落,有一种神奇的超音速烫脚舞

关于非洲烫脚舞&#xff0c;直接看看ChatGPT的许多创意&#xff0c;一般人确实想不到&#xff1a; 部落文化的声动震波 非洲之歌:部落的音速节奏 非洲土著的音速脚掌传奇 古老部落的震人心魂之舞 非洲红土之声:脚掌舞的激情 非洲神秘部落的超音速脚掌舞 仙踪般的部落音乐…

2023规划与考核 chatGPT帮我实现 程序员如何提高收入?

然后等了45分钟。 真不错&#xff01;charGPT基本回答了我想问的。

ChatGPT 帮我跑了一个完整的 DevOps 流水线,离了个大谱...

大家好&#xff0c;我是米开朗基杨。 上篇文章给大家介绍了&#x1f449;如何将 N 个 ChatGPT 账号接入微信&#xff0c;今天就来给大家演示一下如何利用 ChatGPT 帮我工作&#xff0c;让自己有更多的时间摸鱼&#xff01; 上篇文章还没看的赶紧去看&#x1f447; 我将 9 个 Ch…