极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

云開發有“黑洞”?日語用例助手實例教你避坑

Rolan 2019-4-17 00:11

4月10日晚人類首張黑洞照片發布,然而對開發者來說,下圖才是他們心目中的黑洞。開發中遇到的bug永遠是一個深不見底的黑洞。為了不讓大家在開發中踩坑,我們今天特地為你們帶來一篇以“日語用例助手”為例的云開發實 ...

4月10日晚人類首張黑洞照片發布,然而對開發者來說,下圖才是他們心目中的黑洞。

開發中遇到的bug永遠是一個深不見底的黑洞。為了不讓大家在開發中踩坑,我們今天特地為你們帶來一篇以“日語用例助手”為例的云開發實戰避坑指南。

轉載來源:云開發x
原作者: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.云開發

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

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 微信極客WeGeeK 來自: segmentfault
极速快3精准计划 山东时时开奖结果查询 福建福彩11选五开奖结果 2019074开奖号 山东时时开奖号码 深圳风采中奖图表 四场进球彩规律 华东十五选五基本走势图 49号码图 体彩11选五手机软件 江苏快3走势图走势