原創： 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.key1、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.雲開發
如果你是個人開發者，想嘗試小程式開發又不想或者難以自己搭建伺服器，雲開發是個好選擇，容易上手且十分敏捷。
