一、需求分析

输入留言内容，并发表，同时能够查看所有人在留言墙的留言。

二、功能设计

1. 进入页面前，获取小程序使用者的微信账户信息（用户名+头像）
2. 进入页面，向服务器发出请求，请求获取所有留言信息，并展现在页面上
3. 在页面中的留言文本框输入留言信息，点击发送，将留言信息+用户名一起发送请求到服务器，新增留言信息。回到页面，重复第二点。
   
   上述功能涉及到的服务器搭建，可以参考【SpringBoot】写一个具有留言墙功能的JavaWeb

三、页面设计

四、代码

（一）核心代码：向服务器发出请求

1. 向服务器请求获取所有留言信息

  /**
   * 查询所有留言
   */
  findAll(){
    let that = this;
    //向服务器请求所有的留言数据
    wx.request({
      url: 'https://www.peng-yujun.cn/message/find',
      method:"POST",
      success(res){
        that.setData({
          messageList:res.data
        })
      }
    })
  },

2. 向服务器请求新增留言信息

  /**
   * 发送文本框内容
   */
  send(){
    //检测是否有填写留言，若无则提示
    if(this.data.words.replace(/(^s*)|(s*$)/g, "").length==0){
      wx.showToast({
        title: '请填写留言',
        icon:'error'
      })
      return;
    }
    //向服务器请求插入
    var that = this;
    wx.request({
      url: 'https://www.peng-yujun.cn/message/add',
      method: "POST",
      data: {
        name: that.data.userInfo.nickName,
        words: that.data.words
      },
      header: {
        'content-type' : 'application/x-www-form-urlencoded',
      },
      success: function(res){
        //刷新页面内容
        that.findAll();
        that.setData({
          messageList:that.data.messageList,
          words:""
        })
        //页面弹出留言成功提示
        wx.showToast({
          title: '留言成功',
          icon: 'success'
        })
      }
    })
  },

（二）完整代码

message.wxml

<!--pages/message/message.wxml-->
<view id="body">
  <view id="typing">
    <textarea value="{{words}}" bindinput="getWords"></textarea>
    <button bindtap="send">发表</button>
  </view>
  <view class="divLine"></view>
  <view id="messages" wx:for="{{messageList}}" wx:key="index">
    <view class="message">
      <text class="name">{{item.name}} 说：</text>
      <text class="words">{{item.words}}</text>
      <text class="time">{{item.time}}</text>
      <view class="wordsLine"></view>
    </view>
  </view>
</view>

message.wxss

/* pages/message/message.wxss */
#body{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#typing{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#typing textarea{
  width: 80%;
  height: 18vh;
  border: 2rpx solid;
  padding: 8px;
}

#typing button{
  margin: 10px;
}
.divLine{
  background: #E0E3DA;
  width: 100%;
  height: 3rpx;
  margin-bottom: 10px;
}
#messages{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.message{
  display: flex;
  flex-direction: column;
  width: 80%;
}
.time{
  text-align: right;
  color: rgb(94, 163, 163);
}
text{
  word-wrap:break-word;
  margin: 4px 0;
}
.wordsLine{
  background: #E0E3DA;
  width: 100%;
  height: 3rpx;
  margin-bottom: 10px;
}

message.js

const { formatTime } = require("../../utils/util");

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //用户信息
    userInfo:{},
    //留言信息
    message:{id:"",name:"",words:"",time:""},
    //留言集合
    messageList:[],
    //文本框的内容
    words:""
  },
  /**
   * 获取文本框里的内容
   * @param {*} e 
   */
  getWords(e){
    this.data.words = e.detail.value;
    console.log("getwords:"+this.data.words);
  },

  /**
   * 发送文本框内容
   */
  send(){
    //检测是否有填写留言，若无则提示
    if(this.data.words.replace(/(^s*)|(s*$)/g, "").length==0){
      wx.showToast({
        title: '请填写留言',
        icon:'error'
      })
      return;
    }
    //向服务器请求插入
    var that = this;
    wx.request({
      url: 'https://www.peng-yujun.cn/message/add',
      method: "POST",
      data: {
        name: that.data.userInfo.nickName,
        words: that.data.words
      },
      header: {
        'content-type' : 'application/x-www-form-urlencoded',
      },
      success: function(res){
        //刷新页面内容
        that.findAll();
        that.setData({
          messageList:that.data.messageList,
          words:""
        })
        //页面弹出留言成功提示
        wx.showToast({
          title: '留言成功',
          icon: 'success'
        })
      }
    })
  },
  /**
   * 查询所有留言
   */
  findAll(){
    let that = this;
    //向服务器请求所有的留言数据
    wx.request({
      url: 'https://www.peng-yujun.cn/message/find',
      method:"POST",
      success(res){
        that.setData({
          messageList:res.data
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //检查登陆状态，若登陆状态无时，返回登录页
    if(wx.getStorageSync('localUserInfo')!=''){
      this.setData({
        userInfo: wx.getStorageSync('localUserInfo')
      })
    }else{
      wx.navigateTo({
        url: '/pages/login/login',
      })
    }
    this.findAll();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})