Building a WeChat Mini Program with Taro and Cloud Development: A Japanese Sentence Helper Case Study

This article introduces how to build a WeChat Mini Program backend service using cloud development capabilities, combined with the Taro multi-end framework (based on React) to develop a Japanese sentence helper application.

Cloud Development Setup

Cloud development can be created in two ways: 1) Using quickstart template which creates a miniprogram directory with cloud function examples and a cloudfunctions directory; 2) Adding "cloudfunctionRoot" field in project.config.json for existing mini programs.

Cloud Function Development

When creating a cloud function in the WeChat developer tools, it generates a directory with index.js and package.json. The function is called from the mini program using wx.cloud.callFunction(), and parameters are passed through the data object. The entry function in index.js is:

exports.main = async (event, context) => {
const { key1, key2 } = event;
return { query: { key1, key2 } }
}

Each cloud function requires its own npm dependencies installed in its directory. To solve the issue of multiple separate functions, the article recommends using tcb-router, a lightweight koa-style routing library for cloud functions.

Using tcb-router

tcb-router is developed by Tencent Cloud team to optimize server-side function handling. It allows managing multiple routes within a single cloud function:

const TcbRouter = require('tcb-router');
exports.main = (event, context) => {
const app = new TcbRouter({event});
app.router('routeName', async (ctx) => {
const { param1, param2 } = ctx._req.event;
ctx.body = { key1: value1 };
});
}

Taro Framework

Taro is a multi-end development solution based on React syntax, suitable for developers who prefer React. Setup requires installing @tarojs/cli globally and initializing with "taro init myApp".

Known issues: 1) Taro doesn't fully support some newer WeChat APIs like wx.cloud - can still use wx directly but ESLint will warn; 2) Only Array.map can be used for JSX array operations; 3) Cannot pass JSX elements in JSX props.

Web Scraping with superagent and cheerio

The article demonstrates scraping Japanese sentences from yourei.jp using superagent for HTTP requests and cheerio (jQuery-like syntax) for HTML parsing:

superagent.get(url).set({'User-Agent': 'Mozilla/5.0...'}).end(function(err, res) {...})

After loading HTML with cheerio.load(), elements can be selected using jQuery-like selectors:

const $ = cheerio.load(res.text);
$('[data-toggle]').each((i, ele) => {
categories.push($(ele).attr('href'));
});

Summary

Taro is recommended for React developers building multi-end mini programs or migrating React projects. Cloud development is ideal for individual developers who want to try mini program development without setting up their own servers.