Building a Lightweight Note‑Taking Mini Program with WeChat Cloud Development

During a business trip, the speaker delivered inspiring content that the author wanted to record, but could not find a suitable place to store the notes. The author initially used WeChat's File Transfer Assistant or personal chats to record, but this method did not form a complete record system and became hard to retrieve over time.

After searching the app market, the author found that existing applications were either too complex or required installing a dedicated APP, which was not desirable for occasional use.

The author therefore decided to develop a lightweight Mini Program with the characteristics of being lightweight, convenient, and ready‑to‑use, which is very suitable for building a note‑taking tool.

1. Main Features

Create note: quickly record content, support emojis and images, automatically obtain title and time, and allow selecting the storage location.

Query notes: history sorted by time, allow back‑lookup and navigation to the record location.

Edit note: allow repeated editing and modification.

2. Preparation

1) Register a WeChat Mini Program account:

Method 1: Direct registration ( link )

Method 2: If you already have a verified public account, you can log in to the public account → Mini Program Management → Add → Quick register and certify the Mini Program.

After registration, locate the Mini Program's AppID and AppSecret .

2) Download the WeChat Developer Tools and create a project. Enter the project directory, project name, and the previously obtained AppID . After the project is created, click the "Cloud Development" button at the top of the developer tools to enable cloud development. Official cloud development documentation: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

3.1 Feature Implementation – Note Creation (upload of text and images)

1) Brief description: For the Lite version of the note‑taking app, provide text and image upload for quick recording, which is the most basic function.

2) Data flow diagram and description (user side to cloud development)

If the record contains images, first upload the images and obtain the returned fileID , add it to an array, and finally upload the array together with the record content to the cloud database; if the record does not contain images, directly upload the record content to the cloud database.

3) Core code:

// 用户填写信息后，提交事件
fromSubmit: function(e) {
  let submitInfo = e.detail.value
  let categoryId = Number(submitInfo.categoryIndex)
  var title = submitInfo.title ? submitInfo.title : this.data.datas.title2
  var images = []
  for (var i = 0; i < this.data.uploadImages.length; i++) {
    let randString = Math.floor(Math.random() * 1000000).toString() + '.png'
    wx.cloud.uploadFile({
      // 以昵称创建云存储文件夹路径
      cloudPath: wx.getStorageSync("wxUserInfo").nickName + '/' + Date.now() + '.png',
      filePath: this.data.uploadImages[i],
      success: res => {
        images = images.concat(res.fileID)
        // 图片全部上传完毕，上传记录数据
        if (images.length == this.data.uploadImages.length) {
          db.collection('allnote').add({
            data: {
              "titlename": title,
              "createtime": util.formatTime2(new Date()),
              "updatetime": null,
              "address": submitInfo.locationName ? submitInfo.locationName : "未选择位置",
              "latAndLong": this.data.datas.latAndLong,
              "content": submitInfo.content,
              "images": images,
              "nickName": wx.getStorageSync('userId').nickName,
              "avatar": wx.getStorageSync('userId').avatarUrl,
              "province": wx.getStorageSync('userId').province,
            }
          }).then(res => {
            wx.hideLoading()
            wx.navigateBack({})
          }).catch(console.error)
        }
      }
    })
  }
},

3.2 Feature Implementation – Note Query

1) Brief description: Users who have created notes can view all records in chronological order and view details of any record.

2) Data flow diagram and description (user side to cloud development)

The Mini Program user uploads their userId to a cloud function; the cloud function queries the cloud database for records matching that userId , sorts them, formats the timestamps, and returns the data to the Mini Program.

3) Core code (cloud function):

// 云函数入口函数
exports.main = async(event, context) => {
  return await new Promise(function(resolve, reject) {
    var notes = []
    var notesNew = []
    db.collection('allnote').where({
      _openId: event.userOpenid
    }).get().then(res => {
      notes = res.data
      if (res.data) {
        // 由于时间格式问题，orderBy('createtime', 'desc')排序无效，所以使用以下排序方式
        // 按照时间倒叙排列
        notes.sort(function(a, b) {
          return Date.parse(b.createtime) - Date.parse(a.createtime);
        });
        // 显示的时间格式转换，截取秒
        for (var i = 0; i < res.data.length; i++) {
          let showTime = res.data[i].createtime.substring(0, res.data[i].createtime.length - 3)
          notes[i].showCreateTime = showTime
          // 数据解码
          notes[i].titlename = decodeURI(notes[i].titlename)
          // 将加入新格式的时间放入新的数组
          notesNew.push(notes[i])
        }
      }
      // 返回新的数组
      resolve(notesNew)
    }).catch(error => {
      reject(error)
    })
  })
}

3.3 Feature Implementation – Note Modification

1) Brief description: In addition to viewing time, location, and content, users can edit and delete records.

2) Data flow diagram and description (user side to cloud development)

When the user modifies a record, directly upload the new content and the record ID using .update .

3) Core code (record detail page and update):

// 记录详情页数据获取
onLoad: function(options) {
  // 根据记录id获取记录详情
  db.collection('allnote')
    .where({
      _id: options._id
    })
    .get()
    .then(res => {
      console.log(res)
      noteData = res.data[0]
      // 显示的时间格式转换，截取秒
      let showTime = res.data[0].createtime.substring(0, res.data[0].createtime.length - 3)
      noteData.createtime = showTime
      // 数据解码，如果上传的时候没有encodeURI，则不需要decodeURI
      noteData.titlename = decodeURI(noteData.titlename)
      noteData.content = decodeURI(noteData.content)
      this.setData({
        noteData: noteData
      })
      wx.hideLoading()
    })
},
// 单条记录提交更新
fromSubmit: function(e) {
  let _this = this;
  var submitInfo = e.detail.value
  db.collection('allnote').doc(_this.data.noteData._id).update({
    data: {
      titlename: submitInfo.name,
      content: submitInfo.content
    }
  }).then(res => {
    wx.navigateBack({})
  }).catch(console.error)
},

4. Conclusion

Initially, the Lite version of the note‑taking Mini Program was planned to be built with a Mini Program + web backend, which consumed two‑thirds of the project time on domain registration, backend setup, and certificate management. After learning about Mini Program Cloud Development, the backend was switched to cloud development within a day. This eliminated the need for domain, server, and CA maintenance, provided visual data and file management, and reduced code to a few lines for user login and standard data read/write. The author looks forward to more interfaces and features being opened by Mini Program Cloud Development.

5. Project Preview

If you have technical stories or practical experience with Cloud Development TCB and want to share, feel free to leave a comment.

Original article source: Cloud Development Practice Sharing | Lite Note Mini Program

Sharing is the greatest support. See the comment area!