微信小程序评论/留言功能，附：前端+后端代码+视频讲解！

zhangrxiang 发布于2019-07-01 12:31 / 1649人阅读

前端界面：

演示：











  {{item.result}}

以下是留言内容

  
  
    {{item.nickname}} {{item.lytime}}
    {{item.liuyantext}}

//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...

数据库格式：

服务器托管专线服务微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序实时音视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30905.html

微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

Lowky 2019-08-30 11:07 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

elina 2019-08-02 15:15 评论0 收藏0
微信小程序开发中遇到的问题及解决办法（三）

摘要：资料整理关于配置微信小程序页面附关于微信搜索小程序内页面的功能，只能在线上环境有用，而且没有提供测试的渠道。二微信小程序激励视频广告接入微信视频广告指引截图具体使用注意激励视频广告组件是一个原生组件，层级比普通组件高。大纲：根据近期我在小程序开发中接到的需求，总结一下下面四个开发需求所遇到的问题： 1、关于微信现已开放小程序内搜索（sitemap 配置）；2、微信小程序的激励视频广告...

voyagelab 2019-08-23 18:02 评论0 收藏0
微信小程序搜索功能！附：小程序前端+PHP后端

摘要：开发需求微信小程序已经是非常火了，而且学习也比较容易，但是对于初学者来说还是一件比较伤脑筋的事，接下来给大家分享一下小程序搜索的思路。演示作者网站微信学习交流可以加我开发需求微信小程序已经是非常火了，而且学习也比较容易，但是对于初学者来说还是一件比较伤脑筋的事，接下来给大家分享一下小程序搜索的思路。流程 1、表单（输入框、提交按钮、提交的name值)2、接收表单数据（js获取表单...

Code4App 2019-07-01 11:24 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0