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.雲開發

若是你是我的開發者，想嘗試小程序開發又不想或者難以本身搭建服務器，雲開發是個好選擇，容易上手且十分敏捷。