微信小程序解析網(wǎng)頁(yè)內(nèi)容詳解及實(shí)例

更新時(shí)間：2017年02月22日 09:38:23 作者：剪影Boy

這篇文章主要介紹了微信小程序解析網(wǎng)頁(yè)內(nèi)容詳解及實(shí)例的相關(guān)資料,這里使用爬蟲(chóng)對(duì)復(fù)雜的網(wǎng)頁(yè)進(jìn)行抓取，遇到些問(wèn)題，這里整理下并解決，需要的朋友可以參考下

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

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

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

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

const webshot = require('webshot');

定義選項(xiàng)：

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

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

接下來(lái)，定義html字符串：

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

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

最后，截圖：

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

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

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序新建登錄頁(yè)并實(shí)現(xiàn)tabBar隱藏
這篇文章主要介紹了微信小程序新建登錄頁(yè)并實(shí)現(xiàn)tabBar隱藏的相關(guān)資料,需要的朋友可以參考下
2017-06-06
Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解
這篇文章主要為大家介紹了Proxy的不可變數(shù)據(jù)優(yōu)點(diǎn)及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
微信小程序基礎(chǔ)組件與導(dǎo)航組件詳細(xì)介紹
這篇文章主要介紹了微信小程序基礎(chǔ)組件與導(dǎo)航組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
2017-02-02
uniapp封裝canvas組件無(wú)腦繪制保存小程序分享海報(bào)
這篇文章主要為大家介紹了uniapp封裝canvas組件和方法無(wú)腦繪制并保存小程序分享海報(bào)實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解
這篇文章主要為大家介紹了JavaScript復(fù)原何同學(xué)B站頭圖細(xì)節(jié)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JavaScript中常用的數(shù)組操作方法
Javascript常用數(shù)組是構(gòu)成其的一個(gè)重要的部分，它們可以用來(lái)存儲(chǔ)字符串、對(duì)象、函數(shù)、因此本篇文章小編九帶大家深入了解Javascript常用數(shù)組的操作方法,需要的朋友可以參考下面文章的具體內(nèi)容
2021-09-09
微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用及實(shí)例詳解
這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下
2016-09-09
Electron學(xué)習(xí)應(yīng)用程序打包實(shí)例詳解
這篇文章主要介紹了Electron學(xué)習(xí)應(yīng)用程序打包實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
從ES6開(kāi)始弱化arguments的作用
這篇文章主要為大家介紹了從ES6開(kāi)始弱化arguments的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02