微信小程序实现评论功能


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使用查询手册
Mar 07 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
javascript数组排序汇总
2015/07/07 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
VUE重点问题总结
2018/03/19 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
迎新晚会主持词
2014/03/24 职场文书
公司保密承诺书
2014/03/27 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
教育读书笔记
2015/07/02 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript