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

2024-04-03 07:22:05

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

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

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

微信小程序 wx.request(接口调用方式)详解及实例

微信小程序 wx.request----接口调用方式最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },
微信小程序实现列表刷新的实例详解

微信小程序列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "
微信小程序获取微信OpenId详解及实例代码

获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台微信端一定不要忘记设定网页账号中的授权回调页面域名流程图如下主要代码页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc
微信小程序（应用号）简单实例应用及实例详解

Demo 预览演示视频(流量预警 2.64MB) GitHub Repo 地址仓库地址:https://github.com/zce/weapp-demo 使用步骤将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正
微信小程序实战小程序实例

微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用跳转传值使用等等等.... app.json全局配置文件 { "pages":[ "page
微信小程序数据访问实例详解

先简单说一下,小程序的结构如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的数据访问,如果懂点ajax,都不是问题,没啥好讲的微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问
微信小程序 for 循环详解

1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu
微信小程序参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
微信小程序 WXML、WXSS 和JS介绍及详解

前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla
微信小程序 wx:key详细介绍

微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供字符串,代表在 for 循环的 array 中 item 的某

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

相关推荐

随机推荐

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