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


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条件判断使用小技巧总结
Sep 08 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python实现人民币大写转换
2018/06/20 Python
详解python中*号的用法
2019/10/21 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
岗位职责的含义
2013/11/17 职场文书
商场中秋节广播稿
2014/01/17 职场文书
医学求职自荐信
2014/06/21 职场文书
自主招生自荐信范文
2015/03/04 职场文书
图解上海144收音机
2021/04/22 无线电
nginx配置限速限流基于内置模块
2022/05/02 Servers