三十三章 小程序笔记（三）留言板

配置文件1.app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "留言板",
"navigationBarTextStyle":"black"
}
}
视图文件2.index.wxml
<view class="page">

<view class="body">

<view class="list" wx:for="{{array}}" >
<view class="item">
<view class="left" >
 <image  class="pic" src="{{item.pic}}" ></image>
 </view>
 <view class="right">
 <view class="name">
 {{item.name}}
 </view>
 <view class="note">
<text> {{item.content}}</text>
 </view>
 </view>
 </view>
</view>

<view class="bottom">
<!--写留言-->
<view class="input">
  <input bindinput="confirm"  placeholder="留言内容" />
</view>
<view class="btn">
  <button bindtap="click" >发送</button>
</view>

</view>

</view>
</view>
样式文件3.index.wxss
.page {
margin: 0rpx 50rpx 50rpx 50rpx;
}

.item {
margin: 25rpx 0rpx 25rpx 0rpx;
display: flex;
flex-direction: row;
background-color: lightblue;
align-items: center;
}

.left {
flex: 1;
}

.right {
flex: 3;
display: flex;
flex-direction: column;
}

.name {
flex: 1;
font-size: 30rpx;
}

.note {
flex: 1;
}

.note text {
background-color: lightgreen;
font-size: 70rpx;
color: blue;
}

.pic {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.bottom {
display: flex;
flex-direction: row;
background-color: yellow;
}

.input {
flex: 4;
text-align: left;
}

.btn {
flex: 1;
}
逻辑层文件4.index.js
var newnote
var nickName
var imageurl
Page({
data: {
},
onLoad: function (options) {
var that = this
//微信登录授权，获取用户信息
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
nickName = res.userInfo.nickName
imageurl = res.userInfo.avatarUrl
}
})
}
}),
wx.request({
url: 'https://79966767.qcloud.la/xcx/list.php', //服务器列表地址
success: function (res) {
that.setData({
array: res.data
})
}
})
},

// 输入完成
confirm: function (e) {
newnote = e.detail.value
},
//留言
click: function (e) {
var that = this
wx.request({
url: 'https://79966767.qcloud.la/xcx/note.php', //服务器留言地址
data: {
name: nickName,
content: newnote,
imageurl: imageurl
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
wx.request({
url: 'https://79966767.qcloud.la/xcx/list.php', //上线换为为https
success: function (res) {
that.setData({
array: res.data
})
}
})
}
})
}
})
后台文件略