WeChat Mini Program Cloud Development: Electronic Business Card Creation, Sharing, and Access Notification

This article describes a complete implementation of an electronic business card feature set for a WeChat Mini Program using Cloud Development. It covers the preparation steps, data storage, image upload, AI‑based name‑card recognition, generation of shareable mini‑program QR codes, and sending template messages when a card is accessed.

Technical points covered:

Data upload, update, pagination read, deletion, and AI intelligent name‑card recognition.

Single and multiple image upload, image URL retrieval, and parameterized mini‑program code generation.

Template message delivery via cloud function calls.

Preparation

1. Register a WeChat Mini Program account and obtain the AppID and AppSecret. 2. Install the WeChat Developer Tools, create a project, and enable Cloud Development in the tool.

1. Create Electronic Business Card

The card creation supports manual data entry and AI‑based recognition of paper cards. The mapping.js framework is imported for data mapping.

// Upload name card and get temporary link
getTempFileURL() {
  wx.cloud.getTempFileURL({
    fileList: [{ fileID: this.data.fileID }]
  })
  .then(res => {
    console.log('获取成功', res);
    if (res.fileList.length) {
      this.setData({ coverImage: res.fileList[0].tempFileURL });
      this.parseNameCard();
    } else {
      Toast('获取图片地址失败');
    }
  })
  .catch(err => {
    Toast('获取图片地址失败');
  });
}

After obtaining the temporary URL, the function parseNameCard calls a cloud function parseCard to perform OCR on the image.

wx.cloud.callFunction({
  name: 'parseCard',
  data: { url: this.data.coverImage }
})
.then(res => {
  if (res.result.data.length === 0) {
    Toast('解析失败，请上传【纸质名片】或【手动创建】');
    return;
  }
  let data = this.transformMapping(res.result.data);
  wx.setStorageSync('parseCardData', data);
  Toast('解析成功');
})
.catch(err => {
  console.error('解析失败，请上传【纸质名片】或【手动创建】', err);
  Toast('解析失败，请上传【纸质名片】或【手动创建】');
});

The helper transformMapping converts the OCR result into the required data structure and removes duplicate fields.

transformMapping(data) {
  let record = {};
  let returnData = [];
  data.map(item => {
    let name = null;
    if (mapping.hasOwnProperty(item.item)) {
      name = mapping[item.item];
      item.name = name;
    }
    return item;
  }).forEach(item => {
    if (!record.hasOwnProperty(item.item)) {
      returnData.push(item);
      record[item.item] = true;
    }
  });
  return returnData;
}

2. Share Electronic Business Card

Two sharing methods are provided: direct mini‑program forwarding and generating a personalized poster with a QR code.

const cloud = require('wx-server-sdk');
const axios = require('axios');
const rp = require('request-promise');
cloud.init();
exports.main = async (event, context) => {
  console.log(event);
  try {
    const resultValue = await rp('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret');
    const token = JSON.parse(resultValue).access_token;
    const response = await axios({
      method: 'post',
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit',
      responseType: 'stream',
      params: { access_token: token },
      data: { page: event.page, width: 300, scene: event.id }
    });
    await cloud.uploadFile({
      cloudPath: 'xcxcodeimages/' + Date.now() + '.png',
      fileContent: response.data
    });
  } catch (err) {
    console.log('>>>>>>> ERROR:', err);
  }
};

The cloud function obtains an access token, calls the WeChat API to generate a QR code with the specified page and scene, and uploads the resulting image to Cloud Storage.

3. Notification When Card Is Accessed

A template message is sent to the card owner whenever the card is viewed.

const cloud = require('wx-server-sdk');
cloud.init();
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.templateMessage.send({
      touser: event.toUser,
      page: "pages/index/index",
      data: {
        keyword1: { value: event.visitDate },
        keyword2: { value: "刚刚有人深度访问了您的名片，经常完善名片信息，更容易被查找和访问。" }
      },
      templateId: 'templateId',
      formId: event.formId
    });
    return result;
  } catch (err) {
    throw err;
  }
};

Conclusion

Compared with the traditional Mini Program + web backend model, Cloud Development saves considerable effort and manpower, allowing developers to focus on feature implementation. Although Cloud Development is relatively new, new capabilities such as data import/export and cloud calls are continuously being released.