Taro + 小程序云开发实战|日语用例助手

　　Taro + 小程序云开发实战|日语用例助手

　　前言

　　小程序开放了云开发能力，为开发者提供了一个可以很快速构建小程序后端服务的能力，作为一名对新技术不倒腾不快的前端，对此也是很感兴趣的。

　　Taro 是凹凸实验室推出的，基于React 语法规范的多端开发解决方案，较之于mpvue或者wepy，由于年轻，坑还比较多，但是很适合我这种倾向用React 开发的人。

　　我结合这两者，使用cheerio和superagent 抓取了用例.jp， 开发了一个《日语用例助手》。

　　入门踩坑1.云开发篇1.1 环境搭建

　　云开发可以通过下列两种方式创建：1.使用quickstart（云开发快速启动模版）创建项目：

　　

　　这种方式会在目录下同时创建名为miniprogram ，带有云开发调用范例的小程序基础模板和名为cloudfuntions 的存放云函数的目录, 由此即可开始全新的项目。

　　2.基于现有的小程序使用云开发：

　　<p>在小程序目录下创建一个文件夹作为你的云函数目录，然后在project.config.json 文件中新增字段"cloudfunctionRoot": "你的云函数目录"，即可以在微信开发者工具中看到目录的图标变成了云，在此目录下创建云函数即可；</p>

　　

　　1.2 云函数编写

　　使用微信开发者工具在云函数目录下创建一个云函数时，会根据名称创建一个目录，目录中包含一个index.js 和package.json。

　　在小程序中使用如下方式调用云函数：

　　<p>wx.cloud.callFunction({

　　 name: '云函数名称',

　　 data: {

　　 key1: 'value1',

　　 key2: 'value2'

　　 }

　　}).then((res) => {

　　 console.log(res);

　　}).catch((e) => {

　　 console.log(e);

　　});</p>

　　index.js的入口函数如下所示：

　　<p>//云函数入口函数

　　exports.main = async (event, context) => {

　　 // 参数获取在event 中获取，如使用上面的调用函数后，获取data使用 event.key1、event.key2即可

　　 const { key1, key2 } = event;

　　 return { query: { key1, key2 } }

　　}</p>

　　每个云函数可视为一个单独的服务，如果需要安装第三方依赖，只需要在该目录点击右键，选择 在终端中打开, 并 npm install依赖即可。

　　需要注意的是，每个云函数都是独立的，所需要的依赖都需要在对应的目录下进行 npm install，但这样就会使得项目变得十分庞大且不优雅。因此，接下来我介绍一下tcb-router。

　　1.3 使用tcb-router管理路由

　　tcb-router 是腾讯云团队开发的，基于 koa 风格的小程序·云开发云函数轻量级类路由库，主要用于优化服务端函数处理逻辑。

　　使用tcb-router的方法很简单：

　　<p>const TcbRouter = require('tcb-router');

　　exports.main = (event, context) => {

　　 const app = new TcbRouter({ event });

　　 app.router('路由名称', async (ctx) => {

　　 //原有的event需要通过ctx._req.event 获取

　　 const { param1, param2 } = ctx._req.event;

　　 ctx.body = { key1: value1 };

　　 });

　　})</p>

　　此时小程序的调用方式也需要改成：

　　<p>wx.cloud.callFunction({

　　 name: '云函数名称',

　　 data: {

　　 $url: '路由名称',

　　 // 其他数据

　　 param1: 'test1',

　　 param2: 'test2'

　　 },

　　 success: res => {},

　　 fail: err => {

　　 console.error(`[云函数] [${action}] 调用失败`, err)

　　 }

　　})</p>

　　2.Taro篇2.1 环境搭建

　　<p>npm install -g @tarojs/cli

　　taro init myApp</p>

　　2.2 遇到的坑1.API支持不足

　　由于Taro 对微信的一些新api 并没有支持到，比如使用云开发时需要用到 wx.cloud，Taro 并没有支持，但亲测是可以直接使用 wx 变量，但是会被eslint 提醒，看着十分不悦，可以在 .eslintrc 文件中增加以下代码：

　　2.不能使用 Array#map 之外的方法操作 JSX 数组。

　　3.不允许在 JSX 参数(props)中传入 JSX 元素(taro/no-jsx-in-props)。

　　3.爬虫篇3.1 superagent

　　superagent 是一个非常实用的http请求模块，用来抓取网页十分有用，使用也十分简单，以下是我在抓取 yourei.jp 时使用的代码：

　　<p>// const superagent = require('superagent');

　　// ...

　　function crawler(url, cb) {

　　 return new Promise((resolve, reject) => {

　　 superagent.get(url).set({

　　 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36'

　　 }).end(function (err, res) {

　　 if (err) {

　　 reject(err);

　　 return;

　　 }

　　 resolve(res);

　　 });

　　 });

　　}</p>

　　3.2 cheerio

　　cheerio 是一个轻型灵活，类jQuery的对HTML元素分析操作的工具。在进行一些server端渲染的页面以及一些简单的小页面的爬取时，cheerio十分好用且高效。

　　在使用 superagent 抓取了网页内容后，可以使用如下方式解析页面代码:

　　<p> // const cheerio = require('cheerio');

　　 // ...

　　 const result = crawler(apiUrl).then((res) => {

　　 // 使用load 之后，$ 即可同jquery 一样使用选择器来选择元素了

　　 const $ = cheerio.load(res.text);

　　 const categories = [];

　　 $('[data-toggle]').each((i, ele) => {

　　 // 可以使用.text()、.html() 等方式获取元素的内容

　　 categories.push($(ele).attr('href'));

　　 });

　　 return {

　　 list: categories,

　　 };

　　 });</p>

　　总结1.Taro

　　如果你是React 开发者，需要开发多端小程序，或者原有React 项目想迁移到小程序，Taro 是个不错的选择，但还有很多坑没有填好，希望它的发展越来越好。

　　2.云开发

　　如果你是个人开发者，想尝试小程序开发又不想或者难以自己搭建服务器，云开发是个好选择，容易上手且十分敏捷。