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


Posted in Javascript onFebruary 22, 2017

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

最近在写一个爬虫,需要将网页进行解析供微信小程序使用。文字和图片解析都好说,小程序也有对应的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代码到本地图片的转换,后续可以上传到七牛云等。不管是服务端的解析,还是小程序的呈现,都没有什么难度了...

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
js精确的加减乘除实例
Nov 14 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 #Javascript
js中document.referrer实现移动端返回上一页
Feb 22 #Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 #Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 #Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 #Javascript
JavaScript实现256色转灰度图
Feb 22 #Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 #Javascript
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
详解Python中的各种函数的使用
2015/05/24 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
阿里旅行:飞猪
2017/01/05 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
超市营业员岗位职责
2013/12/20 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
平安工地建设方案
2014/05/06 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
现实表现材料范文
2014/12/23 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
php实例化对象的实例方法
2021/11/17 PHP