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

原创： Evont

前言

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

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

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

入门踩坑

1.云开发篇

1.1 环境搭建

云开发能够经过下列两种方式建立： 1.使用quickstart（云开发快速启动模版）建立项目：

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

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

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

1.2 云函数编写

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

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

wx.cloud.callFunction({
    name: '云函数名称',
    data: {
      key1: 'value1',
      key2: 'value2'
    }
}).then((res) => {
    console.log(res);
}).catch((e) => {
    console.log(e);
});复制代码

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

//云函数入口函数
exports.main = async (event, context) => {
    // 参数获取在event 中获取，如使用上面的调用函数后，获取data使用 event.key一、event.key2便可
    const { key1, key2 } = event;
    return { query: { key1, key2 } }
}复制代码

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

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

1.3 使用tcb-router管理路由

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

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

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 };
    });
})复制代码

此时小程序的调用方式也须要改为：

wx.cloud.callFunction({
    name: '云函数名称',
    data: {
      $url: '路由名称',
      // 其余数据
      param1: 'test1',
      param2: 'test2'
    },
    success: res => {},
    fail: err => {
      console.error(`[云函数] [${action}] 调用失败`, err)
          }
})复制代码

2.Taro篇

2.1 环境搭建

npm install -g @tarojs/cli
taro init myApp复制代码

2.2 遇到的坑

1.API支持不足

因为Taro 对微信的一些新api 并无支持到，好比使用云开发时须要用到 wx.cloud，Taro 并无支持，但亲测是能够直接使用 wx 变量，可是会被eslint 提醒，看着十分不悦，能够在 .eslintrc 文件中增长如下代码：

"globals": {
  "wx": true
},复制代码

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

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

3.爬虫篇

3.1 superagent

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

// 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);
    });
  });
}复制代码

3.2 cheerio

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

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

// 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,
      };
    });复制代码

总结

1.Taro

若是你是React 开发者，须要开发多端小程序，或者原有React 项目想迁移到小程序，Taro 是个不错的选择，但还有不少坑没有填好，但愿它的发展愈来愈好。

2.云开发

若是你是我的开发者，想尝试小程序开发又不想或者难以本身搭建服务器，云开发是个好选择，容易上手且十分敏捷。