撸一个微信小程序记事本备忘录-随微记

7,909 阅读3分钟

废话不多说了,目的直接点

  • 微信上记录一些资料(比如公司信息以及开发票等),方便查看
  • 可以随时分享出来,可以生成图片海报
  • 做一些工具(后续开放)

最后总结就是弄它,随微记是自己想的,页面也是自己布局,海报的配置可能也有自己的喜好存在

目前版本为V1.0.0,在此篇文章不会有代码的东西

认知(需要改善):

  • 没有各种的app好用
  • 没有手机自带备忘录的好用

微信小程序

技术

功能列表

  • 随微记首页
  • 微信小程序授权(授权用户信息保存至云开发数据库和同步保存到个人服务数据库)
  • 用户笔记本添加
  • 用户笔记本列表(目前:每个用户拥有最多6个笔记本,每个笔记本最多写100个笔记)
  • 笔记本删除(完全删除)
  • 笔记本详情
  • 添加文字笔记(可以复制)
  • 添加图文笔记
  • 编辑笔记
  • 删除笔记
  • 图片上传到阿里oss存储
  • 文字笔记分享海报
  • 图文笔记分享海报
  • 笔记分享海报(二维码实时生成)
  • 笔记本删除之后图片清理
  • 增加图片笔记
  • 共享笔记
  • 工具(暂未开放)
  • pc预览版

还有未完成的功能后续更新

界面介绍

遇到问题

  • 本来想使用小程序的富文本editor做图文内容,但是图片必须是上传到服务器之后,真机才支持显示,而且还有一些兼容性的问题,可能后期会更改为editor
  • 上传文件遇到限制问题,一般手机拍照现在都很大,如果连续上传太多就会有限制问题(可能自己弱,还没有找到解决办法),因此修改为阿里Oss签名直传

云开发

云开发数据主要的存储是用户的列表以及用户笔记本和笔记的数据

本来想用存图片,第一版本的时候遇到了图片size限制的问题,因此近期改版为上传至阿里Oss

Node + koa + mysql 服务

  • koa-swagger-decorator自动生成api文档
  • 文字笔记海报配置
  • 图文笔记海报配置
  • 分享海报配置
  • 用户同步数据
  • 模板使用情况记录
  • 分享日志记录
  • https域名部署
  • node项目部署pm2进程监控
  • 图片删除任务更新
  • 后台session登录
  • mysql使用
  • 后台未完成功能有点多,在此不列了
"dependencies": {
    "@babel/polyfill": "^7.4.4",
    "axios": "^0.19.0",
    "debug": "^4.1.1",
    "koa": "^2.7.0",
    "koa-bodyparser": "^4.2.1",
    "koa-convert": "^1.2.0",
    "koa-generic-session": "^2.0.1",
    "koa-json": "^2.0.2",
    "koa-logger": "^3.2.0",
    "koa-onerror": "^4.1.0",
    "koa-redis": "^4.0.0",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "koa-swagger-decorator": "^1.5.16",
    "koa-views": "^6.2.0",
    "moment": "^2.24.0",
    "mysql": "^2.17.1",
    "pug": "^2.0.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/parser": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@babel/plugin-transform-object-assign": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/register": "^7.5.5",
    "cross-env": "^5.2.0",
    "install": "^0.13.0",
    "nodemon": "^1.19.1",
    "npm": "^6.10.2"
  }
  • 路由配置
const tag = tags(['WeChat']);
@prefix('/api/user')
export default class WechatRouter {
	@request('post', '/authorize')
  @summary('微信授权登录')
  @description('登录之后返回sesscion和openid')
  @tag
	@body({
		code: { type: 'string', required: true, default: '', description: '小程序code' },
	})
	static async authorize(ctx) {
		let { code } = ctx.request.body;
    let str = ctx.request.body?.code;
    // console.log('开始访问请求参数2', APPID, APPSECRET, str)
    let res = await getOpenId(code);
    ctx.body = new SuccessModal(res);
	}
}

资源链接

后续开发

后续后开发围绕微信和备忘录的一系列的工具或者功能,欢迎指出不足和功能改善,或者你想要的功能

小程序二维码

最后一句:如果想做个东西就是动手做,不要担心好不好用,要从中找到你缺乏的地方和不成熟的地方,这样对技术和产品就会多了解一点

曾经很多个点子在脑海中拂过,就是没有动手做过