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

35次阅读

共计 1800 个字符,预计需要花费 5 分钟才能阅读完成。

我在找是什么

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 端

screenscreenscreen
登录滑块验证登录提交
我的个人信息更新

小程序端

screenscreenscreen
登录我的webview 我的

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

dark mode

screenscreenscreen
登录我的设置

服务端

次要应用以下库

  • 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

正文完
 0