评论

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

上星期开发了专属小账本,这星期带着账本带着女朋友去日本,可好?

原创: Evont  

前言

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

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

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

入门踩坑

1.云开发篇

1.1 环境搭建

云开发可以通过下列两种方式创建: 1.使用quickstart(云开发快速启动模版)创建项目:这种方式会在目录下同时创建名为miniprogram ,带有云开发调用范例的小程序基础模板和名为cloudfuntions 的存放云函数的目录, 由此即可开始全新的项目。

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

1.2 云函数编写

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

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

  1. wx.cloud.callFunction({

  2.    name: '云函数名称',

  3.    data: {

  4.      key1: 'value1',

  5.      key2: 'value2'

  6.    }

  7. }).then((res) => {

  8.    console.log(res);

  9. }).catch((e) => {

  10.    console.log(e);

  11. });

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

  1. //云函数入口函数

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

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

  4.    const { key1, key2 } = event;

  5.    return { query: { key1, key2 } }

  6. }

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

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

1.3 使用tcb-router管理路由

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

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

  1. const TcbRouter = require('tcb-router');

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

  3.    const app = new TcbRouter({ event });

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

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

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

  7.        ctx.body = { key1: value1 };

  8.    });

  9. })

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

  1. wx.cloud.callFunction({

  2.    name: '云函数名称',

  3.    data: {

  4.      $url: '路由名称',

  5.      // 其他数据

  6.      param1: 'test1',

  7.      param2: 'test2'

  8.    },

  9.    success: res => {},

  10.    fail: err => {

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

  12.    }

  13. })

2.Taro篇

2.1 环境搭建

  1. npm install -g @tarojs/cli

  2. taro init myApp

2.2 遇到的坑

1.API支持不足

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

  1. "globals": {

  2.  "wx": true

  3. },

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

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

3.爬虫篇

3.1 superagent

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

  1. // const superagent = require('superagent');

  2. // ...

  3. function crawler(url, cb) {

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

  5.    superagent.get(url).set({

  6.      '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'

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

  8.      if (err) {

  9.        reject(err);

  10.        return;

  11.      }

  12.      resolve(res);

  13.    });

  14.  });

  15. }

3.2 cheerio

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

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

  1.    // const cheerio = require('cheerio');

  2.    // ...

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

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

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

  6.      const categories = [];

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

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

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

  10.      });

  11.      return {

  12.        list: categories,

  13.      };

  14.    });

总结

1.Taro

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

2.云开发

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


最后一次编辑于  03-25  
点赞 0
收藏
评论

3 个评论