Taro + 小程式雲開發實戰

EvontNg發表於2018-10-30

前言

小程式開放了雲開發能力，為開發者提供了一個可以很快速構建小程式後端服務的能力，作為一名對新技術不倒騰不快的前端，對此也是很感興趣的；

而Taro 是凹凸實驗室推出的，基於React 語法規範的多端開發解決方案，較之於mpvue 或者wepy，由於年輕，坑還比較多，但是很適合我這種傾向用React 開發的人（具體對比可以參考小程式開發框架技術分析選型）。

我結合這兩者，使用cheerio和superagent 抓取了用例.jp，開發了一個《日語用例助手》，由於只是練手，寫得比較粗糙，還是很無恥地希望求個star ?

入門踩坑

雲開發篇

環境搭建

雲開發可以通過下列兩種方式建立：

使用quickstart（雲開發快速啟動模版）建立專案
這種方式會在目錄下同時建立名為miniprogram ，帶有云開發呼叫範例的小程式基礎模板和名為cloudfuntions 的存放雲函式的目錄, 由此即可開始全新的專案；
基於現有的小程式使用雲開發

在小程式目錄下建立一個資料夾作為你的雲函式目錄，然後在project.config.json 檔案中新增欄位"cloudfunctionRoot": "你的雲函式目錄"，即可以在微信開發者工具中看到目錄的圖示變成了雲，在此目錄下建立雲函式即可；

雲函式編寫

使用微信開發者工具在雲函式目錄下建立一個雲函式時，會根據名稱建立一個目錄，目錄中包含一個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.key1、event.key2即可
    const { key1, key2 } = event;
    return { query: { key1, key2 } }
}
複製程式碼

每個雲函式可視為一個單獨的服務，如果需要安裝第三方依賴，只需要在該目錄點選右鍵，選擇在終端中開啟, 並npm install依賴即可

需要注意的是，每個雲函式都是獨立的，所需要的依賴都需要在對應的目錄下進行npm install，但這樣就會使得專案變得十分龐大且不優雅。因此，接下來我介紹一下tcb-router

使用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)
    }
})
複製程式碼

Taro篇

環境搭建

npm install -g @tarojs/cli
taro init myApp
複製程式碼

遇到的坑

Api 支援不足

由於Taro 對微信的一些新api 並沒有支援到，比如使用雲開發時需要用到wx.cloud，Taro 並沒有支援，但親測是可以直接使用wx 變數，但是會被eslint 提醒，看著十分不悅，可以在.eslintrc 檔案中增加以下程式碼；

"globals": {
  "wx": true
},
複製程式碼

爬蟲篇

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);
    });
  });
}
複製程式碼

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,
      };
    });
複製程式碼