微信小程序 — — 实现微信公众号留言功能（附前、后端源码）-CSDN博客

微信小程序留言助手使用指南

前言

现在微信公众号留言功能不开通真的很麻烦，与读者之间缺少了很多的互动，所以小鹿就花费了一个月的时间，做了一款留言小程序，嵌入到公众号文章底部，点击进入用户即可进行留言，和原有的留言功能相同。

效果图：

点击文章底部的卡片（可以自定义多种形式，链接，文字等方式点击进入）。

很多小伙伴加我微信问我关于这个小程序的问题，我在这里也统一说一下。如果只想单单的给公众号加一个留言功能，我建议没必要自己去做了，因为很多热你都没有编程基础，要想做出来，必须从基础开始看，这个过程非常考验你的学习能力的。因为我的《小鹿留言助手》已经发布，可以关联多个公众号，前提是粉丝量大于 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服务器验证密码的 API
      data: {
        password: that.data.inputContent //获取输入框中的密码
      },
      ......
        
// 获取公众号信息显示到页面
  getGongInfo: function () {
    var that = this;
    wx.request({
      url: '自己服务器API', //获取公众号信息的 API
      data: {
      },      
      ......
        
// 上传管理员 openid
  postOpenid: function () {
    var that = this;
    wx.request({
      url: '自己服务器API', // 上传 openid 的 API
      data: {
        openid: wx.getStorageSync('openid'),
        id: that.data.id
      },
复制代码

2.2 文章列表（artical）

该页面主要显示进入该公众号的历史文章列表。

▉ 示意图：

▉ 页面逻辑：

该页面是用户点击主页面的某个公众号跳转进来的，主要显示该公众号的历史文章列表，点击某一文章即可查看该篇文章的已筛选的留言内容（message 页面）。

▉ API 接口：

该页面的接口只有一个：

1、获取该公众号的历史文章列表。

// 获取文章列表
wx.request({
    url: '自己服务器API', //获取文章列表API
    data: {
        type: '1',//获取列表标识
        id: g_id //公众号id
    },
    ......
复制代码