微信小程序实现评论功能


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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python基础之入门必看操作
2017/07/26 Python
Python 多核并行计算的示例代码
2017/11/07 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
学校司机岗位职责
2013/11/14 职场文书
九年级家长会邀请函
2014/01/15 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
学校工作推荐信范文
2014/07/11 职场文书
法人委托书
2014/07/31 职场文书
学生检讨书如何写
2014/10/30 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL