您当前的位置: 首页 > 解决方案

微信小程序评论/留言功能,附:前端+后端代码+视频讲解!

  • 作者: admin
  • 发布于 2018-09-18 13:58:43
  • 来源:  
  • 栏目:解决方案

导语: 前端界面: 演示:

 

前端界面:

 

33.jpg

演示:

34.gif




<!-- 表单 --> <form bindsubmit="formSubmit"> <input type="text" name="liuyantext" placeholder='输入留言内容' class="input-style"/> <button formType="submit" class="btn" wx:if="{{nickName == empty}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" bindtap='login'>授权登录</button> <button formType="submit" class="btn" wx:else>留言</button> <input type="text" name="nickname" value='{{nickName}}' style="display:none;"/> <input type="text" name="headimg" value='{{avatarUrl}}' style="display:none;"/> </form>  <view wx:for="{{re}}" wx:key="re">   <view class="result">{{item.result}}</view> </view> <view style="text-align:center;font-size:14px;color:#ccc;margin-top:20px;">以下是留言内容</view> <view wx:for="{{liuyanlist}}" wx:key="liuyanlist" class="liuyanview">   <view class="headimg"><image src="{{item.headimg}}"></image></view>   <view class="nickname_liuyantext">     <view class="nickname">{{item.nickname}} <view class="time">{{item.lytime}}</view></view>     <view class="text">{{item.liuyantext}}</view>   </view>   <!-- 占位符 -->   <view style="width:100%;height:10px;"></view> </view>
 //index.js //获取应用实例 const app = getApp() Page({   /**    * 页面的初始数据    */   data: {        },    //授权登录   login: function () {     var that = this;     // 查看是否授权     wx.getSetting({       success(res) {         if (res.authSetting['scope.userInfo']) {           // 已经授权,可以直接调用 getUserInfo 获取头像昵称           wx.getUserInfo({             success: function (res) {               console.log(res.userInfo),                 that.setData({                   nickName: res.userInfo.nickName,                   avatarUrl: res.userInfo.avatarUrl,                 })             }           })         }       }     })   },   bindGetUserInfo(e) {     console.log(e.detail.userInfo)   },     formSubmit: function (e) {     wx.showToast({       title: '已留言',       icon: 'success'     })     var that = this;     var liuyantext = e.detail.value.liuyantext; //获取表单所有name=liuyantext的值      var nickName = e.detail.value.nickname; //获取表单所有name=nickName的值      var headimg = e.detail.value.headimg; //获取表单所有name=headimg的值      wx.request({       url: 'http://localhost/liuyanserver/liuyan.php?liuyantext=' + liuyantext + '&nickname=' + nickName + '&headimg=' + headimg,       data: {         liuyantext,         nickName,         headimg       },       header: { 'Content-Type': 'application/json' },       success: function (res) {         console.log(res.data)         that.setData({           re: res.data,         })         wx.hideToast();       }     })   },    onPullDownRefresh: function () {     wx.showNavigationBarLoading();     var that = this     wx.request({       url: 'http://localhost/liuyanserver/loadliuyan.php',       headers: {         'Content-Type': 'application/json'       },       success: function (res) {         //将获取到的json数据,存在名字叫list的这个数组中         that.setData({           liuyanlist: res.data,           //res代表success函数的事件对,data是固定的,liuyanlist是数组         })         // 隐藏导航栏加载框         wx.hideNavigationBarLoading();         // 停止下拉动作         wx.stopPullDownRefresh();       }     })   },    //加载最新数据   onLoad: function () {     var that = this     wx.request({       url: 'http://localhost/liuyanserver/loadliuyan.php',       headers: {         'Content-Type': 'application/json'       },       success: function (res) {         //将获取到的json数据,存在名字叫list的这个数组中         that.setData({           liuyanlist: res.data,           //res代表success函数的事件对,data是固定的,liuyanlist是数组         })       }     })   } })
/**index.wxss**/ .input-style{   width: 90%;   height: 50px;   border:1px solid #ccc;   margin:10px auto; }  .btn{   width: 88%;   margin:5px auto; }  .liuyanview{   width: 90%;   margin: 10px auto; }  .result{   text-align: center;   font-size: 14px;   color: #f00;   margin-top: 20px; }  .headimg{   width: 45px;   height: 45px;   border-radius: 100%; }  .headimg image{   width: 45px;   height: 45px;   border-radius: 100%; }  .nickname_liuyantext{   width: calc(100% - 55px);   float: right;   margin-top:-45px; }  .nickname_liuyantext .nickname{   font-size: 15px;   color: #999; }  .nickname_liuyantext .nickname .time{   font-size: 11px;   color: #999;   float: right; }  .nickname_liuyantext .text{   font-size: 16px;   color: #666; }

以上是前端部分
后端有两个文件。

点击下载后端,后端需要修改自己的数据库配置!
http://www.youka.la/product/5...

数据库格式:

 

35.jpg


视频:https://www.lanzous.com/i1w1deb



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部