React Native 网页抓取与解析（基于 cheerio）

如果你打算用 RN 写某网站的第三方 App，但该网站不提供可以返回 JSON 的接口，这种情况下就需要自己进行页面抓取及解析。

首先，我们需要明确一件事，RN 既不是 browser 也不是 node，这意味着有些 js 库是不能直接拿来用的。

HTTP 请求

RN 提供了 Fetch API 和 XMLHttpRequest API，基于这两个库的二次封装库也是可以用的，比如 frisbee 和 axios，所以在 RN 下进行 HTTP 请求不是什么问题。

HTML 解析

当前，最好用的 js html parser 应属 cheerio，是否可以在 RN 使用呢？让我们试试。

首先，安装 cherrio（注意，一定是要 v0.22.0，后面解释）：

$ npm i cheerio@0.22.0

使用：

import cheerio from 'cheerio'
const $ = cheerio.load('<h2 class="title">Hello world</h2>')

很不幸，出现了错误：

error: bundling failed: "Unable to resolve module `events` 

这是因为 cheerio 的依赖 htmlparser2 依赖一些 node 内置的库。不过这是可以被解决的，理论上，只要这些依赖库不依赖更底层的接口，那么就可以通过 npm 安装上这些依赖：

$ npm i events stream buffer

再次刷新，我们发现 cheerio 已经可以正常使用了！

其实这个问题有在 cheerio 的 issues 上讨论过：https://github.com/cheeriojs/cheerio/issues/1058。有人为了解决这个问题弄了另外一个库 cheerio-without-node-native，然而这种做法不仅没有必要而且非常糟糕，因为这个分裂出去的版本的质量是难以保证的。作者的观点是：

You can install the missing packages from npm (events, stream and utils afaict) and they will be automatically picked up.

I would not recommend the usage of a fork as it will make it difficult to track down issues and will delay, if not prevent, patches for bugs.

至于为什么只能用 cheerio@0.22.0，是因为之后的版本，cheerio 引入了 parse5，而 parse5 依赖 stream.Writable，npm 安装的 stream 并不提供。

测试

由于网页随时可能发生变化，测试就显得尤为重要。这里我以一段获取简书用户数据的代码为例，做一个简单的黑箱测试。

// api.js
// 这里，我实现了一个 getUserData 函数，以 UserID 为参数，
// 获取个人主页数据，并解析出用户头像链接、用户昵称、发表的文章
async function getUserData(user) {
  const response = await fetch('http://www.jianshu.com/u/' + user)
  const $ = cheerio.load(await response.text())
  return {
    avatar: 'http:' + $('.avatar img').attr('src'),
    name: $('.title .name').text(),
    articles: $('.note-list li').map(function () {
      return {
        title: $('.title', this).text(),
      }
    }).get()
  }
}

export {getUserData}

为了能在 node 环境下使用 fetch，需要安装 node-fetch。RN 已经默认安装了 jest，我们就用它来测试吧：

// __test__/api.js
// 测试 getUserData 是否能正常运行，并返回预期的结果
// 这里为了更真实的模拟实际情况，而用 node-fetch 模拟了 RN 里的 fetch
// 也可以 mock fetch 然后返回预设的测试数据
import {getUserData} from '../api'
global.fetch = require('node-fetch')

test('getUserData', async () => {
  const data = await getUserData('3747663284a0')
  expect(data.name).toBe('7c00')
  expect(data.avatar).toMatch(/http:\/\/upload\.jianshu\.io\/users\/upload_avatars.*\.jpg/)
  data.articles.forEach(article => expect(article.title).not.toBeNull())
  console.log(data)
})

运行测试：

$ npm test

npm test

另一种获取网页数据的黑科技

除了传统的 HTML 请求解析，在某些情况下我们还可以用类似 PhantomJS 的方案，优点是可以很好地避开一些限制，降低解析难度。RN 里当然用不了 PhantomJS，但我们有 WebView，可以通过 injectedJavaScript 注入 js，用 postMessage 回传数据，比如这段用于获取页面中视频链接的代码：

<WebView
  injectedJavaScript={`
    const video = document.querySelector('video');
    if (video) {
      postMessage(video.src);
    }
  `}
  onMessage={event => this._loaded(event.nativeEvent.data)}
  source={{
    uri: this.state.webViewUrl,
    headers: {
      referer: 'https://newplayer.jfrft.com',
    }
  }}
/>

PS. 慎用该方法，首先是 WebView 消耗资源太大，其次是难以测试，缺乏稳定性。