云开发入门：无需服务器搭建评论系统

今天我们讲下云开发，另外一种不需要我们的服务器后台开发技术。

微信小程序云开发提供了一整套后端服务，开发者无需搭建服务器即可实现数据存储、用户管理等功能。本文将介绍如何基于微信云开发实现一个简单的评论系统，包括用户登录和数据库读写功能。

目录

  1. 需求分析
  2. 初始化云开发
  3. 实现用户登录
  4. 数据库读写
  5. 代码与预览效果对比

1. 需求分析

在本次实战中，我们需要实现以下功能：

  • 用户登录
  • 提交评论
  • 显示评论列表

2. 初始化云开发

在开始开发之前，我们需要初始化微信云开发。

步骤

  1. 登录微信公众平台，进入小程序管理后台。
  2. 开通云开发功能。
  3. 在微信开发者工具中，点击云开发按钮，创建云环境。

示例代码

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error("请使用 2.2.3 或以上的基础库以使用云能力");
    } else {
      wx.cloud.init({
        env: "your-env-id",
        traceUser: true,
      });
    }
  },
});

3. 实现用户登录

通过微信小程序提供的wx.cloud.callFunction接口调用云函数，实现用户登录功能。

示例代码

云函数：login

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

cloud.init();

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  return {
    openid: wxContext.OPENID,
  };
};

小程序端：用户登录

Page({
  data: {
    userInfo: null,
  },
  onLoad: function () {
    this.login();
  },
  login: function () {
    wx.cloud.callFunction({
      name: "login",
      success: (res) => {
        this.setData({
          userInfo: res.result,
        });
      },
      fail: (err) => {
        console.error("登录失败", err);
      },
    });
  },
});

4. 数据库读写

通过微信云开发提供的数据库接口，实现评论的提交和显示功能。

示例代码

提交评论

<view class="container">
  <input
    placeholder="请输入评论"
    bindinput="inputComment"
    value="{{comment}}"
  />
  <button bindtap="submitComment">提交评论</button>
  <view>
    <block wx:for="{{comments}}" wx:key="id">
      <view class="comment-item">
        <text>{{item.content}}</text>
      </view>
    </block>
  </view>
</view>

Page({
  data: {
    comment: "",
    comments: [],
  },
  onLoad: function () {
    this.loadComments();
  },
  inputComment: function (event) {
    this.setData({
      comment: event.detail.value,
    });
  },
  submitComment: function () {
    const db = wx.cloud.database();
    db.collection("comments").add({
      data: {
        content: this.data.comment,
        createTime: new Date(),
      },
      success: (res) => {
        wx.showToast({
          title: "评论提交成功",
          icon: "success",
          duration: 2000,
        });
        this.loadComments();
      },
      fail: (err) => {
        console.error("评论提交失败", err);
      },
    });
  },
  loadComments: function () {
    const db = wx.cloud.database();
    db.collection("comments")
      .orderBy("createTime", "desc")
      .get({
        success: (res) => {
          this.setData({
            comments: res.data,
          });
        },
        fail: (err) => {
          console.error("加载评论失败", err);
        },
      });
  },
});

.container {
  padding: 20px;
}
.comment-item {
  margin-top: 10px;
}

5. 代码与预览效果对比

代码

app.js

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error("请使用 2.2.3 或以上的基础库以使用云能力");
    } else {
      wx.cloud.init({
        env: "your-env-id",
        traceUser: true,
      });
    }
  },
});

云函数：login

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

cloud.init();

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  return {
    openid: wxContext.OPENID,
  };
};

小程序端：用户登录

Page({
  data: {
    userInfo: null,
  },
  onLoad: function () {
    this.login();
  },
  login: function () {
    wx.cloud.callFunction({
      name: "login",
      success: (res) => {
        this.setData({
          userInfo: res.result,
        });
      },
      fail: (err) => {
        console.error("登录失败", err);
      },
    });
  },
});

提交评论

<view class="container">
  <input
    placeholder="请输入评论"
    bindinput="inputComment"
    value="{{comment}}"
  />
  <button bindtap="submitComment">提交评论</button>
  <view>
    <block wx:for="{{comments}}" wx:key="id">
      <view class="comment-item">
        <text>{{item.content}}</text>
      </view>
    </block>
  </view>
</view>

Page({
  data: {
    comment: "",
    comments: [],
  },
  onLoad: function () {
    this.loadComments();
  },
  inputComment: function (event) {
    this.setData({
      comment: event.detail.value,
    });
  },
  submitComment: function () {
    const db = wx.cloud.database();
    db.collection("comments").add({
      data: {
        content: this.data.comment,
        createTime: new Date(),
      },
      success: (res) => {
        wx.showToast({
          title: "评论提交成功",
          icon: "success",
          duration: 2000,
        });
        this.loadComments();
      },
      fail: (err) => {
        console.error("评论提交失败", err);
      },
    });
  },
  loadComments: function () {
    const db = wx.cloud.database();
    db.collection("comments")
      .orderBy("createTime", "desc")
      .get({
        success: (res) => {
          this.setData({
            comments: res.data,
          });
        },
        fail: (err) => {
          console.error("加载评论失败", err);
        },
      });
  },
});

.container {
  padding: 20px;
}
.comment-item {
  margin-top: 10px;
}

预览效果

  1. 打开微信开发者工具，创建一个新项目并将上述代码粘贴到相应文件中。
  2. 运行小程序，用户登录后可以输入评论并提交。
  3. 评论提交后会显示在评论列表中。

通过以上示例，我们学习了如何使用微信云开发实现用户登录和数据库读写功能，构建一个简单的评论系统。希望这篇文章能帮助您更好地理解和应用微信云开发，实现更丰富的应用功能。