当前位置: 首页 > Web前端 > vue.js

基于微信云的SayLove告白墙微信小程序V1.0

时间:2023-04-01 01:38:19 vue.js

后续将持续更新,敬请期待2.0新版本~欢迎加左侧微信一起讨论!https://www.cnblogs.com/LiangSenCheng/p/11083714.html项目地址:https://github.com/lx164/SayLove【其他开源项目】告白墙https://github.com/lx164/SayLovehttps://www.cnblogs.com/Liang...Bug修复更新日历[2020-05-22]小bug修复:修复组件bug;修复导致首页showModal错误的bug;[2020-04-30]更新:修复“情侣脸”云功能bug;优化“情侣脸”交互逻辑,无法识别时中断当前操作;修复“发表白”和“发话题”,加载不加图一直显示的问题;删除云函数不起作用必要的依赖包;新版告白墙正在准备中...[2020-05-20]显示更新小程序没有后台,需要后台的可以参考这个官方解决方案,https://mp.weixin.qq.com/s/HZ...和https://mp.weixin.qq.com/s/TF...注:“情侣脸”云函数FaceAPI需要wx-server-sdk依赖待更新为正常使用,这里都是旧版本,上传云函数前请使用npm更新。登录认证:(这个现在不适用,因为微信小程序的规则改了,这个不符合新规定,需要根据实际情况修改)后台管理:没有后台管理界面暂时直接使用云开发后台View管理即可,也可以根据自己的需要写一个简单的管理界面放在小程序端,然后隐藏入口,限制指定用户使用。[TOC]程序结构|--App小程序代码目录|--|--cloudfunctions云函数|--|--|--|--DeleteMessage|--|--|--|--DeleteMyLike|---|--|--|--删除|--|--|--|--FaceAPI阿里云人脸识别API封装|--|--|--|--FrofessComment|--|--|--|--FrofessZan|--|--|--|--留言|--|--|--|--SaleComment|--|--|--|--SaleZan|--|--|--|--ViewNumber|--|--|--|--login|--|--miniprogrampage|--|--|--|--brevity|--README.md|--Images截图说明《SayLove》告白墙微信小程序,前台在校园情书微信小程序的基础上做了很多修改,虽然样式看起来差不多,但是修改了不少。特别是后台部分,后台完全使用微信小程序云开发,不依赖服务器。因为前端代码是在原作者的基础上根据实际情况修改的,看起来和原作者的很像,但不是抄袭。为什么要重写原作者的小程序?因为我尝试按照原作者写的ReadMe进行配置,发现过程过于复杂,依赖因素太多,所以尝试了很多次都失败了。出于自身好奇心的驱使,我在原有项目的基础上进行了重写,后台重写为微信小程序云开发,使其安装配置非常简单,直接使用即可。参考源项目内容如下:主要参考了他的思路,没有完全照搬界面的大体布局,比如:板子布局和配色都没有修改,除了大布局,基本都是小版面改了(详见下文)【注】:我的本意不是直接修改别人的项目,然后说这是我的成果。一次偶然的机会看到了原作者的项目。当时刚好在学习微信小程序的云开发,于是参考原作者的项目对云开发进行了修改适配,作为学习成果的验证。除此之外没有别的目的,所以我也开源了自己的。参考源码项目作者地址:https://github.com/oubingbing...本项目地址:https://github.com/lx164/SayLove重构率超过60%,如果源码不供参考项目的思路基本上可以说是自己改写的,主要修改如下:背景:自建,完全依赖云开发,无需搭建后台server所有数据结构:完全自己搭建(因为后台不一样,所以数据结构完全不一样)登录认证:自己重写(这个现在没有了,因为微信小程序的规则已经被改写了)改了,这个不符合新规定,需要自己修改)首页新消息通知:自己重写的各版块点赞评论(不直接使用引用的原项目):根据自己的需要重写并完善(因为背景不一样,所以需要重构数据结构)每节图片上传:界面和逻辑代码自己重新制作(参考源项目使用插件,改为原生),图片保存在云端开发后台。瀑布发布话题发布卖室友改写:根据自己的需要改写情侣脸部分:自封装阿里云人脸识别接口,适应云开发个人中心部分改写:重构自己消息提示本程序已测试,按照说明简单配置后即可直接使用,界面可自行修改。我喜欢小程序。目前在线和维护的有两个,后面看情况找时间开源。由于本人能力有限,还有很多地方无法完善,敬请指正!附:(微信小程序云功能)阿里云人脸比对API封装https://www.cnblogs.com/LiangSenCheng/p/10922979.html配置过程是因为项目中包含了微信小程序云开发中使用的依赖,所以,体积比较大。直接下载源码,源码地址:https://github.com/lx164/SayL...或者克隆项目gitclonehttps://github.com/lx164/SayLove/tree/master/App打开微信开发者工具、导入Project(导入时请选择APP文件夹);填写APPID;打开云开发环境(请参考官方文档);创建如下数据库集合,每行有一个集合名(不要弄错):commentmessagemylikeparisepostssale_friendstopics然后将上面的集合权限修改为:所有用户可读,只有创建者可读可写。填写小程序的相关配置信息;配置文件在App/miniprogram/config.js,填写如下配置信息://小程序APPIDconstAPPID=''//小程序SECRETconstSECRET=""//云开发环境IDconstCLOUNDID=''//消息刷新时间,单位:毫秒//默认10秒刷新一次,即10000毫秒//根据实际需要调整constFLASHTIME=10000000如下图:7.填写相关配置阿里云人脸识别信息【可选】:注:如果不需要使用情侣脸功能,请跳过此步骤7.1阿里云的AccessKey和AccessKeySecret的获取,以及人脸识别服务的开通,请参考到官方文档。//请完整填写//阿里云的AccessKeyvarak_id='';//阿里云的AccessKeySecretvarak_secret='';AccessKey和AccessKeySecret填写位置如图:7.2检查云函数FaceAPI需要的依赖是否已经安装;//1.如果已经安装,请使用npm更新;//2.如果没有安装,使用以下命令安装:npminstallcryptonpminstallrequestnpminstallurlnpminstallwx-server-sdk7.3上传云函数APP/cloudfunctions/FaceAPI,上传时选择uploadanddeploy:全部文件;上传APP/cloudfunctions文件夹下的所有云函数(APP/cloudfunctions/FaceAPI除外),上传时选择uploadanddeploy:cloudinstallationdependencies;编译运行。结束语欢迎大家一起讨论,如果可以,可以给我一个入门,或者程序渲染云开发快速入门这是一份云开发快速入门指南,演示了如何入门云开发的三大基本能力:数据库:小程序前端操作,JSON文档型数据库文件存储,云函数也可读写:直接在小程序前端上传/下载云文件,可视化管理云函数intheclouddevelopmentconsole:代码运行在云端,微信私有协议自然认证,开发者只需要编写业务逻辑代码参考文档微信小程序云开发文档人脸比对API调用说明文档