微信小程序评论/留言功能,附:前端+后端代码+视频讲解!
发布时间:2020-12-14 19:34:40 所属栏目:资源 来源:网络整理
导读:前端界面: 演示: !-- 表单 -- form bindsubmit = "formSubmit" input type = "text" name = "liuyantext" placeholder = '输入留言内容' class = "input-style" / button formType = "submit" "btn" wx:if = " {{nickName == empty}} " open-type = "getUs
前端界面:
演示:
//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: {
'application/json'
},success: function (res) {
//将获取到的json数据,存在名字叫list的这个数组中
that.setData({
liuyanlist: res.data,136);">//res代表success函数的事件对,data是固定的,liuyanlist是数组
})
// 隐藏导航栏加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
})
},136);">//加载最新数据
onLoad: function () {
var that = this
wx.request({
url: //res代表success函数的事件对,data是固定的,liuyanlist是数组
})
}
})
}
})
/**index.wxss**/
.input-style{
width: 90%;
height: 50px;
border:1px solid #ccc;
margin:10px auto;
}
.btn{
88%;
5px auto;
}
.liuyanview{
margin: 10px auto;
}
.result{
text-align: center;
font-size: 14px;
color: #f00;
margin-top: 20px;
}
.headimg{
45px;
border-radius: 100%;
}
.headimg image{
100%;
}
.nickname_liuyantext{
width: calc(100% - 55px);
float: right;
margin-top:-45px;
}
.nickname_liuyantext .nickname{
15px;
#999;
}
.nickname_liuyantext .nickname .time{
11px;
#999;
float: right;
}
.nickname_liuyantext .text{
16px;
#666;
}
以上是前端部分 点击下载后端,后端需要修改自己的数据库配置! 数据库格式:
视频:https://www.lanzous.com/i1w1deb (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |