前言

由于自己有记账的需求，在尝试使用过市面上的记账软件后，发现大多数都有以下几个问题

• 广告比较多，主要分为信息流广告及金融类广告
• 页面太痈肿，使用体验不好
• 部分高级功能需要收费，如数据导出

所以就萌生了自己做一个记账软件的想法，这个想法在2020年5月左右落地的，到目前也快有一年了。 本着OpenSource的想法，已全部开源，也想借写博客的机会获得一些Star❤

测试环境

• PC端：简账PC端

正式环境：

• 小程序：微信搜索【简账】
• PC端：简账PC端

Github开源地址：

• Java后端：简账后端
• PC端：简账PC端
• 小程序：简账uniapp

后续要完成的功能（重要性至上而下）

• 支持多账本，可自定义维护
• 支持设置预算（年月预算）
• 支持多账本间冲销
• 支持Excel导出（年或月可自定义）
• 支持多人记账及家庭账本

待解决的Bug

• 如用户未登录过小程序，小程序扫码授权会提示Token不能为空（提供者：喵了个小咪咪）

写在后面
如果你有其他的想法或问题欢迎给我留言，或在Github上提Pr&Issue
tips：如果你也想你写的东西被人使用，欢迎跟我一起维护简账～

往期链接

• 简账主要功能介绍
• 简账后端环境简介及部署
• 简账前端环境简介及部署

---

一、问题复现

首先感谢一下喵了个小咪咪的反馈

经测试，通过以下步骤可以复现

1. 简账小程序退出
2. 打开简账PC端
3. 微信扫码
4. 提示授权
5. 点击授权后，会提示Token不能为空

二、问题分析定位

既然能复现问题，那么解决问题也不是什么难事了！

1.首先看一下正常的登录流程（部分细节已简化）

2.问题定位

通过Debug发现以下两种情况会出现授权时提示token不能为空

• 用户还未登录就扫码授权
• 用户网络环境较差时，还未获取到token就发起了授权

综上所述，正确的授权流程图如下所示

三、解决问题

tips：以下代码均可在Github中找到，代码请查看简账微信小程序

1.确保页面onload在onLaunch之后执行

在main.js中挂载$store

Vue.prototype.$onLaunched = new Promise(resolve => {
    Vue.prototype.$isResolve = resolve
})
Vue.prototype.$store = store	// 挂载在Vue实例上

2. 启动时尝试获取token

如果有openId则请求到token再放行，如没有直接放行

onLaunch: function() {
	console.log('App Launch');
	let userInfo = uni.getStorageSync("userInfo");
	if(userInfo.openId) {
		// 如果本地有存储的用户信息
		this.$u.api.wxLogin({
			openId : userInfo.openId,
			username: userInfo.name,
			nickname: userInfo.nike,
			sex: userInfo.sex,
			avatar: userInfo.avatarUrl
		}).then(res => {
			this.login(res);
			this.$isResolve();
		}).catch(e => {
			console.log('login error');
			this.$isResolve();
		});
	}else {
		// tips：微信审核不通过，取消强制登录
		// 立即跳转到登录页面
		// uni.redirectTo({
		//     url: '/pages/login/index'
		// });
		this.$isResolve();
	}
}

3. 页面onload方法

async onLoad(option) {
	console.log('detail show');
	//option为object类型，会序列化上个页面传递的参数
	const uuid = option.scene
	//等待登录成功	
	await this.$onLaunched;
	if(!this.hasLogin) {
		this.show = true;
	} else{
		// 授权登录
		if(uuid && uuid.length === 32) {
			this.authInfo.uuid = uuid
			// 获取用户信息
			this.getUserToken()
			await this.scannQrcode(uuid)
			this.authInfo.showAuth = true
		}
	}
}

3. 结果

经测试，已解决此Bug。
如果感兴趣，你也可以自己试一下~

四、总结

在社区中写了几篇简账的博客后，现已有110+用户。在此感谢注册了简账的各位，谢谢😊
如果你觉我这个项目还不错的话，不妨给我的Github点个Star♥