小程序開發(fā)中如何解析網(wǎng)頁內(nèi)容

小編給大家分享一下小程序開發(fā)中如何解析網(wǎng)頁內(nèi)容，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

微信小程序 解析網(wǎng)頁內(nèi)容詳解

最近在寫一個爬蟲，需要將網(wǎng)頁進行解析供微信小程序使用。文字和圖片解析都好說，小程序也有對應(yīng)的text和image標(biāo)簽可以呈現(xiàn)。而更復(fù)雜的，比如表格，則比較棘手，不管是服務(wù)端解析還是小程序呈現(xiàn)都很費勁，也很難覆蓋所有情況。于是我想，將表格對應(yīng)的HTML代碼轉(zhuǎn)成圖片，不失為一種變通的方法。

這里我們采用node-webshot模塊，它對PhantomJS進行了輕量封裝，可以輕松地將網(wǎng)頁以截圖形式保存下來。

首先安裝Node.js和PhantomJS，然后新建一個js文件，加載node-webshot模塊：

const webshot = require('webshot');

定義選項：

const options = {  // 瀏覽器窗口 
 screenSize: {  
   width: 755,  
     height: 25  },  // 要截圖的頁面文檔區(qū)域 
      shotSize: {   
       height: 'all'  },  // 網(wǎng)頁類型  
       siteType: 'html'
       };

這里，瀏覽器窗口的寬度要根據(jù)網(wǎng)頁情況合理設(shè)置，高度可以設(shè)置為一個很小的數(shù)值，然后頁面文檔區(qū)域的高度一定要設(shè)置為all，寬度默認(rèn)為窗口寬度，這樣就可以把表格以最小的尺寸完整截圖。

接下來，定義html字符串：

let html = "target rich text html code, eg: <table>...</table>";

注意，里面的HTML代碼一定要去掉換行符，并將雙引號替換為單引號。

最后，截圖：

webshot(html, 'demo.png', options, (err) => {  if (err)   
 console.log(`Webshot error: ${err.message}`);});

這樣，就實現(xiàn)了從HTML代碼到本地圖片的轉(zhuǎn)換，后續(xù)可以上傳到七牛云等。不管是服務(wù)端的解析，還是小程序的呈現(xiàn)，都沒有什么難度了...

以上是“小程序開發(fā)中如何解析網(wǎng)頁內(nèi)容”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！