微信小程序实现留言板

让我来给你详细讲解微信小程序实现留言板的完整攻略。以下是步骤的详细说明：

步骤一：创建小程序

第一步是打开微信小程序开发者工具，然后点击新建项目。填写项目基本信息，包括项目名称、所属分类等，然后点击创建。

步骤二：设置留言列表页面

在项目目录中，创建一个名为 message 的目录，然后在其中创建两个文件，一个是 message.wxml，另一个是 message.js。

在 message.wxml 中，你可以使用一些基础的结构组件，比如 view、text、button，以及 list 组件等。

在 message.js 中，你需要定义一个用于获取留言列表的函数，然后通过 wx.request 方法来获取留言数据。

步骤三：设置留言页面

在项目目录中再创建一个名为 postmessage 的目录，然后在其中创建两个文件，一个是 postmessage.wxml，另一个是 postmessage.js。

postmessage.wxml 中包含一个表单，以及一个用于提交表单的 button。

postmessage.js 中需要定义一个函数，用于将用户输入的数据提交到服务器。在提交成功后，应该返回到留言列表页面。

步骤四：设置登录页面

如果你希望用户必须登录才能留言，那么你需要创建一个登录页面。在项目目录中创建一个名为 login 的目录，然后在其中创建两个文件，一个是 login.wxml，另一个是 login.js。

login.wxml 中应该包含一个表单用于输入用户名和密码，以及一个提交按钮。

login.js 中需要定义一个函数，用于将用户输入的用户名和密码提交到服务器。如果登录成功，应该将用户数据存储到本地，然后跳转到留言列表页面。

示例一：获取留言列表

//message.js
Page({
  data: {
    messageList: []
  },
  onLoad: function () {
    var that = this;
    wx.request({
      url: 'http://example.com/api/messages',
      success: function (res) {
        that.setData({
          messageList: res.data
        })
      }
    })
  }
})

通过调用 wx.request 方法获取留言列表数据，并将数据设置到 data 属性中。

示例二：提交留言

//postmessage.js
Page({
  postMessage: function (e) {
    var that = this;
    wx.request({
      url: 'http://example.com/api/post-message',
      method: 'POST',
      data: {
        message: e.detail.value.message
      },
      success: function (res) {
        if (res.data.code === 0) {
          wx.showToast({
            title: '留言成功',
            icon: 'success',
            duration: 2000
          })
          setTimeout(function () {
            wx.navigateBack()
          }, 2000)
        }
      }
    })
  }
})

通过调用 wx.request 方法向服务器提交留言数据，并根据服务器返回的结果来决定是否显示成功提示，并返回到留言列表页面。