首頁 > 微信小程式 > 小程式開發 > 詳解微信小程式解析網頁內容實例介紹

詳解微信小程式解析網頁內容實例介紹

高洛峰
發布: 2017-03-23 14:02:14
原創
1924 人瀏覽過

這篇文章主要介紹了微信小程式解析網頁內容詳解及實例的相關資料,這裡使用爬蟲對複雜的網頁進行抓取,遇到些問題,這裡整理下並解決,需要的朋友可以參考下

微信小程式解析網頁內容詳解

最近在寫一個爬蟲,需要將網頁進行解析供微信小程式使用。文字和圖片解析都好說,小程式也有對應的text和image標籤可以呈現。而更複雜的,例如表格,則比較棘手,不管是服務端解析還是小程式呈現都很費勁,也很難涵蓋所有情況。於是我想,將表格對應的HTML程式碼轉成圖片,不失為一種變通的方法。

這裡我們採用node-webshot模組,它對PhantomJS進行了輕量級封裝,可以輕鬆地將網頁以截圖形式保存下來。

先安裝Node.js和PhantomJS,然後新建一個js文件,載入node-webshot模組:

const webshot = require('webshot');
登入後複製

定義選項:

const options = {
  // 浏览器窗口
  screenSize: {
    width: 755,
    height: 25
  },
  // 要截图的页面文档区域
  shotSize: {
    height: 'all'
  },
  // 网页类型
  siteType: 'html'
};
登入後複製

這裡,瀏覽器視窗的寬度要根據網頁情況合理設置,高度可以設置為一個很小的數值,然後頁面文檔區域的高度一定要設置為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}`);
});
登入後複製

這樣,就實作了從HTML程式碼到本機圖片的轉換,後續可以上傳到七牛雲等。不管是服務端的解析,還是小程式的呈現,都沒有什麼難度了...

感謝閱讀,希望能幫助大家,謝謝大家對本站的支持!

以上是詳解微信小程式解析網頁內容實例介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板