微信小程序实现评论功能


Posted in Javascript onNovember 28, 2018

本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下

前端

<textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="76">
 </textarea>
<view class='the_prw_btn' bindtap='btn_send'>
 留言
</view>
 
<view>评论内容:</view>
 <block wx:for="{{pl_list}}" wx:key="index">
  <view class='the_msg' wx:if='{{item.input_value!=null}}'>
    <!-- <view class='msg_left'>
  <view class='msg_avatar_v'>
 <image class='msg_avatar' src='{{msg_data.avatar}}'></image>
 </view>
</view> -->
<view class='msg_right'>
 <!-- <view class='msg_right_name'>
   {{msg_data.nicename}}
 </view> -->
<view class='msg_right_text'>
 <text>{{item.input_value}}</text>
  </view>
   <view class='gap'>
   </view>
    </view>
   </view>
</block>

js: 默认展示历史评论,评论后也刷新页面,连带此次评论内容一起展示。

var bindblur ;
Page({
 bindblur:function(e){
 console.log('1111111:', e.detail.value)
 bindblur = e.detail.value;
 },
 
 onLoad: function (a) {
 var that = this;
 actid = a.id;
 // 查询评论fetch
 wx.request({
 url: 'https://m.yishushe.net/addons/up_text.php',
 method: 'POST',
 header: {
 'content-Type': 'application/x-www-form-urlencoded',
 'Accept': 'application/json'
 },
 data: {
 act_id: actid
 },
 success: function (result) {
 that.setData({
  pl_list: result.data.reverse(),
 })
 },
 fail: res => {
 wx.showToast({
  title: '网络不好哟',
  image: '/image/wrong.png',
  duration: 3000
 })
 }
 })
},
 btn_send: function () {
 var that = this
 //添加评论
 console.log('文章id:act_id :', actid);
 console.log('用户缓存id:user_id :', user_id);
 console.log('文本输入框: input_value :', bindblur);
 wx.request({
 url: 'https://m.yishushe.net/addons/up_text.php',
 method: 'POST',
 header: {
 'content-Type': 'application/x-www-form-urlencoded',
 'Accept': 'application/json'
 },
 data: {
 act_id: actid,
 user_id: user_id,
 input_value: bindblur
 },
 success: function (result) {
 that.setData({
  pl_list: result.data.reverse(),
  input_value: "",
 })
 },
 fail: res => {
 wx.showToast({
  title: '网络不好哟',
  image: '/image/wrong.png',
  duration: 3000
 })
 }
 })
 }
})

后端php 源码:

<?php
 header("Content-Type:text/html;charset=utf8"); 
 header("Access-Control-Allow-Origin: *"); //解决跨域
 header('Access-Control-Allow-Methods:POST');// 响应类型 
 header('Access-Control-Allow-Headers:*'); // 响应头设置 
 $link=mysql_connect("localhost","root","root"); 
 mysql_select_db("weiqing", $link); //选择数据库
 mysql_query("SET NAMES utf8");//解决中文乱码问题
 //$username = $_POST['username'];
 //$avatarUrl = $_POST['avatarUrl'];
 $act_id = $_POST['act_id'];
 if($_POST['input_value']){
 $user_id = $_POST['user_id'];
 $input_value = $_POST['input_value'];
 //echo $avatarUrl."----time:". $time."----iv:".$iv."----inputValue:". $inputValue;
 //插入数据到数据库 
 $strsql = "insert into pinglun (act_id,user_id,input_value) values('$act_id','$user_id','$input_value')";
 //mysql_query() 函数执行一条 MySQL 查询。SELECT,SHOW,EXPLAIN 或 DESCRIBE 都需要用这个函数执行
 $result = @mysql_query($strsql);
 
 }
 
 $q = "SELECT * FROM pinglun"; //SQL查询语句 SELECT * FROM 表名
 $rs = mysql_query($q); //获取数据集
 if(!$rs){die("数据库没有数据!");}
 
 //循环读取数据并存入数组对象
 $dlogs;$i=0;
 while($row=mysql_fetch_array($rs))
 {
 if($act_id ==$row["act_id"]){
 $dlog["act_id"]=$row["act_id"];
 $dlog["user_id"]=$row["user_id"];
 $dlog["input_value"]=$row["input_value"];
 }
 //$dlog["avatarUrl"]=$row["avatarUrl"];
 //$dlog["username"]=$row["username"];
 $dlogs[$i++]=$dlog;
 }
 
 
 //以json格式返回html页面
 
 echo urldecode(json_encode($dlogs));
?>

如果php返回报错就找到php-ini 配置文件 ,把

display_errors = On
改为
display_errors = Off

禁止php报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
js表头排序实现方法
Jan 16 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 #Javascript
小程序点击图片实现自动播放视频
May 29 #Javascript
django使用channels2.x实现实时通讯
Nov 28 #Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 #Javascript
详解Vue中watch的详细用法
Nov 28 #Javascript
vscode下的vue文件格式化问题
Nov 28 #Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
Bootstrap精简教程
2015/11/27 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
python接入支付宝的实例操作
2020/07/20 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
大学校庆邀请函
2014/01/11 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
先进事迹演讲稿
2014/09/01 职场文书
法律意见书范文
2015/05/20 职场文书
公司开业致辞
2015/07/29 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers