微信小程序之解析网页内容详细介绍

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

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

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

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

const webshot = require( #39;webshot #39;);

定义选项：

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

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

接下来，定义html字符串：

let html = target rich text html code, eg: table ... /table 

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

最后，截图：

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

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

以上就是微信小程序之解析网页内容详细介绍的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！