美文网首页前端大讲堂
5天时间搭建一个复杂的微信小程序

5天时间搭建一个复杂的微信小程序

作者: 前端大课堂 | 来源:发表于2019-03-31 10:03 被阅读3次

    如何5天时间快速搭建了一个包含前端后台的微信小程序【找微群小工具】。

    01 小程序【找微群小工具】介绍 

    这个小程序功能是可以查找和发布微信群,还可管理自己发布的微信群。涉及到后台几个、上传图片等等功能。总体是比较复杂的,下面我对其所有功能一一分解。先看下面三个页面, 

    也可以用微信扫二微码体验, 

    02 开发过程 

    先说前端部分,要开发好看的界面如果从头开始写样式是不现实的,写出来也不好看,因为需要设计同学给相应的设计稿。一般的前端同学在短时间是不可能做到好看的。所以这里的技术选型是用 Wepy + ColorUI, 原因可以看这篇文章《利用 Wepy + ColorUI 框架快速开发小程序》

    后台要考虑的东西就很多了,预先要购买腾讯云的服务器一台,域名申请备案。 后台是基于 express 部署的 Node 服务。 在云服务器上还要自己安装 Mysql。 安装的方式以及可能的问题可以查看文章《手把手教你在腾讯云服务器安装Mysql》。 

    接下来就要设计几张数据表,用户表、微信群列表。在每个用户进入到小程序时要去获取用户的标识 id, 其实在小程序中就是 openid, 每个用户在相应小程序的 openid 是不会变的,但相同用户在不同小程序的 openid 是不同的。 

    具体在用户访问进入小程序是获取 openid 的方法,可以查看微信小程序的开发文档,后续可以写个文章来说明。这里简单说明下,前端调用 wx.login, 成功的回调函数会返回一个 code, 同时 node 后台需要提供个接口 wxlogin 接手 code, wxlogin 的逻辑就是拿到前端给的 code 以及小程序的 appid 和 appSecretKey 去调 weixin 的 jscode2session api。返回的结果就有 openid. 

    拿到 openid 之后不同用户的标识就有了。 

    后台需要什么接口呢?

    查询列表接口、模糊搜索列表接口、获取我发布的微信群、发布微信群(同时通过名称校验是否已有微信群)、删除微信群。

    其中用户发布微信群不能没有没有限制,所以在用户表中要记录用户发布的次数,方便通过配置限制用户发布的权限。另外考虑到用户在发布时需要两张图片来说明微信群,一张是封面图、一张是微信的二维码图。 

    所以要提供上传图片的组件。让用户可以自动在相册选择图片上传。 如何上传图片到图床可以查看这篇文章《小程序如何上传图片到腾讯云存储桶》。 

    一切搞好之后,基本体验就有了。 

    然而还要考虑,因为发布的微信群的二维码有7天有效期,所以需要有个定时任务去清理过期的微信群。 

    另外还需要有管理员权限,方便快速在手机上审核用户发布的微信群以及删除微信群。 

    03 总结

    这就是开发复杂小程序的全部过程,是不是很简单呢? 

    欢迎使用这个小程序,可以在上面发布微信群,寻找和你一样兴趣的小伙伴。上面也有 前端分享交流 的群。 有任何问题可以加我微信 mathwlin 讨论。 ~

    相关文章

      网友评论

        本文标题:5天时间搭建一个复杂的微信小程序

        本文链接:https://www.haomeiwen.com/subject/uwuebqtx.html