Building a Markdown Content Publishing System with WeChat Mini‑Program Cloud Development

This article demonstrates how to create a full‑stack markdown publishing system for a WeChat mini‑program using the Cloud Development platform, which removes the need for a separate backend, DBA, or domain.

Cloud Development provides three core capabilities:

Cloud Functions – server‑side JavaScript that runs with automatic WeChat authentication.

Cloud Database – a JSON‑style database accessible from both the mini‑program front‑end and cloud functions.

Storage – file upload/download directly from the mini‑program.

1. Project Initialization

Install the Omi CLI globally and create a new cloud project:

$ npm i omi-cli -g
$ omi init-cloud my-app
$ cd my-app
$ npm start

Alternatively, use the MPS‑cloud scaffold:

$ npm i omi-cli -g
$ omi init-mps-cloud my-app
$ cd my-app/miniprogram
$ npm install
$ npm start

In app.js define the mini‑program configuration and initialize the cloud environment:

import './app.css'
import './pages/list/index'
import { render, WeElement, define } from 'omi'

define('my-app', class extends WeElement {
  config = {
    pages: ['pages/list/index', 'pages/detail/index', 'pages/import/index'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'Omi Cloud',
      navigationBarTextStyle: 'black'
    }
  }

  install() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({ traceUser: true })
      this.globalData.db = wx.cloud.database({ env: 'test-06eb2e' })
    }
  }

  render() { return
}
})

2. Create the "article" collection

In the Cloud Development console add a collection named article with fields:

_id – auto‑generated unique ID

_openid – user identifier

createTime – article creation time

md – markdown content

order – display order

title – article title

Set read/write permissions to allow only the first (admin) user to write.

3. Import markdown data

Use a custom script (Omip) to convert .md files into JavaScript modules. Example conversion logic:

let code = fs.readFileSync(item).toString()
if (path.extname(item) === '.md') {
  code = `export default { md: \\`${code.replace(/`/g, '\\`').replace(/$/g, '\\$')}\\` }`
}

Define a component that loads the markdown module and writes it to the database via a cloud function:

define('page-import', class extends WeElement {
  installed() {
    wx.cloud.callFunction({ name: 'login', data: {} })
      .then(res => {
        app.globalData.openid = res.result.openid
        app.globalData.db.collection('article').add({
          data: { md: data.md, title: 'test', createTime: app.globalData.db.serverDate() }
        })
      })
  }
})

4. List page

Fetch article list without the heavy md field, sort by order , and render each item:

wx.cloud.callFunction({ name: 'login' })
  .then(res => {
    app.globalData.openid = res.result.openid
    app.globalData.db.collection('article')
      .field({ title: true, _id: true, order: true })
      .get()
      .then(res => {
        this.data.list = res.data.sort((a, b) => a.order - b.order)
        this.update()
        wx.hideLoading()
      })
  })

Item click uses evt.currentTarget.dataset.id to navigate to the detail page.

5. Detail page – markdown rendering

The Comi component (built on wxParse, remarkable, html2json, htmlparser, prism) renders markdown inside the mini‑program:

import { WeElement, define } from 'omi'
import comi from '../../components/comi/comi'

define('page-about', class extends WeElement {
  install(options) {
    wx.showLoading({ title: '加载中' })
    app.globalData.db.collection('article').doc(options.id).get()
      .then(res => {
        comi(res.data.md, this.$scope)
        wx.hideLoading()
      })
  }
  render() { return
}
})

Comi can also be used in pure native mini‑programs by importing its JS, WXML and WXSS files.

6. Cloud Functions & Debugging

A cloud function runs on Node.js in the cloud. Example that removes completed todo items:

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  try {
    return await db.collection('todo').where({ done: true }).remove()
  } catch (e) {
    console.error(e)
  }
}

Cloud functions automatically receive the caller’s openid , simplifying authentication.

The article also provides links to source code, official tutorials, and related reading.