关于前端:一个项目模版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