1. 程式人生 > >Taro + 小程式雲開發實戰

Taro + 小程式雲開發實戰

前言

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

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

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

入門踩坑

雲開發篇

  • 環境搭建

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

  1. 使用quickstart(雲開發快速啟動模版)建立專案

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

    在小程式目錄下建立一個資料夾作為你的雲函式目錄,然後在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
複製程式碼
  • 遇到的坑
  1. 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 是個不錯的選擇,但還有很多坑沒有填好,希望它的發展越來越好

  • 雲開發

如果你是個人開發者,想嘗試小程式開發又不想或者難以自己搭建伺服器,雲開發是個好選擇,容易上手且十分敏捷。

但云開發後續有可能收費,如果沒有自己的伺服器,雲開發可以作為過渡時期使用,個人持觀望其發展的態度,而且小程式支援同時使用請求雲函式及自有伺服器,並不衝突,因此可以作為一些輕量的輔助;

參考

作者:evont 連結:https://juejin.im/post/5bd7f93f6fb9a05cff326537 來源:掘金 著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。