微信小程序实现评论功能


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中的遍历for in 以及with的用法
Dec 22 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
JS验证字符串功能
Feb 22 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
小程序自定义日历效果
Dec 29 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php实现微信发红包
2015/12/05 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python 实现链表实例代码
2017/04/07 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