基于微信云开发 SayLove 表白墙微信小程序V1.0

后续会继续更新，敬请期待2.0全新版本~
欢迎添加左边的微信一块儿探讨！ https://www.cnblogs.com/LiangSenCheng/p/11083714.html

项目地址：https://github.com/lx164/SayLove

• [其余开源项目]

1. 表白墙 https://github.com/lx164/SayLove
2. https://www.cnblogs.com/Liang...

Bug修复更新日历

• [2020-05-22] 小bug修复：

1. 修复组件的bug；
2. 修复首页showModal致使出错的bug；

• [2020-04-30] 更新：

1. 修复“情侣脸”云函数bug；
2. 优化“情侣脸”交互逻辑，当没法识别时中断当前操做；
3. 修复“发布表白”、“发布话题”时，没添加图片一直显示加载中的问题；
4. 删除云函数没必要要的依赖包；
5. 全新版本的表白墙正在筹备中....

• [2020-05-20] 说明更新

小程序没有作后台，可是须要后台的能够参考这个官方提供的方案，https://mp.weixin.qq.com/s/HZ... 和 https://mp.weixin.qq.com/s/TF...

注意：

• “情侣脸”云函数 FaceAPI 的wx-server-sdk依赖须要更新才能正常使用，这里的都是旧版本的,上传云函数前请自行使用npm更新。
• 登陆鉴权：（如今这个不适用了，由于微信小程序的规则改了，这个不符合新规，须要本身根据实际状况修改）
• 后台管理：暂时没有作后台管理界面，直接在云开发后台便可查看管理，您也能够根据本身须要本身写一个简单的管理界面放在小程序端，而后把入口隐藏起来，限制指定用户使用便可。

[TOC]

程序结构

|--App 小程序代码目录
|--|-- cloudfunctions 云函数
|--|--|--|-- DeleteMessage 
|--|--|--|-- DeleteMyLike
|--|--|--|-- Deletes
|--|--|--|-- FaceAPI 阿里云人脸识别API封装
|--|--|--|-- FrofessComment
|--|--|--|-- FrofessZan
|--|--|--|-- Message
|--|--|--|-- SaleComment
|--|--|--|-- SaleZan
|--|--|--|-- ViewNumber
|--|--|--|-- login
|--|-- miniprogram 小程序页面
|--|--|--|-- 略
|--README.md
|--Images 截图

说明

《SayLove》表白墙微信小程序，前台基于校园情书微信小程序进行大量的修改，虽然样式看起来都差很少，可是作了大量的修改。特别是后台部分，后台彻底使用微信小程序云开发，不依赖服务器。前台代码因为是在原做者的基础上根据实际状况作了修改，因此跟原来做者的看起来很像,但并无照搬照抄。

为何我要改写原做者的小程序？由于我尝试过根据原做者的所写的ReadMe进行配置，发现过程过于复杂，并且依赖因素太多，尝试了不少次都没法成功。在本身的好奇心驱使下，就基于原项目进行的改写，后台改写为微信小程序云开发，使其安装配置变得很是简单，拿来就能够直接使用了。

参考源项目的内容以下：

• 主要是参考了他的点子，并非彻底照搬照抄
• 界面的大致布局，好比：板块布局、配色没有修改，
• 除了大布局上之外，基本全部小布局都有更改（具体见下面的）
• 【注】：个人初衷目的，并非为了直接拿别人的项目修修改改，而后就说这是个人成果。
• 我看到原做者的项目是一个偶然的机会，当时有刚好我在学微信小程序的云开发，因此就参考原做者的项目进行了云开发的修改适配，做为学习成果的验证。除了这个之外并无其余的目的，也所以把我本身的也开源了。
• 参考的源项目做者地址为：https://github.com/oubingbing...
• 本项目的地址：https://github.com/lx164/SayLove

重构率超过了60%以上，若是不是借鉴了源项目的点子话，基本上能够说是本身重写的了，
大修改部分以下：

