Taro + 小程序雲開發實戰

時間 2019-11-24

標籤 taro 程序開發實戰简体版

原文原文鏈接

前言

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

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

我結合這二者，使用cheerio和superagent 抓取了用例.jp，開發了一個《日語用例助手》，因爲只是練手，寫得比較粗糙，仍是很無恥地但願求個star 🤟前端

入門踩坑

雲開發篇

環境搭建

雲開發能夠經過下列兩種方式建立：vue

使用quickstart（雲開發快速啓動模版）建立項目 java

這種方式會在目錄下同時建立名爲miniprogram ，帶有云開發調用範例的小程序基礎模板和名爲cloudfuntions 的存放雲函數的目錄, 由此便可開始全新的項目；
基於現有的小程序使用雲開發jquery

在小程序目錄下建立一個文件夾做爲你的雲函數目錄，而後在project.config.json 文件中新增字段"cloudfunctionRoot": "你的雲函數目錄"，便可以在微信開發者工具中看到目錄的圖標變成了雲，在此目錄下建立雲函數便可；git

雲函數編寫

使用微信開發者工具在雲函數目錄下建立一個雲函數時，會根據名稱建立一個目錄，目錄中包含一個index.js 和package.json。github

在小程序中使用以下方式調用雲函數npm

wx.cloud.callFunction({
    name: '雲函數名稱',
    data: {
      key1: 'value1',
      key2: 'value2'
    }
}).then((res) => {
    console.log(res);
}).catch((e) => {
    console.log(e);
});
複製代碼

index.js的入口函數以下所示：json

//雲函數入口函數
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

使用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,
      };
    });
複製代碼