精华内容
参与话题
问答
  • 小程序 发表评论功能

    万次阅读 热门讨论 2018-06-23 16:43:11
    如果内容不为空 将评论框里输入的内容的值传入评论列表<view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}"> <button class='rev...

    工作日志  随手笔记  仅供参考



    1.点击发表按钮 判断内容是否为空 如果为空提示请输入内容


    2.如果内容不为空 将评论框里输入的内容的值传入评论列表

    <view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}">
               
               <button class='revoke' bindtap='binddelete' data-id='{{index}}'>撤销</button>
               
               <view class='publish'>
                <image src='https://storage.confolsc.com/storage/image/9f37e8a1fadc7ee20964dd6de7edeb4dbb4b03a1?size=130,130&t=1&redirect=1'></image>
               
                <view class='publish_list'>
                  <text class='publish_list_item'>{{item.name}}</text>
                  <view class='like'>
                    <text class='publish_time'>{{item.time}}</text>
                     <view  class='like_num_list' bindtap='bindlike' data-id='{{index}}'>
                        <text class='iconfont icon-dianzan2' style='{{item.likes.iszan?"color:red":"color:black"}}'></text>
                       
                        <text class='like_num'>{{item.likes.num}}</text>
                     </view>
                   
                  </view>
                 
                  <text class='redtree_text'>{{item.textareaValue}}</text>
                </view>
               </view>
              
             
           </view>    
    
           <view  wx:if='{{release.length == 0}}'>
             暂无评论
           </view>
    
       </view>
        

    // 点击发表评论
      formSubmit: function (e) {
        console.log('form发生了submit事件,携带数据为:', e.detail.value)
         if ( e.detail.value.input == '') {
          wx.showToast({
            title: '请输入内容',
          })
    
        } else  {
          var that = this;
          var textarea_item = {};
          var textareaValue= e.detail.value.input;
         
          var release = this.data.release;
          var id = release.length  
          textarea_item.textareaValue = textareaValue;
     
           release.push(textarea_item);// 将评论内容添加到评论列表
      
    
          this.setData({
           
            release: release,
            releaseFocus: true, //隐藏输入框
            releaseValue : '' //清空输入框内容
          })
          console.log(release)
         
    
        }
        
       
      },

    发表完内容清空内容隐藏输入框



    展开全文
  • 微信小程序评论功能实现

    千次阅读 2019-01-29 00:01:23
    微信小程序开发交流qq群 581478349 微信: 承接小程序开发 wxml &lt;textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="...

     

    微信小程序开发交流qq群   581478349

    微信:

    承接小程序开发

    wxml

                  <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
    

     

    展开全文
  • 基于云开发的小程序评论功能实现

    千次阅读 2019-06-09 22:19:32
    对于文章评论,新建数据库集合来保存评论内容及相关书籍,有以下数据库字段: var args={ cNickName: that.data.userInfo.nickName, cAvatarUrl: that.data.userInfo.avatarUrl, cOpenId: app.globalData....

    对于文章评论,新建数据库集合来保存评论内容及相关书籍,有以下数据库字段:

     var args={
          cNickName: that.data.userInfo.nickName,
          cAvatarUrl: that.data.userInfo.avatarUrl,
          cOpenId: app.globalData.openid,
          createDate: util.formatTime(new Date()),
          comment: comment,
          flag: true,
          title:that.data.title
        }

    评论框实现,本次UI组件选用ColorUI组件:

    
    <!-- 底部功能 -->
    <view class="padding-0 bg-white" id='comment'>
     <form bindsubmit="formSubmit" >
        <view class="flex ">
           <view class="flex-treble bg-white padding-0 margin-xs radius">  
              <textarea maxlength="-1" placeholder="抢沙发..." auto-height fixed="true" name='comment'></textarea>         
           </view>
           <view class="flex-sub bg-white padding-0 margin-xs radius">
             <button class='cu-btn bg-green shadow-blur' form-type='submit' open-type='getUserInfo'>
                <text>发送</text>
              </button>
           </view>
         </view>
       </form>
    </view>

    界面如下:

    当输入内容完成后,点击发送按钮,执行以下逻辑代码,保存评论内容至数据库。

    formSubmit: function (e) {
        let that = this;
        let userinfo = app.globalData.userInfo;
        let list = that.data.comment_list;
        let comment_total = that.data.comment_total;
        let comment = e.detail.value.comment;
        if(comment == undefined || comment == null ||  comment==""){
          wx.showToast({
            title: '请输入内容',
            icon: 'none',
            duration: 1500
          });
          return;
        }
        var args={
          cNickName: that.data.userInfo.nickName,
          cAvatarUrl: that.data.userInfo.avatarUrl,
          cOpenId: app.globalData.openid,
          createDate: util.formatTime(new Date()),
          comment: comment,
          flag: true,
          title:that.data.title
        }
        that.addPostComment(args);
      },
      /**
     * 新增评论
     */
       addPostComment(commentContent) {
         const db = wx.cloud.database();
         db.collection('comment').add({
           data: commentContent
         });
       },

    对于评论内容用scroll-view视图分页加载,没有加载5条评论数据。

    对于新增子评论:后续开发中

    需要实现在某个评论下进行回复。在交互上,点击评论者的昵称或头像时,触发相应的点击事件,在事件中去记录相应的评论ID及必要数据,同时去设置焦点到评论框内

    已实现功能小程序

    展开全文
  • 小程序 发表评论

    千次阅读 2018-07-17 10:09:37
    之前写过一个发表评论的功能不过是没有接入后台的数据接口静态的现在发一个接入后台的仅供参考 加载页面没有评论显示暂无评论 点击发表评论如果内容为空提示请输入内容 点击发表评论评论总数加一 显示的...

    工作日志 随手笔记 仅供参考

       之前写过一个发表评论的功能  不过是没有接入后台的数据接口静态的  现在发一个接入后台的 仅供参考

    加载页面没有评论显示暂无评论

    点击发表评论如果内容为空提示请输入内容

    点击发表评论后评论总数加一 显示的暂无数据是分页加载 每次加载十个 加载完成显示暂无数据

    <view class='release_list'>
    
          <view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}">
               
               <button wx:if='{{item.is_me == 1}}' class='revoke' bindtap='binddelete' data-id='{{item.id}}' data-index='{{index}}'>撤销</button>
               
               <view class='publish'>
                <image src='{{item.avatar}}'></image>
               
                <view class='publish_list'>
                  <text class='publish_list_item'>{{item.username}}</text>
                  <view class='like'>
                    <text class='publish_time'>{{item.publish_time}}</text>
                     <view  class='like_num_list' bindtap='bindlike' data-id='{{item.id}}'>
                        <text class='iconfont icon-dianzan2' style='{{item.like==1?"color:red":"color:black"}}'></text>
                       
                        <text class='like_num'>{{item.likes_count}}</text>
                     </view>
                   
                  </view>
                 
                  <text class='redtree_text'>{{item.content}}</text>
                </view>
               </view>
              
             
           </view>    
    
           <view  class='Nocomment' wx:if='{{release.length == 0}}'>
             暂无评论
           </view>
    
       </view>
         
        <view class='loadmore' hidden='{{isShowLoadmore}}'>
          <view class='loading'></view>
          <view class='loadmore_tips'>正在加载</view>
        </view>
        <view class="loadmore loadmore_line" hidden='{{!isShowNoDatasTips}}'>
          <view class="loadmore_tips">暂无数据</view>
         </view>
        
    
       
    </view>
    <!--发表评论  -->
        <view class='release' hidden='{{!releaseFocus}}' >
          <input class='text' placeholder='在此处键入评论内容...' bindtap='bindrelease' value='{{releaseValue}}'></input>
      
          <text class='iconfont icon-pinglun2'></text>
          <text>{{releaselength}}</text>
         <button class='share1'  open-type='share'>
          <text  class='iconfont icon-fenxiang'></text>
         </button>
          <text>0</text>
          
        </view>
        <form bindsubmit='formSubmit'>
     
          <view class='releaseFocus'  hidden='{{releaseFocus}}'  >
          <textarea adjust-position='true' fixed='true' data-id=''  name='input' class='release_text' placeholder='在此处键入评论内容...'  value='{{releaseValue}}' focus='{{focus}}'></textarea>
          <button form-type='submit'>发表</button>
          </view>
        </form>
    data: {
      page :2, //从第二页评论开始加载
      page_size:10, //每次加载十条评论
      isShowLoadmore:false, //正在加载
      isShowNoDatasTips:false,//暂无数据
      endloading: false,//判断评论是否加载完成
        focus: false, //是否点赞
    
        open: true,
        releaselength:'',//评论数长度
        release: [  //评论
     
    
        ],
    
        id:'', //页面id
    
    
        //  发表评论
        releaseFocus: true
    
    
      },
    // 点击发表评论
      formSubmit: function (e) {
        console.log(wx.getStorageSync('auth_token'));
        var that= this;
        var id = this.data.id;
        var textareaValue = e.detail.value.input //输入的内容的值
        console.log(textareaValue)
       
        if (wx.getStorageSync('auth_token')){  //判断是否登录 登录后才可以发表内容
          if (e.detail.value.input == '') {  //如果输入的内容为空 提示请输入内容
            wx.showToast({
              title: '请输入内容',
              icon: 'none'
            })
          } else {
            wx.request({
              url: '后台接口',
              data: {
                content: textareaValue, //传给后台的输入内容
                msgid: id, // 页面的ID
    
    
    
              },
              method: 'POST',
              header: {
                'appid': 'fZ4wruPFDWZTEwD1gUhbkez0CUmeWGJx',
                'mbcore-access-token': wx.getStorageSync('access_token'),
                'mbcore-auth-token': wx.getStorageSync('auth_token')
              },
              success: function (res) {
                console.log(res)
                console.log('-----')
                console.log(res.data.code)
                if (res.data.code == 0){  //code 等于0 表示内容为空 
                         wx.showToast({
                           title: '请输入内容',
                           icon:'none'
                         })
                }else {
                  //var that = this;
                  var textarea_item = {}; 创建一个空对象
                  var textareaValue = res.data.result.content; //输入的内容
                  var name = res.data.result.username; //发表评论的用户名字
                  var time = res.data.result.publish_time; //发表评论的时间
                  var avatar = res.data.result.avatar; //发表评论的用户头像
                  var id = res.data.result.id; // ID
                  var like = res.data.result.likes_count; //发表评论的点赞数
                  var isme = res.data.result.is_me; //判断是否是自己发表的评论
                  var comments_count = res.data.result.comments_count //发表评论数
    
                  //console.log(release);
                  //console.log(that);
    
                  var release = that.data.release;
                  textarea_item.content = textareaValue; //赋值
                  textarea_item.username = name;
                  textarea_item.publish_time = time;
                  textarea_item.avatar = avatar;
                  textarea_item.id = id;
                  textarea_item.likes_count = like;
                  textarea_item.is_me = isme;
    
                  release.push(textarea_item); //将textarea_item 添加到release中
                  that.setData({
    
                    release: release,
                    releaseFocus: true, //隐藏输入框
                    releaseValue: '' ,//清空输入框内容
                    releaselength: comments_count //更新页面发表评论总数
                  })
    
                }
               
              }
    
            })
          }
          }else {
          this.userInfoReadyCallback()  //判断没有登陆跳转到登录页面
          }
    
      },
    

     

     

    展开全文
  • 1、调用评论列表接口 2、调用添加数据列表接口 3、需要在添加数据列表接口里面低调用一次评论列表接口,是为了刷新数据 4、渲染数据,
  • 微信小程序 评论留言功能实现 仿知乎

    万次阅读 多人点赞 2018-08-30 17:26:44
    最近沉迷学习无法自拔,太久没有码字,码一个小程序留言功能实现。先上一波最后效果图: (删除按钮,是用户自己的留言时才会显示该按钮) 实现技术  后台:SSM框架  数据库:MySQL数据库 数据库设计  ...
  • 微信小程序 评论功能实现

    万次阅读 2018-09-06 21:29:56
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 前端 <textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="76"> &...
  • 1.实现评论 1.1需要先登录百度App, 获取用户的openId 1.2用户授权 //获取用户的输入信息,输入的内容 changeInputVal(ev) { this.setData({ inputVal: ev.detail.value }) }, //发布评论 ...
  • 小程序评论功能

    千次阅读 2018-09-11 15:04:43
    -- 用户评论信息 --> <view class='comment'> <view class='pinglun'><text class='collectTitle'>用户评论</text></view> <view class="addcomment"> <vie...
  • WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹...
  • 微信小程序实战篇-商品详情页(一)

    万次阅读 多人点赞 2017-06-30 16:24:59
    哈喽,大家好,今天要进入新篇章啦,商品详情页,这个可是个大模块,要分好几次才能讲解清楚,现在我们先进行第一讲,老规矩,先上效果图有木有很酷炫啊,下面由代码君教你如何实现。详情页布局看效果图,可以知道...
  • 微信小程序实战篇-分类页面制作

    万次阅读 多人点赞 2017-06-23 17:26:14
    哈喽,大家好,又到周五啦,今天代码君要教大家分类页面的制作,废话不多说,先上效果图这个界面布局难度不是很大,css基础好的,很快就实现了,分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据这个...
  • 微信小程序开发实战

    万人学习 2016-09-25 16:55:04
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发。
  • 微信小程序实战篇-下拉刷新与加载更多

    万次阅读 多人点赞 2017-06-17 10:59:19
    哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
  • 在商场项目中,一般都会有分类页面。 分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图 布局分析: 主盒子> 左盒子>左盒子> 右盒子>右盒子> ...左盒子使用标准流 右盒子使用绝对定位(top、right...
  • 微信小程序实战篇-购物车

    万次阅读 多人点赞 2017-07-21 16:36:16
    一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现
  • 分类入口,已经成为了...微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6) 页面分析: 使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项。
  • 18年最新的某课网仿火山小视频的微信小程序项目实战,是难得的使用Java后端语言做数据支撑,为广大Java童鞋想快速掌握微信小程序完整开发流程及技巧提供难得的福利,内含所有所需的源码资料,绝对适合新手入门微信小...
  • 本文教大家做一个抖音评论效果的小程序首先看下效果图一、页面编写&lt;view&gt; &lt;button bindtap='showTalks'&gt;查看评论&lt;/button&gt;&lt;/view&gt;&lt;!-- 整个评论区...
  • 最新收集整理123套微信小程序实战项目源码分享,微信小程序开发项目源码完整合集下载,已经把源码本地化,不再是链接,所以不会出现失效的状况,放心下载即可!
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 我先说说一下,我打算入手微信小程序,毕竟这个小程序已经很火,不用要花下载及安装的时间。其实上,只要你搜名字东西就直接打开小程序即可。 对于开发这个微信小程序和开发网页的编程很类似,比如: 网页一般...
  • 详细介绍小程序开发所涉及的内容和关键技术,帮助开发者快速掌握小程序开发,主要包括界面、网络、本地数据及缓存、设备硬件、微信开发接口、媒体、后端开发与设计。 第四章介绍了所有API的使用,主要包括网络、...
  • springboot&微信小程序实战_开发说明

    千次阅读 2019-04-04 11:24:50
    微信小程序实战_开发说明 本项目采用的是springboot2.0与微信小程序实现前后端分离。 前台使用微信小程序与es6相关语法 后台使用 mysql数据库、druid连接池、mybatis ORM框架、redis 缓存、Nginx-fastDFS 文件...
  • 微信小程序实战——消息通知界面

    千次阅读 2019-05-26 20:35:39
    先给大家上一个实战的效果图 这个是我们小组在开发的一个消息界面,用于实现简单的交流通信功能,只实现了简单的前端框架,下面献上代码供大家参考学习,若有不足,请多多指教。 wxml部分 <!--头部消息...
  • 微信小程序实战 购物车功能

    千次阅读 2018-04-07 14:34:32
    一、准备工作软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html基本需求 显示图书基本信息:名称、作者、描述、价格、数量。 点击复选框进行toggle操作。...
  • 最近公司比较闲我给大家带来一个微信小程序的商城实战项功能:再这个项目中主要有五大模块:首页 店铺 搜索 动态 我的 等五大模块(主要参考拼多多商城小程序)这里是拼多多商城首页接下来是我的商城的首页实现...
  • 首先看看官方提供的模态弹窗 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息。...但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 ...
  • 提供一个登录页面的案例,供同学们使用 项目效果图: index.wxml: 账号 密码 登录 wxss:
  • 微信小程序实战

    2017-11-18 19:22:20
    微信小程序实战源码,获取豆瓣视频前250条数据信息,包括下拉刷新,上拉加载,视频搜索。适合新手学习参考,简单易懂。

空空如也

1 2 3 4 5 ... 20
收藏数 192,639
精华内容 77,055
关键字:

小程序 评论