#小程序云开发挑战赛#-省计数字监理-东莞队
发布于 4 年前 作者 vxiong 3771 次浏览 来自 分享

“省计数字监理”为企业内部应用系统，围绕信息系统监理工作而开发的一款内部应用系统，项目分三期逐步实现，目前已经完成了第一期的计划并上线使用。项目由一个微信小程序与一个Web应用（https://newruler.com.cn）构成，由于为__企业内部应用，需要授权后才能正常使用__。

小程序与Web应用共用一套腾讯云开发环境作为后端，Web应用基于Nuxt.js开发实现，使用Serverless Framework部署在腾讯云，可以参考https://github.com/serverless-components/tencent-nuxtjs/。

系统架构：

本项目只是使用云开发解决方案标准技术架构（https://cloud.tencent.com/document/product/876/20232）与Serverless Framework技术（https://cloud.tencent.com/document/product/1154/38787），没有额外使用其它外部技术与功能，技术架构如下图所示。

项目技术特点：

  1. 由于项目基于腾讯云开发环境，不用封装后台API，前端直接使用云开发SDK，技术难度与工作量极大降低，整个项目的工作仅由作者一个人完成；
  2. 通过微信开放平台（https://open.weixin.qq.com/）打通用户账号体系。Web应用实现了扫码登录，考虑到手机端Web端扫码登录不方便的问题，Web端面同时也支持自定义登录（https://cloud.tencent.com/document/product/876/41731），对于自定义登录账号通过再次扫码登录完成绑定UnionID，打通了微信小程序与Web端同一用户的身份识别问题；
  3. Web端使用 Responsive web design (RWD) 与 Progressive web application (PWA) 技术提升了用户在多屏环境下的使用体验；
  4. Web端封装了通用的过滤查询组件，列表界面更加简洁，不用每个列表界面重复实现过滤输入框及对应的逻辑。

效果截图：

1）微信小程序主要功能界面

2）Web手机端与PC端对比效果

  • 扫码登录
  • 自定义登录
  • 首页
  • 列表页
  • 表单页
  • 权限管理

产品演示视频地址：

  1. https://v.qq.com/x/page/o31501kbt83.html
  2. https://www.bilibili.com/video/BV18K4y1a7u4/

关于代码：

项目总共两个库，分别对应微信小程序（https://git.weixin.qq.com/scottwan/JGB.git）与Web端（https://git.weixin.qq.com/scottwan/gdcc-digital-work）的两部分。

我的故事：

这已经是我第三个云开发的项目了，第一个是一个社区电商的小程序，终端用户的功能与商家和平台的管理均由基于云开发的微信小程序完成，当时云开发数据库的权限控制还只有四种基本的控制方式，没有现在的安全规则。后来还写了一个医学专业相关的学考评小程序，一个老外的项目，问我要多少钱，我当时不过想拿机会跟他锻炼下外语，几乎没有要钱，虽然功能很快就完成了，但那个项目最终没有上线。我不是职业程序员，以前也没有正式写过WEB项目，所以我的第一个项目花了很多时间在研究CSS上面，但这一个项目就轻松多了，微信小程序端完全没有什么问题，WEB端刚开始使用的是云开发的HTTP API，差不多作完的时候才知道有一个web sdk，所以WEB前后端的调用废了重来，最后接入了微信的开放平台，完成了扫码登录。

下面是我的第一个已经上线的项目，欢迎大家体验。

回到顶部