微信小程序 — — 实现微信公众号留言功能(附前、后端源码)-程序员宅基地

技术标签: java  后端  数据库  

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

前言

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

效果图:

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

很多小伙伴加我微信问我关于这个小程序的问题,我在这里也统一说一下。如果只想单单的给公众号加一个留言功能,我建议没必要自己去做了,因为很多热你都没有编程基础,要想做出来,必须从基础开始看,这个过程非常考验你的学习能力的。因为我的《小鹿留言助手》已经发布,可以关联多个公众号,前提是粉丝量大于 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
    },
    ......
复制代码
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34310369/article/details/91392887

智能推荐

android 高德地图删除轨迹_android 高德地图轨迹回放功能-程序员宅基地

文章浏览阅读863次。1、高德地图web示例最近要做一个根据用户车牌号查询用户定位和运动轨迹的功能,第一时间想到做web端的方便便于维护,且我们ios端是用h5框架编写的,也方便ios去使用,去查了一下高德地图,欸?这不就有现成的直接用吗。感慨一句真方便。如下图。RPReplay_Final1564452712 (2).gif怎么样,是不是超级方便?然后我们只要在app中的webview中打开它就可以了。开始动画,结束..._android高德地图删除线

Georgia and Bob(POJ-1704)(阶梯博弈)_georgia and bob poj - 1704-程序员宅基地

文章浏览阅读303次。Georgia and Bob Time Limit:1000MS Memory Limit:10000K Total Submissions:14162 Accepted:4782 Description Georgia and Bob decide to play a self-inven..._georgia and bob poj - 1704

能用 uuid 做 MySQL 的主键吗?-程序员宅基地

文章浏览阅读555次。在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一,单机递增),而是推荐连续自增的主键id,官方的推荐是auto_increment..._uuid可以做主键吗

网络命令以及如何使用Ipconfig.exe工具查看TCP/IP配置_ipconfig命令可以用来显示当前tcp/ip配置信息。-程序员宅基地

文章浏览阅读7.2k次,点赞2次,收藏5次。一、Ping命令ping是个使用频率极高的实用程序,主要用于确定网络的连通性。这对确定网络是否正确连接,以及网络连接的状况十分有用。简单的说,ping就是一个测试程序,如果ping运行正确,大体上就可以排除网络访问层、网卡、Modem的输入输出线路、电缆和路由器等存在的故障,从而缩小问题的范围。ping能够以毫秒为单位显示发送请求到返回应答之间的时间量。如果应答时间短,表示数据报不必通过太多的路由器或网络,连接速度比较快。(1) 命令格式ping 主机名; ping 域名; ping IP地址。这_ipconfig命令可以用来显示当前tcp/ip配置信息。

VxWorks6.9 VMware环境使用教程_workbench3.3 + vxworks6.9-程序员宅基地

文章浏览阅读6.3k次,点赞5次,收藏45次。VxWorks6.9的虚拟机环境下的安装与使用!需要资源的请加我钉钉好友,文件太大无法上传资源!!!_workbench3.3 + vxworks6.9

eclipse3 2 汉化 汉化包下载_eclipse3.2下载-程序员宅基地

文章浏览阅读376次。eclipse3 2 汉化 汉化包下载_eclipse3.2下载

随便推点

UG NX二次开发(C#)-建模-拔模功能_ug拔模分析作用-程序员宅基地

文章浏览阅读2.1k次。概念拔模通常用于对模型、部件、模具或冲模的竖直面添加斜度,以便借助拔模面将部件或模型与其模具或冲模分开。拔模,铸造时为了从砂中取出木模而不破坏砂型,往往零件毛胚设计带有上大下小的锥度,叫拔模斜度。拔模斜度有三种形式:增加厚度法,加减厚度法,减小厚度法。拔模是对模具或铸件的面做锥度调整。一个用于成型或铸造的零件必须被正确设计和适当拔模,以便取出模具。拔模角被应用在一个扩展分型线相反的方向。拔模就是为了保证模具在生产产品的过程中产品能顺利脱模,我们设计模具的时候有时就没有设置拔模度,而是用我们手工抛光时候_ug拔模分析作用

无法迁移解决方案文件““,因为它在磁盘上是只读的..._μvision×无法迁移项目:对象“ text.uvprojx ”是只读的。确定-程序员宅基地

文章浏览阅读863次。无法迁移解决方案文件"",因为它在磁盘上是只读的...在打开.sln文件时,显示由于设置了只读权限而导致无法迁移成功。第一个想到的是把.sln文件的设置中的只读去掉,然而只改这一个会显示项目不可用。我查了资料后,说是右键重新加载项目就好了,然而运行的时候还是会有提示,运行时报错。应该把这一个项目整个都把只读去掉,变成可修改的。找到整个项目的文件夹(一般为.sln文件的上一级目录),然后选中右键,出现属性对话框。点击只读前面的多选框,使之变成如图的空心。应用以后,可能出现如图对话框,如_μvision×无法迁移项目:对象“ text.uvprojx ”是只读的。确定

UEFI开发探索67- YIE001PCIe开发板(03 UEFI驱动)-程序员宅基地

文章浏览阅读716次。(请保留-> 作者: 罗冰 https://blog.csdn.net/luobing4365)上一篇做好了服务型UEFI驱动的示例工程,本篇准备编写测试用的UEFI应用,演示如何使用驱动提供的Protocol。另外,对于如何加载驱动进行测试,也会详细讲述。1编写测试驱动的UEFI应用完成了服务型驱动和相应示例Protocol的构建后,我们准备编写访问示例Protocol的UEFI应用。本节准备的示例工程TestServiceDrv,在文末提供了下载地址。编写测试示例Protoc...

脚本启动和关闭 jupyter notebok 并隐藏命令行_jupyter notebook 不能关cmd-程序员宅基地

文章浏览阅读5k次,点赞12次,收藏15次。脚本启动和关闭 jupyter notebok 并隐藏命令行_jupyter notebook 不能关cmd

链接预测&三元组分类_三元组关系预测-程序员宅基地

文章浏览阅读449次,点赞3次,收藏4次。代码理解,供个人学习_三元组关系预测

Microsoft Excel 已停止工作_microsoft office excel 已停止工作-程序员宅基地

文章浏览阅读2.1k次,点赞2次,收藏3次。问题说明双击Excel文件无法打开,报错“Microsoft Excel 已停止工作”;前期处理方法打开world 、ppt文件正常;尝试重启计算机之后再打开excel文件,无效;前期处理方法_microsoft office excel 已停止工作