Taro + 小程式雲開發實戰
小程式開放了雲開發能力，為開發者提供了一個可以很快速構建小程式後端服務的能力，作為一名對新技術不倒騰不快的前端，對此也是很感興趣的；
而Taro 是凹凸實驗室推出的，基於React 語法規範 的多端開發解決方案，較之於mpvue 或者wepy，由於年輕，坑還比較多，但是很適合我這種傾向用React 開發的人（具體對比可以參考小程式開發框架技術分析選型）。
我結合這兩者，使用cheerio和superagent 抓取了用例.jp， 開發了一個 ofollow,noindex">《日語用例助手》 ，由於只是練手，寫得比較粗糙，還是很無恥地希望求個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 是一個非常實用的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 是一個輕型靈活，類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,
};
});
複製程式碼
總結
- Taro
如果你是React 開發者，需要開發多端小程式，或者原有React 專案想遷移到小程式，Taro 是個不錯的選擇，但還有很多坑沒有填好，希望它的發展越來越好
- 雲開發
如果你是個人開發者，想嘗試小程式開發又不想或者難以自己搭建伺服器，雲開發是個好選擇，容易上手且十分敏捷。
但云開發後續有可能收費，如果沒有自己的伺服器，雲開發可以作為過渡時期使用，個人持觀望其發展的態度，而且小程式支援同時使用請求雲函式及自有伺服器，並不衝突，因此可以作為一些輕量的輔助；