Building a Wedding Invitation Mini‑Program with mpvue and WeChat Cloud Development

This article describes how to create a wedding invitation Mini‑Program using the mpvue framework and WeChat cloud development, allowing the entire solution to run without a traditional backend.

Project structure

The project follows a typical mpvue layout:

common – shared resources (js, css, json)

components – Vue component files

pages – each Mini‑Program page

utils – auto‑generated by mpvue (can be ignored)

Key configuration files include { "cloudfunctionRoot": "static/functions/" } in project.config.json and the following app.json snippet to enable cloud capabilities:

{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "cloud": true
}

The main entry App.vue adds an update manager to handle Mini‑Program version updates:

<script>
export default {
  onLaunch () {
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function (res) {
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: '更新提示',
              content: '新版本已经准备好，是否重启应用？',
              success (res) {
                if (res.confirm) {
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function () {
            wx.showModal({
              title: '提示',
              content: '检查到有新版本，下载失败，请检查网络设置',
              showCancel: false
            })
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
            confirmColor: '#5BB53C'
          })
        }
      })
    }
  }
}
</script>

Page implementations

The Index page demonstrates background music control using wx.createInnerAudioContext() . The page fetches a music URL from the music collection and plays it in a loop.

<script>
import IndexSwiper from 'components/indexSwiper'
import tools from 'common/js/h_tools'
const audioCtx = wx.createInnerAudioContext()
export default {
  name: 'Index',
  components: { IndexSwiper },
  data () { return { isPlay: true, list: [] } },
  onShow () { this.isPlay = true; this.getMusicUrl() },
  methods: {
    audioPlay () {
      if (this.isPlay) {
        audioCtx.pause(); this.isPlay = false; tools.showToast('您已暂停音乐播放~')
      } else {
        audioCtx.play(); this.isPlay = true; tools.showToast('背景音乐已开启~')
      }
    },
    getMusicUrl () {
      const db = wx.cloud.database()
      db.collection('music').get().then(res => {
        const musicUrl = res.data[0].musicUrl
        audioCtx.src = musicUrl
        audioCtx.loop = true
        audioCtx.play()
        this.getList()
      })
    },
    getList () {
      const db = wx.cloud.database()
      db.collection('banner').get().then(res => {
        this.list = res.data[0].bannerList
      })
    }
  }
}
</script>

The Map page uses the <map> component with a marker pointing to the wedding venue:

<template>
  <div class="map">
    <image mode="aspectFit" class="head-img" src="../../static/images/t1.png"/>
    <map id="map" class="content" longitude="115.93027" latitude="30.08059"
         markers="markers" scale="18" @tap="toNav"></map>
    ...
  </div>
</template>
<script>
export default {
  data () {
    return {
      markers: [{
        iconPath: '../../static/images/nav.png',
        id: 0,
        latitude: 30.08059,
        longitude: 115.93027,
        width: 50,
        height: 50
      }]
    }
  }
}
</script>

The Greet and Message pages handle user greetings. They retrieve the current user’s OpenID via a cloud function, check whether the user has already left a message, and store new messages in the user collection.

Cloud development workflow

1. Enable cloud in the Mini‑Program settings and add "cloud": true to app.json .

2. Initialize cloud capabilities in main.js :

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
wx.cloud.init({ env: 'your-cloud-env-id' })
const app = new Vue(App)
app.$mount()

3. Use the database API after obtaining a reference:

const db = wx.cloud.database()
const todos = db.collection('todos')
// Example: add a document
todos.add({ data: { title: 'Sample', completed: false } })

4. Cloud functions are written in index.js under the functions directory. Example of a function that returns the caller’s OpenID:

// functions/user/index.js
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID
  }
}

5. For large result sets (e.g., message list), a cloud function can batch‑fetch up to 100 records per request:

// functions/messageList/index.js
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {
  const countResult = await db.collection('message').count()
  const total = countResult.total
  const batchTimes = Math.ceil(total / MAX_LIMIT)
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = db.collection('message')
      .skip(i * MAX_LIMIT)
      .limit(MAX_LIMIT)
      .get()
    tasks.push(promise)
  }
  return (await Promise.all(tasks)).reduce((acc, cur) => ({
    data: acc.data.concat(cur.data),
    errMsg: acc.errMsg
  }))
}

Key takeaways

WeChat cloud development provides free, serverless backend services (database, storage, cloud functions).

All static assets can be stored in cloud storage to avoid re‑submitting the Mini‑Program for updates.

When using cloud functions, remember to upload and deploy the function (right‑click the function folder → “Upload and Deploy”).

Database permissions should be opened appropriately; otherwise read/write operations will fail.