小程序评论区动态刷新

还是前两天的小程序,用户的个人主页需要有评论区,发布评论之后需要把评论写到数据库,同时动态更新评论区。

评论的数据库设计如下:

POST请求将评论发送给后台

ownerID获得不太难,之前进入主页的时候已经把用户名给传进来了,那么commenterID要怎么获得呢?

可以在app.js里面定义全局数组,当用户成功登录后,把从数据库查询相关信息存储来记录用户的相关信息,需要的时候调取即可。

//app.jsApp({
    ......
    user:{
        userID:-1,
        userName:"",
        hometown:"",
        modelID:-1
    }
    ......
}

至于time如何获得,可以借助微信提供的API获取时间然后再转换格式。

util.formatTime(new Date());

//pages/homepage/homepage.js
  comment:function(e){
    var that = this;
    var frmData={};
    frmData.commenterID = app.user.userID;
    //从全局data获取评论者ID
    frmData.text = e.detail.value.text;
    //从当前主页获取被评论者ID
    frmData.ownerID = this.data.owner.userID;
    //加入时间
    frmData.time = util.formatTime(new Date());
    console.log("评论内容:");
    console.log(JSON.stringify(frmData));
    wx.request({
      url: ‘http://localhost:8080/addComment‘,
      method: ‘POST‘,
      data: JSON.stringify(frmData),
      header: { ‘Content-Type‘: ‘application/json‘ },
      success: function (res) {
        if (res.data != null &&res.data != ‘‘) {
          wx.showToast({
            title: ‘发表成功‘,
            icon: ‘‘,
            duration: 2000
          })
          //动态更新评论区
        }
        else {
          wx.showToast({
            title: ‘发表失败‘,
            icon: ‘‘,
            duration: 2000
          })
        }
      },
      fail:res=>{
        console.log(res.data);
      }
    })
  }

可以看到我是在comment函数里面定义的frmData数组来存储评论相关信息,这个地方我本来是想在页面里边定义一直使用,就不用每次临时获取commenterID了,但是一直报错frmData未定义,最后只能在comment函数

里面临时定义数组了,如果有朋友知道是哪里的问题,麻烦评论一下,感激不尽。

thirdScriptError
frmData is not defined;at pages/homepage/homepage page comment function
ReferenceError: frmData is not defined

动态更新评论区

评论成功写入数据库后,需要实时更新评论区,这里采用的是将frmData加到comment数组里面,配合wx:for动态更新评论区。

(comment数组在页面初始化的时候,就已经把查询到的数据放进去了)

<view class="title_text">
  <text>评论列表</text>
</view>

<!--显示评论区-->
<view wx:for="{{comment}}">
用户ID:{{item.commenterID}}  {{item.time}}
  <view>
  评论内容:{{item.text}}
  </view>
</view>

数组有个函数叫concat,用来连接和拓展数组,双方可以都是数组,也可以是数组和元素。

我刚开始想的是把frmData接到comment后面,但是comment初始化的时候,数据会不断往后顶,就跟堆栈似的。

就比如说数据库的数据是按07/01 07/02存放的,取出来comment会是07/02 07/01的顺序,但是我今天07/06的数据再跟到后面,数据就变成了07/02 07/01 07/06,是不是怪怪的。。

所以就换了个办法,先把frmData放到数组A里面,然后把comment接到A后面就好了,这样评论顺序就是倒序的,评论时间新的会在前面。

       //将comment数组添加到新评论frmData后面
          //实现时间倒序,评论时间最新的会被显示到最前面
          //wx:for将会实时更新评论列表
          var newComment=[frmData];
          that.data.comment = newComment.concat(that.data.comment);
          that.setData({
            comment: that.data.comment,
          });

效果如图:

今天的工作还有完善小程序登录,阻止封禁用户登录,没什么记录的价值,就不写了。

原文地址:https://www.cnblogs.com/BoqianLiu/p/9274911.html

时间: 2024-11-03 23:17:38

小程序评论区动态刷新的相关文章

微信小程序评论功能源码

wxml: <textarea class="input" bindinput='bindContent' value="" placeholder="请填写评论内容 "></textarea> <button class='button show-button' bindtap="Submit" data-item_data1='{{item_data1}}' id="vid"

微信小程序评论/留言功能,附:前端+后端代码+视频讲解!

前端界面: 演示: <!-- 表单 --> <form bindsubmit="formSubmit"> <input type="text" name="liuyantext" placeholder='输入留言内容' class="input-style"/> <button formType="submit" class="btn" wx:

微信小程序开发调试工具

为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的 开发者工具 ,集成了开发调试.代码编辑及程序发布等功能. 扫码登录 启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所有的操作都会基于这个微信帐号 程序调试主要有三大功能区:模拟器.调试工具和小程序操作区 模拟器 模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态. 调试工具 调试工具分为 6 大功能模块:Wxml.Console.Sources.Network.A

开发一个微笑小程序示例

一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”.3.会获得一个AppID,记录AppID,后面创建项目时会用到. 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”.即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号.本教程默认注册帐号.体验都是使用管理员微信

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

咫尺论坛|即速应用-微信小程序社区

咫尺论坛|即速应用-微信小程序社区 是一个集微信和支付宝小程序行业资讯.开发资源.技术交流于一身的大型小程序开发论坛,成立伊始便迅速聚集了一大批小程序开发爱好者,短时间内成为了国内领先的小程序开发者社区. 目前访问bbs.zhichiwangluo.com即可进入小程序开发论坛.咫尺论坛主要分为四大区,分别为即速应用小程序教程.小程序开发教程.小程序媒体资讯和交流讨论区.每个专区都有着极其丰富的内容,充分满足小程序开发者们的各种需求. 一.即速应用小程序教程区 该专区不仅集合了小程序开发文档,还

全栈开发工程师微信小程序-中(中)

开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, 群id lang 当 type="user*" 时生效,以哪种语言展示 userInfo <open-data type="groupName" open-gid="xxxxxx"></open-data> <open-data type="us

vue小案例--简易评论区

一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件.(3)对组件编码,生成动态页面. 2.静态页面 参考来源:https://www.bilibili.com/video/av49099807/?p=22&t=1223 [举例:] <!DOCTYPE html> <html> <head> <meta char

小程序获取当前位置加搜索附近热门小区及商区

1.话不多说,直接上干货 实现上图效果,主要技术是获取微信小程序地理位置,得到经纬度,使用微信小程序JavaScript SDK逆地址解析和地点搜索实现 2.微信小程序JavaScript SDK 申请开发者密钥(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 手机号注册即可使用. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0  下载完成后放入utils文件夹下引用即