• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序 解析网页内容详解及实例

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

作者:剪影Boy 字体:[增加 减小] 来源:互联网 时间:2017-05-11

剪影Boy通过本文主要向大家介绍了婴儿毛衣编织实例详解,成人毛衣编织实例详解,adams入门详解与实例,vb教程编程实例详解,婴儿鞋编织实例详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

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

const webshot = require('webshot');
</div>

定义选项:

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

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

接下来,定义html字符串:

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

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

最后,截图:

webshot(html, 'demo.png', options, (err) => {
  if (err)
    console.log(`Webshot error: ${err.message}`);
});
</div>

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序 图片上传实例详解
  • 微信小程序 动态传参实例详解
  • 微信扫码支付零云插件版实例详解
  • 微信小程序微信支付接入开发实例详解
  • 微信小程序 解析网页内容详解及实例
  • 微信小程序 数据交互与渲染实例详解
  • 微信小程序 自定义对话框实例详解
  • 微信小程序 登录实例详解
  • 微信小程序 简单教程实例详解
  • 微信小程序 增、删、改、查操作实例详解

相关文章

  • 2017-05-11BootStrap table删除指定行的注意事项(笔记整理)
  • 2017-05-11详谈angularjs中路由页面强制更新的问题
  • 2017-05-11nodejs个人博客开发第三步 载入页面
  • 2017-05-11jQuery+CSS3实现点赞功能
  • 2017-05-11JS实现的验证身份证及获取地区功能示例
  • 2017-05-11Bootstrap免费字体和图标网站(值得收藏)
  • 2017-05-11很棒的一组js图片轮播特效
  • 2017-05-11使用vue.js写一个tab选项卡效果
  • 2017-05-115种JavaScript脚本加载的方式
  • 2017-05-11js+html制作简单验证码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • bootstrap中添加额外的图标实例代码
    • JavaScript轮播图简单制作方法
    • 微信小程序 实现动态显示和隐藏某个控件
    • JS实现两周内自动登录功能
    • JavaScript 总结几个提高性能知识点(推荐)
    • JavaScript比较两个数组的内容是否相同(推荐)
    • 关于vuex的学习实践笔记
    • 使用vue.js写一个tab选项卡效果
    • 基于jQuery制作小图标上下滑动特效
    • jquery仿ps颜色拾取功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有