微信小程序实现评论功能


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获取checkbox值的方法
Jan 28 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JavaScript中undefined和null的区别
May 03 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
基于javascript的无缝滚动动画实现2
Aug 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 高手之路(二)
2006/10/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
python同步windows和linux文件
2019/08/29 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
酒吧副总经理岗位职责
2013/12/10 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
办公室经理岗位职责
2014/01/01 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
店铺转让协议书
2015/01/29 职场文书