基于node.js小程序云开发实现的推文留言板设计与实现.zip

# 小程序云开发实战：推文留言板 ## 效果演示 这是我从以管理员身份进入小程序的界面，普通用户没这么多操作权限。  ## 一、知识点 ##### **要点1：node.js 及 npm 命令使用** ##### **要点2：Vent UI 组件库的使用** npm 是 Node 包管理工具，方便大家导入各类 JavaScript 开源包（运行在 Node.js 上），Node.js 是一个 JavaScript 运行环境，包含 npm。我引入 Vent UI 组件库就是使用 npm 命令安装的。 在云函数中我们可以引入第三方依赖来帮助我们更快的开发。云函数的运行环境是 Node.js，因此我们可以使用 npm 安装第三方依赖。 ##### **要点3：如何判断用户权限,让不同用户看到不同内容** 原理很简单，但是自己摸索需要花点时间，我在另一篇博客中单独讲了这个问题： [小程序开发笔记：判断用户权限，显示不同内容](https://blog.csdn.net/qq_44577070/article/details/104364152) ##### **要点4：云函数的初始化使用** 云函数的使用其实就是遵循一个固定格式。创建一个云函数后会给你一个框架模板，然后自己手动删除不用的代码，写自己的功能就行了，多看几个云函数找找共同点。调用云函数同样是一个框架，把逻辑写在框架里就行了。 ##### 要点5：云数据库的增删查改 [官方文档中云开发部分云数据库的使用](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html)讲得很详细，底下有云函数调用的实例代码，直接复制过来改参数就行。 ##### 要点6：如何调用获取用户信息授权 这是使用微信官方的 API 接口。官方文档里这部分讲的很详细，而且有示例代码。其他什么获取位置啊，获取相册啊都可以参看官方文档。 .................................. ## 二、前言 或许部分人不了解，在18年三月以后注册的微信公众号都没有了留言功能。现在新账号想要有留言功能，只有通过迁移合并原来有留言功能的公众号，全套搞下来价格不便宜。还有一个曲线救国的方法就是使用小程序插入到推文底部，用户点击可打开小程序查看留言，虽然体验差一点但是也比没有好。但是看了几个提供小程序留言服务的，也要几十上百块，还要担心数据安全问题。所以我早就想自己做个小程序来实现这个功能，只是一直没太多时间去学去做，现在在家废了半个月后，就决定把这件事完成。 ## 三、背景 我以前并没接触过网页开发、小程序开发，只能看懂一点点基本代码，在这一块基本算个小白。所以我觉得我这次实战总结应该也很适合像我一样的小白作为入门项目。 先说一下我开始做这个之前先做了哪些功课吧。 首先我在B站上跟一个up主上手小程序实战。是的我没有去学语法结构等理论的东西，因为不想花那么多时间，对我个人来说边实践边学比较快。可惜的是那个up主只还没更新完，只做了天气查询、视频播放等普通的小程序，还没开始云开发。 然后我继续看了腾讯云大学小程序云开发基础实战课程（也是在B站），并跟着做了基于云开发的待办事项小程序。看这个的感觉就是，不愧是官方出的视频，质量是真的高，而且里面很多很方便操作是普通up主不知道的，强烈推荐。 在这之前我一共做了三个普通一个云开发小程序，学会了基本操作，大概花了5天。写留言板用了整整两天半，途中遇到不少问题，就参考着微信官方文档和网上一些乱七八糟的资料琢磨着解决了。 这是微信官方文档，学会使用和查询非常重要！ https://developers.weixin.qq.com/miniprogram/dev/framework/ ## 四、开始 ### 1、前期配置 #### (1) 初始化云开发环境 创建云开发项目，然后进入云开发控制台初始化环境。在数据库中添加三个集合：author、message、msgPages 可参看[官方文档的云开发部分](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html) #### (2) 安装 node.js 和引入 Vent UI **要点1：node.js 及 npm 命令使用** **要点2：Vent UI 组件库的使用** ### 2、文件结构 我会从每个组件开始，怎么设置布局，怎么实现功能来讲解。每个代码块会在第一行标识当前在哪个文件中。  ### 3、全局配置 全局配置中 json 文件需要开启页面下拉刷新，以及添加自定义组件。js 文件使用的云开发默认配置，如果你要改环境在 env 参数后改就行了。 ```json // app.json { "pages": [ "pages/index/index", "pages/msgPages/msgPages" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "WhiteApple 留言板", "navigationBarTextStyle": "black", "enablePullDownRefresh": true //允许页面下拉刷新 }, "usingComponents": { //调用自定义组件（我这里使用的 Vent UI） "van-button": "@vant/weapp/button", "van-popup": "@vant/weapp/popup", "van-cell": "@vant/weapp/cell", "van-cell-group": "@vant/weapp/cell-group", "van-skeleton": "@vant/weapp/skeleton", "van-tag": "@vant/weapp/tag" }, "sitemapLocation": "sitemap57.json" } ``` ```json //app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ // env 如不填则使用默认环境（第一个创建的环境） //env: 'liuyan-x1zol', traceUser: true, }) } this.globalData = {} } }) ``` ### 4、留言板页面 项目刚开始的时候是直接把 index 页面作为留言板的，后来基础功能全部完成后才再做了主页面，用来创建不同留言板。所以我写博客也把留言板页面写在前面了，大家也可以考虑先到文章底部看看主页面的代码。 基本思路：最上方有留言按钮，点击打开输入弹窗，输入内容后点击下方提交按钮提交留言。留言按钮下方是留言内容，每条留言左边是头像，右边上面是昵称和置顶标签，下面是内容。加入了管理员功能后，管理员能看到每条留言下面的置顶、回复、删除按钮，点击可实现相应功能。 每新建一条留言就是在云数据库的集合 message 中新增一条数据，这条数据对应的唯一 id 也就是这条留言对应的 id，后续通过这个唯一 id 找到这条留言，可以对这条留言内容进行增删查改。 这是留言板页面的 js 文件中 Page 外连接数据库和 Page.data 中的参数，接下来的所有 js 代码都是在 Page({ }) 中，为方便不再把 Page({ }) 写出来。 ```js //pages/msgPages/msgPages.js //连接数据库 const db = wx.cloud.database(); const message = db.collection("message"); const author = db.collection("author"); Page({ data: { maxNumber: 140,//可输入最大字数 number: 0,//已输入字数 show: false, //是否弹出留言面板 showReply: false, //是否弹出回复面板 authority: false, //鉴权 loading: true, //是否正在加载 textValue:"", //输入框内容 replyMsgId:"", //回复留言的id qr:"", //小程序码的路径