基于云开发的小程序留言板完整实战

🌩️基于云开发的小程序留言板完整实战

利用微信小程序云开发功能，我们可以无需自建服务器，就实现一个完整可用的留言板系统。本文将带你一步步完成留言提交、数据展示的全过程，适合前端开发者和小程序初学者阅读。

🧱一、项目功能介绍

实现一个简单的留言板系统，支持以下功能：

• 用户可匿名提交留言
• 自动记录留言时间
• 展示留言列表（按时间倒序）
• 使用微信小程序云开发能力（无需服务器）

🛠️二、开发准备

1. 注册微信小程序账户

进入 微信公众平台，注册并认证小程序（个人开发不需要认证）。

2. 开启云开发环境

在开发者工具中点击「云开发」 → 开启环境。

3. 初始化项目目录（建议结构）

cloudfunctions/
└── addMessage/          # 云函数 - 添加留言
pages/
└── index/               # 主页面：留言输入和展示
utils/
└── formatTime.js        # 时间格式化工具

📁三、数据库设计

在「云开发」控制台 → 「数据库」中新建集合：

集合名：messageBoard

字段设计如下：

💬四、前端页面实现

1. 页面结构（index.wxml）

<view class="container">
  <textarea placeholder="说点什么..." bindinput="onInput" />
  <button bindtap="onSubmit">提交留言</button>

  <view class="message-list">
    <block wx:for="{{messages}}" wx:key="createTime">
      <view class="message-item">
        <text>{{item.content}}</text>
        <text class="time">{{item.createTime}}</text>
      </view>
    </block>
  </view>
</view>

2. 页面样式（index.wxss）

.container {
  padding: 20rpx;
}
textarea {
  width: 100%;
  min-height: 150rpx;
  border: 1px solid #ccc;
  margin-bottom: 20rpx;
}
.message-item {
  margin-top: 30rpx;
  border-bottom: 1px dashed #eee;
}
.time {
  font-size: 24rpx;
  color: #888;
}

3. 页面逻辑（index.js）

const db = wx.cloud.database();
const _ = db.command;
const formatTime = require('../../utils/formatTime');

Page({
  data: {
    inputContent: '',
    messages: []
  },

  onLoad() {
    this.loadMessages();
  },

  onInput(e) {
    this.setData({
      inputContent: e.detail.value
    });
  },

  onSubmit() {
    const content = this.data.inputContent.trim();
    if (!content) return wx.showToast({ title: '请输入内容', icon: 'none' });

    wx.cloud.callFunction({
      name: 'addMessage',
      data: { content },
      success: () => {
        wx.showToast({ title: '留言成功' });
        this.setData({ inputContent: '' });
        this.loadMessages();
      }
    });
  },

  loadMessages() {
    db.collection('messageBoard')
      .orderBy('createTime', 'desc')
      .get()
      .then(res => {
        const list = res.data.map(msg => ({
          ...msg,
          createTime: formatTime(new Date(msg.createTime))
        }));
        this.setData({ messages: list });
      });
  }
});

🔌五、云函数实现

1. 创建云函数 addMessage

云开发控制台 → 云函数 → 创建函数 → 命名为：addMessage

2. 云函数代码 addMessage/index.js

const cloud = require('wx-server-sdk');

cloud.init();
const db = cloud.database();

exports.main = async (event, context) => {
  const { content } = event;
  return db.collection('messageBoard').add({
    data: {
      content,
      createTime: new Date()
    }
  });
};

3. 配置 addMessage/package.json

{
  "name": "addMessage",
  "version": "1.0.0",
  "main": "index.js"
}

4. 本地调试与上传

使用微信开发者工具上传部署该云函数。

🧮六、格式化时间工具

utils/formatTime.js

function formatTime(date) {
  const y = date.getFullYear();
  const m = (date.getMonth() + 1).toString().padStart(2, '0');
  const d = date.getDate().toString().padStart(2, '0');
  const h = date.getHours().toString().padStart(2, '0');
  const min = date.getMinutes().toString().padStart(2, '0');
  return `${y}-${m}-${d} ${h}:${min}`;
}

module.exports = formatTime;

✅七、运行与测试

1. 确保你在微信开发者工具中启用了云开发环境
2. 部署并调试云函数
3. 启动项目，输入留言，点击“提交”
4. 页面下方将自动刷新留言列表

🧩八、可拓展功能建议

• 用户身份显示（通过 wx.getUserInfo()）
• 删除留言功能（需权限判断）
• 留言点赞、评论功能
• 使用云数据库索引优化性能
• 分页加载留言（支持数据量较大）

📚总结

本实战项目展示了如何结合微信小程序 + 云开发，实现一个真实可用的留言系统，具备：

• 简洁的数据结构
• 云函数封装逻辑
• 实时加载留言
• 良好的代码组织结构

微信小程序的云开发能力为我们提供了一个“前端开发者也能构建后端”的平台，未来可以扩展更多中后台应用。