微信小程序解析网页内容的详细介绍与要点剖析

why 284 2024-08-16

这篇文章主要介绍了微信小程序 解析网页内容详解及实例的相关资料,这里使用爬虫对复杂的网页进行抓取,遇到些问题,这里整理下并解决,需要的朋友可以参考下

微信小程序解析网页内容的详细介绍与要点剖析

微信小程序 解析网页内容详解

最近在写一个爬虫,需要将网页进行解析供微信小程序使用。文字和图片解析都好说,小程序也有对应的text和image标签可以呈现。而更复杂的,比如表格,则比较棘手,不管是服务端解析还是小程序呈现都很费劲,也很难覆盖所有情况。于是我想,将表格对应的HTML代码转成图片,不失为一种变通的方法。

这里我们采用node-webshot模块,它对PhantomJS进行了轻量封装,可以轻松地将网页以截图形式保存下来。

首先安装Node.js和PhantomJS,然后新建一个js文件,加载node-webshot模块:

1

const webshot = require('webshot');

定义选项:

1

2

3

4

5

6

7

8

9

10

11

12

13

const options = {

  // 浏览器窗口

  screenSize: {

    width: 755,

    height: 25

  },

  // 要截图的页面文档区域

  shotSize: {

    height: 'all'

  },

  // 网页类型

  siteType: 'html'

};

这里,浏览器窗口的宽度要根据网页情况合理设置,高度可以设置为一个很小的数值,然后页面文档区域的高度一定要设置为all,宽度默认为窗口宽度,这样就可以把表格以最小的尺寸完整截图。

接下来,定义html字符串:

1

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

注意,里面的HTML代码一定要去掉换行符,并将双引号替换为单引号。

最后,截图:

1

2

3

4

webshot(html, &#39;demo.png&#39;, options, (err) => {

  if (err)

    console.log(`Webshot error: ${err.message}`);

});

这样,就实现了从HTML代码到本地图片的转换,后续可以上传到七牛云等。不管是服务端的解析,还是小程序的呈现,都没有什么难度了...


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序框架的全面解析与深度探讨
下一篇:采用 TypeScript 进行微信小程序开发的具体方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~