前台:
message.js
//获取应用实例
const app = getApp()
Page({
data: {
nickName: "微信账号登录",
avatarUrl: "3254"
},
onLoad: function (options) {
var that = this;
var nickName = that.data.nickName;
var avatarUrl = that.data.avatarUrl;
wx.getUserInfo({
success: function (res) {
that.data.nickName = res.userInfo.nickName,
that.data.avatarUrl = res.userInfo.avatarUrl,
that.setData({
nickName: that.data.nickName,
avatarUrl: that.data.avatarUrl,
})
},
fail: function (res) {
that.data.nickName = "未授权无法获取用户信息",
that.setData({
nickName: that.data.nickName
})
}
})
},
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的值
wx.getUserInfo({
success: function (res) {
that.data.nickName = res.userInfo.nickName,
that.data.avatarUrl = res.userInfo.avatarUrl,
that.setData({
nickName: that.data.nickName,
avatarUrl: that.data.avatarUrl,
}),
wx.request({
url: 'http://localhost/xiaoyuan/liuyan/liuyantext.php',
header: { "Content-Type": "application/x-www-form-urlencoded" },
method: "POST",
data: {
nickName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl,
liuyantext: e.detail.value.liuyantext
},
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/xiaoyuan/liuyan/loadliuyan.php',
headers: { "Content-Type": "application/x-www-form-urlencoded" },
success: function (res) {
//将获取到的json数据,存在名字叫list的这个数组中
that.setData({
liuyanlist: res.data,
//res代表success函数的事件对,data是固定的,liuyanlist是数组
})
console.log(res.data)
// 隐藏导航栏加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
})
},
//加载最新数据
onLoad: function () {
var that = this
wx.request({
url: 'http://localhost/xiaoyuan/liuyan/loadliuyan.php',
header: { "Content-Type": "application/x-www-form-urlencoded" },
success: function (res) {
console.log(res.data)
//将获取到的json数据,存在名字叫list的这个数组中
that.setData({
liuyanlist: res.data,
//res代表success函数的事件对,data是固定的,liuyanlist是数组
})
}
})
}
})
wxml:
<!-- 表单 -->
<form bindsubmit="formSubmit">
<textarea type="text" name="liuyantext" placeholder='请输入反馈内容' class="input-style"></textarea>
<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>
</form>
<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="heading">
<image src="{{item.heading}}" class='img'></image>
</view>
<view class="nickname_liuyantext">
<view class="nickname">{{item.nickname}}
<view class="time">{{item.createtime}}</view>
</view>
<view class="text">{{item.liuyantext}}</view>
</view>
<view style="width:100%;height:10px;"></view>
</view>
wxss;
image{
width: 300px;
height: 300px;
}
/**index.wxss**/
.input-style{
width: 90%;
height: 200px;
border:1px solid #ccc;
margin:10px auto;
}
.btn{
width: 88%;
margin:5px auto;
}
.liuyanview{
/*width: 90%;*/
margin: 10px;
}
.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;
}
后台:我用的集成软件XAMPP,把PHP放到htdocs目录文件夹下。
liuyantext.php
<?php
$conn=mysql_connect("localhost","root","root") or die("数据库服务器连接错误".mysql_error());
mysql_select_db("db_database18",$conn) or die("数据库访问错误".mysql_error());
mysql_query("set names utf-8");
$nickname=$_POST[nickName];
$heading=$_POST[avatarUrl];
$liuyantext=$_POST[liuyantext];
echo $nickname;
echo $heading;
date_default_timezone_set(PRC);
$createtime=date("Y-m-d H:i:s");
$sql=mysql_query("insert into tb_message(nickname,heading,liuyantext,createtime)values('$nickname','$heading','$liuyantext','$createtime')");
echo "添加成功!";
mysql_free_result($sql);
mysql_close($conn);
?>
loadliuyan.php
<?php
$conn=mysql_connect("localhost","root","root") or die("数据库服务器连接错误".mysql_error());
mysql_select_db("db_database18",$conn) or die("数据库访问错误".mysql_error());
mysql_query("set names utf-8");
$sql=mysql_query("select * from tb_message");
// $liuyanlist=mysql_num_rows($sql);
//echo $liuyanlist;
// 将数组转成json格式
// echo json_encode($liuyanlist);
$liuyanlist=mysql_fetch_array($sql);
// 将数组转成json格式
// echo json_encode($liuyanlist);
// echo "查询成功!";
$rows = array();
do{
// echo $liuyanlist;
$rows[$liuyanlist[id]] = $liuyanlist;
// echo $liuyanlist[nickname];
// echo $liuyanlist[heading];
// echo $liuyanlist[liuyantext];
// echo $liuyanlist[createtime];
}
while($liuyanlist=mysql_fetch_array($sql));
echo json_encode($rows);
?>