微信小程序实现评论功能


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 相关文章推荐
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
javascript 实现 原路返回
Jan 21 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 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
php实现用户在线时间统计详解
2011/10/08 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python中pillow知识点学习
2018/04/30 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python 控制终端输出文字的实例
2019/07/12 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
党员评议个人总结
2014/10/20 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年底工作总结范文
2015/05/15 职场文书
预备党员表决心的话
2015/09/22 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript