微信小程序实现评论功能


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 相关文章推荐
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 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
ftp类(myftp.php)
2006/10/09 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
node内置调试方法总结
2018/02/22 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python 默认参数相关知识详解
2019/09/18 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
提高EJB性能都有哪些技巧
2012/03/25 面试题
师范应届生求职信
2013/11/15 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
事业单位考察材料范文
2014/12/25 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Go标准容器之Ring的使用说明
2021/05/05 Golang
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL