微信小程序 解析網(wǎng)頁內(nèi)容詳解及實例
更新時間：2017年02月22日 09:38:23 作者：剪影Boy
這篇文章主要介紹了微信小程序 解析網(wǎng)頁內(nèi)容詳解及實例的相關(guān)資料,這里使用爬蟲對復(fù)雜的網(wǎng)頁進行抓取，遇到些問題，這里整理下并解決，需要的朋友可以參考下
微信小程序 解析網(wǎng)頁內(nèi)容詳解
最近在寫一個爬蟲，需要將網(wǎng)頁進行解析供微信小程序使用。文字和圖片解析都好說，小程序也有對應(yīng)的text和image標簽可以呈現(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，寬度默認為窗口寬度，這樣就可以把表格以最小的尺寸完整截圖。
接下來，定義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)，都沒有什么難度了...
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序 新建登錄頁并實現(xiàn)tabBar隱藏的相關(guān)資料,需要的朋友可以參考下2017-06-06
Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 基礎(chǔ)組件與導(dǎo)航組件詳細介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了uniapp封裝canvas組件和方法無腦繪制并保存小程序分享海報實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
JavaScript復(fù)原何同學B站頭圖細節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復(fù)原何同學B站頭圖細節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Javascript常用數(shù)組是構(gòu)成其的一個重要的部分，它們可以用來存儲字符串、對象、函數(shù)、因此本篇文章小編九帶大家深入了解Javascript常用數(shù)組的操作方法,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
微信小程序（應(yīng)用號）簡單實例應(yīng)用及實例詳解
這篇文章主要介紹了微信小程序（應(yīng)用號）簡單實例應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了Electron學習應(yīng)用程序打包實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了從ES6開始弱化arguments的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了JS實現(xiàn)一個微信錄音功能過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02