校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
<blockquote><p>后续会继续更新，敬请期待2.0全新版本~<br>
欢迎添加右边的微信一起探讨！</p>
</blockquote>
<p>项目地址：https://github.com/lx164/SayLove</p>
<ul>
<li>[其他开源项目]</li>
</ul>
<ol>
<li>表白墙 https://github.com/lx164/SayLove</li>
<li>https://www.cnblogs.com/LiangSenCheng/p/12543230.html</li>
</ol>
<blockquote>
<p>Bug修复更新日历</p>
</blockquote>
<ul>
<li> 更新说明：</li>
</ul>
<p>如果公众号搜索找不到，可以加我微信哈，微信在文章右边。</p>
<ul>
<li> 重磅更新说明：</li>
</ul>
<ol>
<li>
<p><code>更新保姆级别的部署视频教程。</code></p>
</li>
<li>
<p>升级版本，重构用户模块，增加登录注册和用户管理等功能，修复1.0版本的bug。</p>
</li>
<li>
<p><code>新版源代码和部署教程获取：关注公众号 【开源分享汇】，回复【教程】 即可获取</code>。</p>
</li>
</ol>
<ul>
<li> 更新说明：</li>
</ul>
<ol>
<li>
<p>【 <em><strong>课设毕设参考专用版本</strong></em> 】针对 昵称显示 <code>微信用户</code>、 头像只显示灰色头像等的问题进行了修复，需要了解详情以及新代码的话，请加我微信了解（<em><strong>请备注来源、来意</strong></em>） 点击这里</p>
</li>
<li>
<p><code>情侣脸</code>功能大家不要使用了，现在阿里云的接口已经要收费了(土豪请随意)，官方文档看这里</p>
</li>
</ol>
<ul>
<li> 更新说明：</li>
</ul>
<p>最近有不少反馈说，为什么已经注册成功了，在首页还是一直弹窗提示要注册，这个问题是因为上个月微信改了授权规则了，这里的授权规则需要你自己修改一下。官方具体公告请参考这里</p>
<ul>
<li> 小bug修复：</li>
</ul>
<ol>
<li>修复组件的bug；</li>
<li>修复首页showModal导致出错的bug；</li>
</ol>
<ul>
<li> 更新：</li>
</ul>
<ol>
<li>修复“<code>情侣脸</code>”云函数bug；</li>
<li>优化“<code>情侣脸</code>”交互逻辑，当无法识别时中断当前操作；</li>
<li>修复“<code>发布表白</code>”、“<code>发布话题</code>”时，没添加图片一直显示加载中的问题；</li>
<li>删除云函数不必要的依赖包；</li>
<li>全新版本的表白墙正在筹备中....</li>
</ol>
<ul>
<li> 说明更新<br>
小程序没有做后台，但是需要后台的可以参考这个官方提供的方案，https://mp.weixin.qq.com/s/HZCVnnau3grmKA06E-M-yg 和 https://mp.weixin.qq.com/s/TFc2fj-gOVwAvs603WZG_A</li>
</ul>
<blockquote>
<p>注意：</p>
</blockquote>
<ul>
<li>“<code>情侣脸</code>”云函数 <code>FaceAPI</code> 的wx-server-sdk依赖需要更新才能正常使用，这里的都是旧版本的,上传云函数前请自行使用npm更新。</li>
<li><code>登录鉴权</code>：（现在这个不适用了，因为微信小程序的规则改了，这个不符合新规，需要自己根据实际情况修改）</li>
<li><code>后台管理</code>：暂时没有做后台管理界面，直接在云开发后台即可查看管理，您也可以根据自己需要自己写一个简单的管理界面放在小程序端，然后把入口隐藏起来，限制指定用户使用即可。</li>
</ul>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>程序结构</li><li>说明</li><li>配置过程</li><li>结语</li><li>程序效果图</li><li>云开发 quickstart</li><li>参考文档</li></ul></div><p></p>
<h2 id="程序结构">程序结构</h2>
<pre><code>|--App 小程序代码目录
|--|-- cloudfunctions 云函数
|--|--|--|-- DeleteMessage
|--|--|--|-- DeleteMyLike
|--|--|--|-- Deletes
|--|--|--|-- FaceAPI 阿里云人脸识别API封装
|--|--|--|-- FrofessComment
|--|--|--|-- FrofessZan
|--|--|--|-- Message
|--|--|--|-- SaleComment
|--|--|--|-- SaleZan
|--|--|--|-- ViewNumber
|--|--|--|-- login
|--|-- miniprogram 小程序页面
|--|--|--|-- 略
|--README.md
|--Images 截图
</code></pre>
<h2 id="说明">说明</h2>
<p>《SayLove》表白墙微信小程序，前台基于校园情书微信小程序进行大量的修改，虽然样式看起来都差不多，但是做了大量的修改。特别是后台部分，后台完全使用微信小程序云开发，不依赖服务器。前台代码由于是在原作者的基础上根据实际情况做了修改，所以跟原来作者的看起来很像,但并没有照搬照抄。</p>
<p>为什么我要改写原作者的小程序？因为我尝试过根据原作者的所写的ReadMe进行配置，发现过程过于复杂，而且依赖因素太多，尝试了很多次都无法成功。在自己的好奇心驱使下，就基于原项目进行的改写，后台改写为微信小程序云开发，使其安装配置变得非常简单，拿来就可以直接使用了。</p>
<blockquote>
<p>参考源项目的内容如下：</p>
</blockquote>
<ul>
<li>主要是参考了他的点子，并不是完全照搬照抄</li>
<li>界面的大体布局，比如：板块布局、配色没有修改，</li>
<li>除了大布局上以外，基本所有小布局都有更改（具体见下面的）</li>
<li>【注】：我的初衷目的，并不是为了直接拿别人的项目修修改改，然后就说这是我的成果。</li>
<li>我看到原作者的项目是一个偶然的机会，当时有恰好我在学微信小程序的云开发，所以就参考原作者的项目进行了云开发的修改适配，作为学习成果的验证。除了这个以外并没有其他的目的，也因此把我自己的也开源了。</li>
<li><b>参考的源项目作者地址为：</b>https://github.com/oubingbing/school_wechat</li>
<li><b>本项目的地址：</b>https://github.com/lx164/SayLove</li>
</ul>
<blockquote>
<p>重构率超过了60%以上，如果不是借鉴了源项目的点子话，基本上可以说是自己重写的了，<br>
大修改部分如下：</p>
</blockquote>
<ul>
<li>后台：自己构造，完全依赖于云开发，无需搭建后台服务器</li>
<li>所有数据的结构：完全是自己构造的（因为后台不一样，所以数据的构造完全不一样）</li>
<li>登录鉴权：自己重新写的（现在这个不可以用了，因为微信小程序的规则改了，这个不符合新规，需要自己修改）</li>
<li>首页新消息通知：自己重新写的（没有直接使用参考的原项目）</li>
<li>各个板块的点赞、评论：重新根据自己的需要重新编写，对其进行了提升（因为后台不一样，所以数据的结构需要重新构造）</li>
<li>各个板块的图片上传：界面以及逻辑代码是自己重新的（参考的源项目使用的是插件，这里改为了原生的），图片保存在云开发的后台</li>
<li>卖舍友板块：瀑布流重写，没有使用原来的瀑布流</li>
<li>发布话题、发布卖舍友部分重写：根据自己的需要进行了重写</li>
<li>情侣脸板块：自己封装阿里云人脸识别的接口，来适配云开发</li>
<li>个人中心板块重写：自己重新构造了消息通知</li>
</ul>
<p>本程序已经经过测试，拿来按照说明简单配置就可以直接使用,界面可以自己进行修改。本人热爱小程序，目前上线并维护的有两个，后面看情况再找时间进行开源。</p>
<p>由于本人的能力有限，还有很多地方没法完善，望指正！</p>
<p>附：(微信小程序云函数) 阿里云人脸比对API封装 https://www.cnblogs.com/LiangSenCheng/p/10922979.html </p>
<h2 id="配置过程">配置过程</h2>
<p>因为项目里含有微信小程序云开发用到的依赖，因此体积比较大。</p>
<ol>
<li>直接下载源码,源码地址：https://github.com/lx164/SayLove/tree/master</li>
</ol>
<p>或者clone项目 <code>git clone https://github.com/lx164/SayLove/tree/master/App</code></p>
<ol start="2">
<li>
<p>打开微信开发者工具，导入项目（导入的时候请选择 <code>APP</code> 文件夹）；</p>
</li>
<li>
<p>填写APPID；</p>
</li>
<li>
<p>开通云开发环境（请参考官方文档）；</p>
</li>
<li>
<p>新建以下数据库集合,一行为一个集合名（不要写错）：</p>
</li>
</ol>
<pre><code> comment
message
mylike
parise
posts
sale_friends
topics
</code></pre>
<p>然后把以上的集合权限修改为：<code>所有用户可读，仅创建者可读写</code>。</p>
<ol start="6">
<li>填写小程序相关配置信息；</li>
</ol>
<p>配置文件在 <code>App/miniprogram/config.js</code> ,填写以下的配置信息：</p>
<pre><code class="language-javascrpt"> // 小程序APPID
const APPID = ''
// 小程序SECRET
const SECRET = ""
// 云开发环境ID
const CLOUNDID = ''
// 消息刷新时间，单位：毫秒
// 默认10秒刷新一次，即10000毫秒
// 根据实际需要进行调节
const FLASHTIME = 10000000
</code></pre>
<p>如下图：</p>
<p><img src="https://img2018.cnblogs.com/blog/1697917/201906/1697917-20190625164801877-1009585188.png" alt="" loading="lazy"></p>
<p>7.填写阿里云面部识别相关配置信息【<strong><code>选填</code></strong>】：</p>
<blockquote>
<p>注意：如果不需要使用 <code>情侣脸</code> 功能的话，请跳过该步骤</p>
</blockquote>
<ul>
<li>7.1 阿里云的<code>AccessKey</code>和<code>AccessKeySecret</code>的获取，以及人脸识别服务的开通请参考官方文档。</li>
</ul>
<pre><code> // 请填写完整
// 阿里云的AccessKey
var ak_id = '';
// 阿里云的AccessKeySecret
var ak_secret = '';
</code></pre>
<p><code>AccessKey</code>和<code>AccessKeySecret</code>的填写位置如图：</p>
<p><img src="https://img2018.cnblogs.com/blog/1697917/201906/1697917-20190625164811375-1183587206.png" alt="" loading="lazy"></p>
<ul>
<li>7.2 检查云函数 <code>FaceAPI</code> 所需要的依赖是否已安装；</li>
</ul>
<pre><code class="language-javaSciipt"> // 1. 如果已经安装请自行使用npm更新；
// 2. 如果没有安装，则使用下面命令安装：
npm install crypto
npm install request
npm install url
npm install wx-server-sdk
</code></pre>
<ul>
<li>7.3 上传云函数 <code>APP/cloudfunctions/FaceAPI</code>，上传时选择 <code>上传并部署：所有文件</code>；</li>
</ul>
<ol start="8">
<li>
<p>上传 <code>APP/cloudfunctions</code> 文件夹下（除了<code>APP/cloudfunctions/FaceAPI</code>以外）所有的云函数，上传时选择 <code>上传并部署：云端安装依赖</code>；</p>
</li>
<li>
<p>编译运行。</p>
</li>
</ol>
<h2 id="结语">结语</h2>
<p>欢迎一起探讨，如果可以，可以给我一个start，或者</p>
<p><img src="https://img2018.cnblogs.com/blog/1697917/201906/1697917-20190625164529400-127816623.jpg" alt="award" loading="lazy"></p>
<h2 id="程序效果图">程序效果图</h2>
<p><img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004152007-753101627.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004158765-1091147952.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004209235-2050975005.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004214708-670340106.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004222431-1729678107.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004227338-1141069596.png" alt="" loading="lazy"><br>
<img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004235342-59400467.png" alt="" loading="lazy"></p>
<h2 id="云开发-quickstart">云开发 quickstart</h2>
<p>这是云开发的快速启动指引，其中演示了如何上手使用云开发的三大基础能力：</p>
<ul>
<li>数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 文档型数据库</li>
<li>文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理</li>
<li>云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码</li>
</ul>
<h2 id="参考文档">参考文档</h2>
<ul>
<li>
<p>微信小程序云开发文档</p>
</li>
<li>
<p>人脸比对API调用说明文档</p>
</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/1697917/202205/1697917-20220525004333757-587243588.jpg" alt="" loading="lazy"></p>
</div>
<div id="MySignature" role="contentinfo">
<div style="padding: 20px;background: rgba(73, 177, 245, 0.1);border-radius: 12px; color:#6a737d;display:flex;align-content: center;justify-content: space-between;">
<img style="width:160px;height:160px;margin-right:10px;border-radius: 12px;" src="https://files.cnblogs.com/files/LiangSenCheng/qrcode_for_gh_70390af0bcb2_258.gif?t=1703831339&download=true" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
<div>
<p style="margin-bottom: 5px;">作者：LiangSenCheng小森森 开源分享汇 公众号</p>
<p style="margin-bottom: 5px;display:none;">GitHub：
https://github.com/lx164
</p>
<p style="margin-bottom: 12px">出处：https://www.cnblogs.com/LiangSenCheng/p/11083714.html</p>
<p style="margin-bottom: 5px;display:none;">
联系：lx9625@foxmail.com
</p>
<div style="margin-bottom: 8px;display:none;">如果对你有帮助,请给我一个Start,或者扫描二维码对我进行赞赏。</div>
<div>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有问题或建议请联系作者，非常感谢。
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/LiangSenCheng/p/11083714.html
頁:
[1]