Community Mini-Program Feature Implementation Using Cloud Development

The article describes how to build a community mini‑program using WeChat Cloud Development, allowing users to post text and images without a traditional backend server.

Features implemented:

Home (Square) page showing user posts and admin tutorials.

Message publishing page with text input, horizontal image carousel, image preview, delete, and submit.

Personal Center page displaying user info, favorites, publish history, invite friends, and feedback.

Data fetching and pagination

onLoad: function() {
  var that = this;
  wx.cloud.database().collection('topic')
    .count({ success: function(res) {
        that.setData({ totalCount: res.total });
      }});
  this.getData();
},
getData: function(page) {
  var that = this;
  const db = wx.cloud.database();
  db.collection('topic')
    .skip(page * that.data.pageSize)
    .limit(that.data.pageSize)
    .orderBy('date','desc')
    .get({
      success: function(res) {
        if (res.data.length) {
          that.setData({ topics: that.data.topics.concat(res.data) });
        } else {
          wx.showToast({ title: '没有更多数据了' });
        }
      }
    });
},
onReachBottom: function() {
  if (this.data.topics.length < this.data.totalCount) {
    this.getData(this.data.page + 1);
  } else {
    wx.showToast({ title: '没有更多数据了' });
  }
}

Image handling

chooseImage: function(event) {
  var that = this;
  wx.chooseImage({
    count: 6,
    success: function(res) {
      const tempFilePaths = res.tempFilePaths;
      for (let i in tempFilePaths) {
        that.setData({ images: that.data.images.concat(tempFilePaths[i]) });
      }
    }
  });
},
previewImg: function(e) {
  var index = e.currentTarget.dataset.index;
  wx.previewImage({
    current: this.data.images[index],
    urls: this.data.images
  });
},
removeImg: function(event) {
  var position = event.currentTarget.dataset.index;
  this.data.images.splice(position, 1);
  this.setData({ images: this.data.images });
}

Publishing to cloud database

saveToHistoryServer: function(event) {
  var that = this;
  const db = wx.cloud.database();
  db.collection('history').add({
    data: {
      content: that.data.content,
      date: new Date(),
      images: that.data.images,
      user: that.data.user,
      isLike: that.data.isLike
    },
    success: function(res) {
      console.log(res);
      that.saveDataToServer(event);
    },
    fail: console.error
  });
}

User authorization

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: (res) => {
              console.log(res.userInfo);
            }
          });
        }
      }
    });
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo);
  }
});

Displaying user avatar with <open-data>

<view class='amountBg'>
  <view class='img'>
    <open-data type="userAvatarUrl"></open-data>
  </view>
</view>
<view class='account'>
  <view class='nick-name'>
    <open-data type="userNickName" lang="zh_CN"></open-data>
  </view>
  <view class='address'>
    <open-data type="userCountry" lang="zh_CN"></open-data>·
    <open-data type="userProvince" lang="zh_CN"></open-data>·
    <open-data type="userCity" lang="zh_CN"></open-data>
  </view>
</view>

The article also discusses common issues such as missing permissions for other users' posts, page refresh after publishing, and the need to create corresponding collections in the cloud database.