• 后台：本身构造，彻底依赖于云开发，无需搭建后台服务器
• 全部数据的结构：彻底是本身构造的（由于后台不同，因此数据的构造彻底不同）
• 登陆鉴权：本身从新写的（如今这个不能够用了，由于微信小程序的规则改了，这个不符合新规，须要本身修改）
• 首页新消息通知：本身从新写的（没有直接使用参考的原项目）
• 各个板块的点赞、评论：从新根据本身的须要从新编写，对其进行了提高（由于后台不同，因此数据的结构须要从新构造）
• 各个板块的图片上传：界面以及逻辑代码是本身从新的（参考的源项目使用的是插件，这里改成了原生的），图片保存在云开发的后台
• 卖舍友板块：瀑布流重写，没有使用原来的瀑布流
• 发布话题、发布卖舍友部分重写：根据本身的须要进行了重写
• 情侣脸板块：本身封装阿里云人脸识别的接口，来适配云开发
• 我的中心板块重写：本身从新构造了消息通知

本程序已经通过测试，拿来按照说明简单配置就能够直接使用,界面能够本身进行修改。本人热爱小程序，目前上线并维护的有两个，后面看状况再找时间进行开源。

因为本人的能力有限，还有不少地方无法完善，望指正！

附：(微信小程序云函数) 阿里云人脸比对API封装 https://www.cnblogs.com/LiangSenCheng/p/10922979.html

配置过程

由于项目里含有微信小程序云开发用到的依赖，所以体积比较大。

1. 直接下载源码,源码地址：https://github.com/lx164/SayL...

或者clone项目 git clone https://github.com/lx164/SayLove/tree/master/App

1. 打开微信开发者工具，导入项目（导入的时候请选择 APP 文件夹）；
2. 填写APPID；
3. 开通云开发环境（请参考官方文档）；
4. 新建如下数据库集合,一行为一个集合名（不要写错）：

comment
    message
    mylike
    parise
    posts
    sale_friends
    topics

而后把以上的集合权限修改成：全部用户可读，仅建立者可读写。

1. 填写小程序相关配置信息；

配置文件在 App/miniprogram/config.js ,填写如下的配置信息：

// 小程序APPID
    const APPID = ''
    // 小程序SECRET
    const SECRET = ""
    // 云开发环境ID
    const CLOUNDID = ''
    // 消息刷新时间，单位：毫秒
    // 默认10秒刷新一次，即10000毫秒
    // 根据实际须要进行调节
    const FLASHTIME = 10000000

以下图：

7.填写阿里云面部识别相关配置信息【选填】：

注意：若是不须要使用 情侣脸 功能的话，请跳过该步骤

• 7.1 阿里云的AccessKey和AccessKeySecret的获取，以及人脸识别服务的开通请参考官方文档。

// 请填写完整
    // 阿里云的AccessKey
    var ak_id = '';
    // 阿里云的AccessKeySecret 
    var ak_secret = '';

AccessKey和AccessKeySecret的填写位置如图：

• 7.2 检查云函数 FaceAPI 所须要的依赖是否已安装；

// 1. 若是已经安装请自行使用npm更新；
    // 2. 若是没有安装，则使用下面命令安装：
    npm install crypto
    npm install request
    npm install url
    npm install wx-server-sdk

• 7.3 上传云函数 APP/cloudfunctions/FaceAPI，上传时选择 上传并部署：全部文件；

1. 上传 APP/cloudfunctions 文件夹下（除了APP/cloudfunctions/FaceAPI之外）全部的云函数，上传时选择 上传并部署：云端安装依赖；
2. 编译运行。

结语

欢迎一块儿探讨，若是能够，能够给我一个start，或者

程序效果图

云开发 quickstart

这是云开发的快速启动指引，其中演示了如何上手使用云开发的三大基础能力：

• 数据库：一个既可在小程序前端操做，也能在云函数中读写的 JSON 文档型数据库
• 文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
• 云函数：在云端运行的代码，微信私有协议自然鉴权，开发者只需编写业务逻辑代码

参考文档

• 微信小程序云开发文档
• 人脸比对API调用说明文档