node.js 抓取網頁內容（針對微信小程序雲開發）

最近在研究微信小程序的雲開發功能。雲開發最大的好處就是不須要前端搭建服務器，可使用雲端能力，從零開始寫出來一個能上線的微信小程序，避免了買服務器的開銷，對於我的來嘗試練手微信小程序從前端到後臺的開發，仍是一個不錯的選擇。能夠作到一天就能上線一個微信小程序。

雲開發的優勢

雲開發爲開發者提供完整的雲端支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，便可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互兼容，並不互斥。

雲開發目前提供三大基礎能力支持：

1. 雲函數：在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
2. 數據庫：一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
3. 存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理

好了，介紹了這麼多關於雲開發的知識，感性的同窗能夠去研究研究。官方文檔地址：https://developers.weixin.qq....

網頁內容抓取

小程序是關於答題的，因此題目的來源是一個問題。上網搜，一個題目一個題目粘貼是一種方法，可是這樣的重複工做，估計粘個10左右就想放棄了。因此想到了網頁抓取。正好把以前學的node撿起來。

必備工具：

1. Cheerio。一個相似於服務器端JQuery的包。主要用它來分析和過濾抓取來的內容。
2. node的fs模塊。這個是node自帶的模塊，用來讀寫文件的。此處用來將解析好的數據寫入json文件。
3. Axios（非必須）。用來抓取網站的HTML網頁。由於我要的數據是從網頁上點擊一個button後獲取渲染的，因此直接訪問這個網址是抓取不到的。無奈只能將想要的內容複製出來，存成字符串，去解析這個字符串。

接下來就能夠用npm init來初始化一個node項目，一路回車後，便可生成一個package.json文件。
而後npm install --save axios cheerio安裝cheerio和axios包。

關鍵的是用cheerio來實現一個相似jquery的功能。只需將抓取到的內容cheerio.load(quesitons)一下便可，以後就能夠按照jquery的操做取dom，組裝你想要的數據了。

最後用fs.writeFile將數據保存到json文件中，大功告成。

具體代碼以下：

let axios = require("axios");

let cheerio = require("cheerio");

let fs = require("fs");

// 個人html結構大體以下，有不少條數據
const questions = `<li id="q1" style="display: list-item;">
      <div class="questionWrapper">
        <div class="question">舉頭望明月，__________。</div>
        <div class="answer" value="0">
          回首白雲低
        </div>
        <div class="answer" value="1">
          低頭思故鄉
        </div>
        <div class="answer" value="0">
          當春乃發生
        </div>
        <div class="answer" value="0">
          紅掌撥清波
        </div>
      </div>
    </li>
    <li id="q2">
      <div class="questionWrapper">
        <div class="question">__________，卻話巴山夜雨時。</div>
        <div class="answer" value="1">
          何當共剪西窗燭
        </div>
        <div class="answer" value="0">
          在天願作比翼鳥
        </div>
        <div class="answer" value="0">
          世味年來薄似紗
        </div>
        <div class="answer" value="0">
          兩岸青山相對出
        </div>
      </div>
    </li>
    ..........
    `;
    
const $ = cheerio.load(quesitons);

var arr = [];

for (var i = 0; i < 300; i++) {
   var obj = {};
   obj.quesitons = $("#q" + i).find(".question").text();
   obj.A = $($("#q" + i).find(".answer")[0]).text();
   obj.B = $($("#q" + i).find(".answer")[1]).text();
   obj.C = $($("#q" + i).find(".answer")[2]).text();
   obj.D = $($("#q" + i).find(".answer")[3]).text();
   obj.index = i + 1;
   obj.answer =
     $($("#q" + i).find(".answer")[0]).attr("value") == 1
       ? "A"
       : $($("#q" + i).find(".answer")[1]).attr("value") == 1
         ? "B"
         : $($("#q" + i).find(".answer")[2]).attr("value") == 1
           ? "C"
           : "D";
   arr.push(obj);
}

fs.writeFile("poem.json", JSON.stringify(arr), err => {
   if (err) throw err;
   console.log("json文件已成功保存！");
});

保存到json後的文件格式以下，這樣就能夠經過json文件上傳到雲端服務器了。

圖片描述

注意事項

微信小程序雲開發的數據庫，上傳json文件的數據格式須要注意一下，以前一直提示格式錯誤，後來才發現，JSON 數據不是數組，而是相似 JSON Lines，即各個記錄對象之間使用 n 分隔，而非逗號。因此還須要對node寫出來的json文件作一個小處理以後才能上傳成功。