微信小程序 — — 实现微信公众号留言功能（附前、后端源码）
微信小程序留言助手使用指南
前言
现在微信公众号留言功能不开通真的很麻烦，与读者之间缺少了很多的互动，所以小鹿就花费了一个月的时间，做了一款留言小程序，嵌入到公众号文章底部，点击进入用户即可进行留言，和原有的留言功能相同。
效果图：
点击文章底部的卡片（可以自定义多种形式，链接，文字等方式点击进入）。
很多小伙伴加我微信问我关于这个小程序的问题，我在这里也统一说一下。如果只想单单的给公众号加一个留言功能，我建议没必要自己去做了，因为很多热你都没有编程基础，要想做出来，必须从基础开始看，这个过程非常考验你的学习能力的。因为我的《小鹿留言助手》已经发布，可以关联多个公众号，前提是粉丝量大于 1000 可以关联哦！因为服务器费用都是小鹿自己掏腰包，我还是个学生，没什么收入来源，小程序也是免费关联的，所以粉丝不多的前期留言不怎么重要，还是好好做内容吧。
另一方面就是，如果你想用小程序留言来学习小程序，可以亲自动手根据小鹿提供的源码自己写一个，说实话，我是从零开始学习小程序的，包括后台的代码都是自学的，因为现在所在的大学是三流大学，只能靠自己去学习研究，服务器、数据库需要自己配置。所以说，如果能够自己做出来，我相信你会在编程技术上会有很大的收获的。
※ 体验留言小程序，可在微信小程序页面即可搜索：小鹿留言助手
小程序端
1、小程序端目录结构
下面是留言小程序的主要目录结构，目录中的具体结构和代码以及对应的页面示意图会在下方详细标记。
images：此目录下为小程序中所用到的图片文件。artical：用户文章列表页面。index：主页面。lookmessage:留言筛选、回复、删除页面。message：留言显示页面。myartical：后台筛选文章的列表页面。mycenter：后台文章发布、编辑、删除页面。select：后台留言管理、文章管理选择页面。write：写留言页面。
pages：此路径下存放的为小程序的页面文件（每个页面对应一个文件夹）。serverAPI：服务器端 API ，配置好数据库，放入服务器即可运行。wxSearch：页面搜索框的组件。
2、具体页面
下面详细介绍各个页面以及对应的目录文件，下面的页面都存在于
pages文件夹中。
2.1 主页面（index）
此页面是小程序两个入口之一的主页面。该页面的功能主要显示关联小程序的公众号信息，图中的右下角的对勾是进入后台管理，每个公众号主都有超级管理员设置的唯一密码，输入密码即可进入。点击页面中的公众号信息，即可进入该公众号的文章列表页面（
artical页面）。
▉ 示意图：
▉ 页面逻辑：
这里涉及到一个页面用户授权登录，具体逻辑参照根据微信小程序文档。
1）该页面的 js 中
postOpenid函数作用为上传用户的 openID。
▉ API 接口：
该页面共有三个 API 接口:
1、验证后台登录密码；
2、从服务器获取关联的公众号信息；
3、上传用户的
openID（如果不知道这个是什么，可以去微信小程序官网了解，这里不详细说了）。
// 验证登录密码（只有关联的公众号主才能进行登录）getIdentifyId: function () {var that = this;wx.request({url: '自己服务器API', //f服务器验证密码的 APIdata: {password: that.data.inputContent //获取输入框中的密码},......// 获取公众号信息显示到页面getGongInfo: function () {var that = this;wx.request({url: '自己服务器API', //获取公众号信息的 APIdata: {}, ......// 上传管理员 openidpostOpenid: function () {var that = this;wx.request({url: '自己服务器API', // 上传 openid 的 APIdata: {openid: wx.getStorageSync('openid'),id: that.data.id},
2.2 文章列表（artical）
该页面主要显示进入该公众号的历史文章列表。
▉ 示意图：
▉ 页面逻辑：
该页面是用户点击主页面的某个公众号跳转进来的，主要显示该公众号的历史文章列表，点击某一文章即可查看该篇文章的已筛选的留言内容（
message页面）。
▉ API 接口：
该页面的接口只有一个：
1、获取该公众号的历史文章列表。
// 获取文章列表
wx.request({url: '自己服务器API', //获取文章列表APIdata: {type: '1',//获取列表标识id: g_id //公众号id},......
2.3 留言显示页面（message）
主要呈现给用户某篇文章已经筛选过的留言内容。
**注意：**这个页面也是用户进入小程序留言的第二个页面入口，因为我们的小程序留言会嵌入在公众号文章中，然后用户点击某篇文章的内的小程序链接，页面直接跳转到用户留言显示页面。而不是从主页面进入，提高交互体验。
▉ 示意图：
▉ 页面逻辑：
该页面是用户点击某篇文章跳转进来的，用于显示某篇文章的留言。可以点击该页面的右上角的写留言，即可进入写留言的页面（
write页面）。
▉ API 接口：
该页面共有两个 API 接口:
1、获取服务器的精选留言。
2、上传点赞的数量。
//获取已精选留言内容getChooseCotent: function (){var that = this;wx.request({url: '自己服务器API', //获取已精选留言内容data: {no: that.data.no, //文章编号 ischeckmessage: '1', //留言是否经过筛选g_id: that.data.g_id, //公众号 idopenid: wx.getStorageSync('openid'), //用户唯一标识},......// 获得一个赞that.getChooseCotent();wx.request({url: '自己服务器API', //urldata: {p_id: that.data.messages[u_index].p_id,//用户的 idopenid: wx.getStorageSync('openid'),//点赞用户status: 1, //获得一个赞no: that.data.no, //文章编号 g_id: that.data.g_id, //公众号 id},......
2.4 写留言页面（write）
用户留言上传服务器，该公众号主可以在后台对用户留言进行筛选，防止不文明留言显示给用户
▉ 示意图：
▉ 页面逻辑：
通过获取到用户输入框内的留言内容，在页面退出的时候上传服务器，如果用户在本页面删除了该留言，退出页面不会上传服务器。
▉ API 接口：
该页面只有一个上传的 API 接口：
1、上传留言内容，以及用户的相关信息。
/*** 生命周期函数--监听页面卸载*/onUnload: function () {var that = this;if(that.data.messages==""){console.log("没有留言数据！")}else{console.log("formid" + that.data.formId)wx.request({url: '自己服务器API', //上传留言内容APIdata: {username: wx.getStorageSync('username'),//用户名avatarUrl: wx.getStorageSync('headpath'),//头像messages: that.data.messages,//留言内容title: that.data.title,// 标题ischeck: '0', //作者是否已回复no: that.data.no, //文章编号openid: wx.getStorageSync('openid'), //用户唯一标识g_id: that.data.g_id, //公众号标识form_id: that.data.formId,//表单idtoken: wx.getStorageSync('token')//token},......
2.5 后台管理界面
当已关联的公众号主输入密码进入后台管理界面，可以进行一些文章的发布、编辑以及留言筛选、回复、置顶等操作。
基本的逻辑就是在主界面右下角输入密码。如图：
▉ API 接口：
只有一个 API 接口：
1、上传密码在服务器进行验证（在主界面已经介绍过了）。
服务器验证通过后，进入操作选择界面（select页面）。
进入文章管理页面（mycenter 页面），可以进行发布文章，发布文章按钮是可以折叠的。如下：
▉ API 接口：
该页面只有两个 API：
1、上传文章相关信息的 API
2、上传照片的 API
//上传照片post_image: function () {var that = this;console.log("照片路径"+that.data.tempFilePath)//上传服务器wx: wx.showToast({title: '上传中',icon: 'loading'})wx.uploadFile({url: '自己服务器API',......// 上传文章信息的 APIwx.request({url: '自己服务器API', //urldata: {title: this.data.title, //标题describe: this.data.describe, //描述id: that.data.id,//公众号idisheck: 0 //标识},.......
文章的配图、标题、描述，然后即可上传服务器。收起发布文章的折叠按钮，下方即将显示已经发布的历史文章。如下：
我们通过长按路径，在公众号发表文章的时候即可将路径填入小程序的链接中，用户点击留言，直接跳转到该文章的留言页面进行留言。
返回我们选择进入留言管理页面，进入留言筛选，首先要知道你要筛选那个文章下的留言，所以先出现一个筛选文章列表，点击该列表进入对该文章的留言筛选，（myartical页面为文章筛选列表）。如图：
▉ API 接口：
该页面只有一个 API：
1、获取该公众号的文章列表
wx.request({url: '自己服务器API', //获取文章列表data: {type: '1', //操作类型id: that.data.id //公众号id},......
其实该页面和用户想进入哪篇文章进行留言的页面是一样的，知识后台管理人员进入某篇文章下进行留言筛选、回复、置顶等功能操作。
下面进入某篇文章下的留言筛选页面（lookmessage 页面）。如图：
管理员可以在页面进行筛选、置顶、回复等操作了。
▉ API 接口：
该页面只有四个 API：
1、获取留言列表
2、回复留言 API
3、设置精选留言 API （取消精选同一 API）
4、删除留言 API
5、留言置顶 API （取消置顶同一 API）
// 在已进入页面就获取留言列表
onLoad: function (options) {var that = this;var title = options.title;//文章标题var nos = options.no; //文章编号var ids = options.id;//公众号idthat.setData({no: nos,title: title,id: ids})wx: wx.showToast({title: '正在获取数据',icon: 'loading'})wx.request({url: '自己服务器API', //获取留言列表data: {ischeckmessage: 0,no: that.data.no,id: that.data.id},......//作者回复APIreplay: function () {var that = this;var l = '自己服务器API';//信息用户自己接收console.log("更新forim"+that.data.formId)var d = {p_id: that.data.messages[that.data.index2].p_id,//用户留言编号page: '/pages/message/message?g_id=' + that.data.messages[that.data.index2].g_id + '&no=' + that.data.messages[that.data.index2].no + '&title=' + that.data.title,//跳转页面title: that.data.messages[that.data.index2].title,//文章标题message: that.data.messages[that.data.index2].userMesContent,//留言内容replyMes: that.data.inputContent,//回复内容formid: that.data.formId, //更新formidg_id: that.data.id //公众号id}wx: wx.showToast({title: '正在回复中',icon: 'loading'})wx.request({url: '自己服务器API', //作者回复data: {id: that.data.messages[that.data.index2].p_id,//用户编号replyContent: that.data.inputContent, //回复内容isCheckChoess: '0' //是否筛选（否）},......//精选留言 APIchoose: function (event) {var that = this;var j_index = event.currentTarget.dataset.index;console.log("精选索引：" + event.currentTarget.dataset.index)wx: wx.showToast({title: '正在设置中',icon: 'loading'})wx.request({url: '自己服务器API', //设置为精选留言data: {id: that.data.messages[j_index].p_id,//留言用户idtype: '1' //精选留言标识 },......//删除留言 APIdeleteMessage: function (event) {var that = this;var j_index = event.currentTarget.dataset.index;console.log("精选索引：" + event.currentTarget.dataset.index)wx: wx.showToast({title: '正在删除',icon: 'loading'})wx.request({url: '自己服务器API', //删除留言data: {id: that.data.messages[j_index].p_id,//留言用户idtype: '0' //精选留言标识 }, ......// 置顶留言 APIsettop: function (event) {var that = this;var j_index = event.currentTarget.dataset.index;console.log("置顶索引：" + event.currentTarget.dataset.index)wx: wx.showToast({title: '正在设置中',icon: 'loading'})wx.request({url: '自己服务器API', //留言置顶data: {id: that.data.messages[j_index].p_id,//留言用户idtype: '1' //置顶留言标识 },......
服务器端
因为我的专业方向是前端，所以后台接触的不是很深，也没有用到框架去开发，所以无论是在设计数据库上还是在代码逻辑上多多少少很多欠缺，所以说有能力的小伙伴可以后台很久我提供的逻辑，重新把表和后台代码逻辑梳理一遍。
一、数据库表
共有五张数据库表，分别如此下：
- articel
- gonginfo
- messages
- zan
1、gonginfo （公众号信息表）
该表存储的是公众号关联的相关信息表，字段包括 id(主键ID)、name（公众号名）、headpath（公众号头像路径）、describes（公众号描述）、password（后台密码）、openid（公众号主的openID唯一标识）、fromid（模板ID）、token（token 验证字段）。表的设计结构如下：
2、articel (文章信息表)
该表主要存储的是每篇文章的相关信息，字段包括 no（主键，文章编号）、title（文章标题）、describ（文章描述）、imageTitle（文章配图）、date（文章日期）、g_id（公众号id）——这里没有关联两个表，重新创建的与另一个表的 ID。表的设计结构如下：
3、messages （留言信息表）
**特别注意：**该表主要存储留言相关信息。由于起初没有学习过后台，所以在建表的时候，没有将表分离关联，所以用户信息和留言信息直接写到一个表中了。后期也没有改，所以回后台的小伙伴可以自己更改过来。
字段包括 p_id(主键)、title(文章标题)、username（用户名）、headimage（用户头像路径）、userMesContent（用户留言内容）、authorMesContent（作者回复内容）、no（文章编号）、isCheck（是否精选）、goodnum（可去掉）、ispraise（可去掉）、isTop（置顶标识）、g_id（公众号id）、zanCount（点赞数量）、fromid（模板id）、token（token验证值）。
二、接口 API
1、后台接口目录
com.xiaolu下的包命名介绍：
- bean：实体类
- dao: dao 层
- servlet：接口类，所有对外小程序的接口。
- ThreadGetdata: 线程类，获取 token
- util：工具类，链接数据库之类的。
注意: 在 servlet 中每个接口的功能在这里不做介绍了，都在每个代码的开头标记清除了，可自行查看。
2、连接数据库
在后台代码中的
util包中的Util.java类中配置连接数据库的相关信息。
public class Util {//jdbc:mysql://这里写上你服务器的 IP 地址和端口号/数据库名?useUnicode=true&characterEncoding=UTF-8private static final String URL = "...";private static final String DRIVER = "com.mysql.jdbc.Driver";private static final String USER = "...";// 数据库用户名private static final String PASS = "...";// 数据库密码private static Connection conn = null;public static Connection getConnection() {try {if (conn == null || conn.isClosed()) {Class.forName(DRIVER);conn = DriverManager.getConnection(URL, USER, PASS);}} catch (SQLException e) {e.printStackTrace();} catch (ClassNotFoundException e) {e.printStackTrace();}return conn;}
}
2、配置小程序的 APPID
在
servlet包中的AppIDCodeServlet.java类中配置小程序的APPID和AppScret（小程序官网后台获取）。
@WebServlet("/AppIDCodeServlet")
public class AppIDCodeServlet extends HttpServlet {private static final long serialVersionUID = 1L;public static final String appID = ""; // 填写你小程序的 APPidpublic static final String appScret = "";// 你小程序的 AppScret（微信小程序官网获取）public static String openid = ""; // 空public static String token = ""; // 空public AppIDCodeServlet() {super();}......
源码获取方式：
1、公众号：小鹿动画学编程，后台回复“留言小程序源码” 即可获取。
2、公众号需要关联小程序的，可以联系小鹿哦（公众号有联系地址）！
微信小程序 — — 实现微信公众号留言功能（附前、后端源码）相关推荐
- 微信小程序可以打开公众号文章
微信今日晚间发布消息,宣布微信小程序基础能力.开发者工具全面升级,新增多项能力. 基础功能方面: 1.小程序新增打开公众号文章功能.可以打开已关联公众号的文章,不过文章内暂不支持赞赏.广告.关注公众号 ...
- 50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误.微信公众号引流工具.html,python学习小项目.艺术签名设计微信小程序,前端学习小项目有趣的项目
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误 先看效果 这个小程序实现艺术签名设计的功能 对接到公众号之后,相当于给你的公众号添加了一个功能,别人关注公众号后,可以 ...
- 微信小程序下获取公众号openId
微信小程序下获取公众号openId 一.为什么我们需要在小程序下面获取公众号的openId呢? 微信公众号和微信小程序我们一般都会开发,有一种场景我们经常会遇到,公众号的消息推送以较成熟,我们希望把小 ...
- 通过微信小程序的云开发实现留言功能
通过微信小程序的云开发实现留言功能 index.wxml index.wxss index.js 微信小程序中用于解析date的util.js 授权页home.wxml home.wxss home. ...
- 基于微信小程序共享停车位设计与实现SSM_car.rar（项目源码+数据库文件+微信小程序开发+后端java语言）
主要功能实现了共享车位的创建,车位的管管理,创建车辆.车辆的管理.附近车位.显示车位的编号,车位的位置,车位的状态,车位.可以查看订单记录车位.停费时间,确认时间计费的时间.可以删除,订单也可以确认是 ...
- 微信小程序跳转公众号图文内容
显示公众号推文 <web-view src="http://....."></web-view> <!--小程序要绑定公众号--> web-vi ...
- 微信小程序跳转公众号
长按识别跳转 步骤: 新建一个页面使用web-view组件的src链接到公众号编辑好的一篇带有公众号的二维码的文章 微信规则只有小程序关联的公众号里的文章可以长按识别二维码 <template& ...
- 移动手机网站H5页面如何一键打开拉起微信小程序快速关注公众号功能？
为了方便自己或公司H5网站页面上,能够让用户一键点击按钮,拉起打开微信小程序.实现让用户快速使用微信小程序功能.让用户快捷方便的关注公众号.快速添加微信客服等功能.可以利用H5链接微信环境外打开微信小 ...
- 基于微信小程序的英语学习激励系统设计与实现-计算机毕业设计源码+LW文档
摘要 网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所包括 ...
- 微信小程序消息从公众号推送
2020.06.05更新 新的一年认证续费只需要续费公众号. 小程序可以自动关联认证. 一定要记得!!!!!!! ------------------------------------------- ...
最新文章
- 深入理解分布式技术 - 顺序消费如何才能保证时序性
- iframe 的一点经历
- 1019 General Palindromic Number (20分)_18行代码AC
- P3793-由乃救爷爷【分块,ST表】
- java串口监听超时_从串口读取时如何实现read（）的超时（C / C）
- applicationContext配置文件模板1
- 华为开发者大会上，鸿蒙问世、方舟编译器开源、还有 EMUI 10；壕置100万美元，苹果推出漏洞攻击报告赏金计划……...
- TCP/IP协议、DoD模型、OSI模型
- 1.1 《数据库系统概论》之数据库系统概述（数据、数据库、数据库管理系统、数据库系统、数据库的产生和发展）
- 50以内的质数顺口溜_100以内的质数顺口溜口诀
- debugger心得
- Mockito使用简介
- 自由曲面光学元件的OAM测量
- Python Turtle绘图[难度2星]：奥运五环（用最简单的方法实现五环套接）
- freeRTOS出现任务卡死的情况。
- 腾讯通服务器删除离线消息,如何撤回RTX离线消息离线文件.docx
- 解决opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]的问题
- Docker Cgroup资源配置(CPU、内存、磁盘)
- 必看！gitee上开源的商城源码
- 2022年武汉市助理工程师职称评定流程和评定条件是什么？甘建二