擼一個微信小程序記事本備忘錄-隨微記

廢話很少說了，目的直接點

• 微信上記錄一些資料(好比公司信息以及開發票等)，方便查看
• 能夠隨時分享出來，能夠生成圖片海報
• 作一些工具（後續開放）

最後總結就是弄它，隨微記是本身想的，頁面也是本身佈局，海報的配置可能也有本身的喜愛存在

目前版本爲V1.0.0，在此篇文章不會有代碼的東西

認知(須要改善)：

• 沒有各類的app好用
• 沒有手機自帶備忘錄的好用

微信小程序

技術

• 微信小程序原生api
• Taro
• ColorUi組件庫

功能列表

• 隨微記首頁
• 微信小程序受權(受權用戶信息保存至雲開發數據庫和同步保存到我的服務數據庫)
• 用戶筆記本添加
• 用戶筆記本列表（目前：每一個用戶擁有最多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);
	}
}
複製代碼

資源連接

• koa-generator
• koa
• koa-swagger-decorator

後續開發

後續後開發圍繞微信和備忘錄的一系列的工具或者功能，歡迎指出不足和功能改善，或者你想要的功能

小程序二維碼

最後一句：若是想作個東西就是動手作，不要擔憂好很差用，要從中找到你缺少的地方和不成熟的地方，這樣對技術和產品就會多瞭解一點

曾經不少個點子在腦海中拂過，就是沒有動手作過

複製代碼