微信小程序实现评论功能


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中的Location地址对象
Jan 16 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
简单聊聊TypeScript只读修饰符
Apr 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
js导出txt示例代码
2014/01/14 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
python实现的一个p2p文件传输实例
2014/06/04 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Python3分析处理声音数据的例子
2019/08/27 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
南京南京观后感
2015/06/02 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python
设置IIS Express并发数
2022/07/07 Servers