一个项目模版,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端

screen screen screen
一个项目模版,H5、小程序_第1张图片 一个项目模版,H5、小程序_第2张图片 一个项目模版,H5、小程序_第3张图片
登录 滑块验证 登录提交
一个项目模版,H5、小程序_第4张图片 一个项目模版,H5、小程序_第5张图片 一个项目模版,H5、小程序_第6张图片
我的 个人信息 更新

小程序端

screen screen screen
一个项目模版,H5、小程序_第7张图片 一个项目模版,H5、小程序_第8张图片 一个项目模版,H5、小程序_第9张图片
登录 我的 webview 我的

小程序界面基本同h5端一样,先写的h5端,然后移植为小程序代码,tailwind直接复制h5端生成的少量tailwind css代码。

dark mode

screen screen screen
一个项目模版,H5、小程序_第10张图片 一个项目模版,H5、小程序_第11张图片 一个项目模版,H5、小程序_第12张图片
登录 我的 设置

服务端

主要使用以下库

第三方服务

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

欢迎与我联系

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

你可能感兴趣的:(前端vue.js小程序)