关于前端:一个项目模版H5小程序

我在找是什么

wozaizhao.com 是我很久以前注册的一个域名，起初也相继注册了我在找公众号，我在找小程序。都是用来做一些试验性质的我的项目。

为什么有这个我的项目

这个我的项目就是一个 模版 ，我是一名前端工程师，也会点后端，我常常会有一些 idea，想做一个利用，挪动端利用或小程序什么的，每个我的项目初始都要做一些技术选型、框架搭建、登录注册上传接口等前期工作，这个模版曾经实现这些，让我在开始一个新我的项目时，只有定义一个主题色，而后就能够间接进入到业务开发阶段。
这个模版分三个子项目：h5 端、小程序端、后端；技术栈别离是 vue3，小程序原生开发，go 语言。

[2022-03-01] 新增深色模式，H5 及小程序同时加上了深色模式

技术选型

这个我的项目应用了以下这些技术：

• vue3
• vant 风行的挪动端 vue3 UI 库
• tailwind css 工具类，不便用来布局页面
• 小程序登录 应用 openID 登录
• jweixin.js 在 vue3 中应用 在 web 页面申请公众号接口
• mysql
• golang

前端特色

• 深色模式 小程序及 H5，都能应用深色模式
• 图片上传及裁剪 应用 input 上传，公众号接口上传，小程序上传等三种形式上传图片，在小程序及 H5 都进行图片裁剪
• 在 webview 中更改用户同步到小程序

性能

• 极验滑块验证

  获取手机验证码时，应用了极验的人机验证

• 应用手机号及验证码登录

  应用小程序登录时，会记录 openID，下次关上小程序主动应用 openID 登录

• 应用小程序 openID 快捷登录

  小程序或 h5 应用 openID 快捷登录

• 小程序登录 code2Session 接口

  应用本接口，来失去 openID

• 公众号 GetConfig 接口

  应用本接口，获取公众号配置，而后能够应用 jssdk 性能

• 小程序滑块验证接口

  腾讯官网提供的小程序人机验证插件后端接口实现

• 获取以后用户

  依据 token 获取以后登录的用户信息

• 更新用户信息（头像、昵称、性别、简介等）

  更新用户的各项信息

• 上传

  上传文件，以后仅用来更新头像，应用七牛云存储图片及 cdn 性能

• 短信验证码

  应用阿里云通信服务发送短信验证码

技术特点

• 代码查看及格式化

  h5 及小程序应用 eslint 查看代码，应用 prettier 格式化代码；go 自带代码查看及格式化。

• Github Actions 自动化部署

  提交代码即主动部署

• vue3+vite

  应用 vue3 及 vite 来构建 h5 端

• vant+tailwind

  h5 端应用 vant 组件库，同时搭配 tailwind 辅助，根本不须要写 css。

• jweixin

  h5 端在微信中关上时，通过 jssdk 应用公众号接口

• 在小程序中应用 async await

  应用 async await 使代码逻辑更正当清晰

• jwt

  应用 jwt token 鉴权

• https

  应用接口及资源应用 https，全为收费计划：阿里云收费证书及 letsencrypt 服务

H5 端

小程序端

小程序界面根本同 h5 端一样，先写的 h5 端，而后移植为小程序代码，tailwind 间接复制 h5 端生成的大量 tailwind css 代码。

dark mode

服务端

次要应用以下库

• github.com/alibabacloud-go/dysmsapi-20170525/v2 阿里云通信 sdk
• github.com/gin-gonic/gin 风行的 go web 框架
• github.com/golang-jwt/jwt jwt
• github.com/qiniu/go-sdk/v7 七牛云 sdk
• github.com/silenceper/wechat/v2 微信 sdk
• github.com/sirupsen/logrus 日志
• gorm.io/gorm orm 库，操作 mysl

第三方服务

• letsencrypt 收费证书服务，反对泛域名
• 极验 滑块验证码服务商，在我的项目中用来做发短信的人机认证
• 腾讯验证码 腾讯官网提供的验证码组件
• 阿里云 云服务商，我的项目的前后端都布署在阿里云服务器上，数据库是跑云服务器的 docker 中，同时我的项目的短信服务、域名等用的也是阿里云的
• 七牛云 云计算及数据服务提供商，我的项目中的存储，次要是图片存储用的是七牛云

欢送与我分割

我的项目地址 https://github.com/wozaizhao
我的微信 beetle2013