微信小程序云开发js抓取网页内容

微信小程序云开发js抓取网页内容
最近在研究微信小程序的云开发功能。云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发,还是一个不错的选择。可以做到一天就能上线一个微信小程序。

云开发的优点

云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

云开发目前提供三大基础能力支持:

云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

好了,介绍了这么多关于云开发的知识,感性的同学可以去研究研究。官方文档地址:https://developers.weixin.qq

网页内容抓取

小程序是关于答题的,所以题目的来源是一个问题。上网搜,一个题目一个题目粘贴是一种方法,但是这样的重复工作,估计粘个10左右就想放弃了。所以想到了网页抓取。正好把之前学的node捡起来。

必备工具:Cheerio。一个类似于服务器端JQuery的包。主要用它来分析和过滤抓取来的内容。node的fs模块。这个是node自带的模块,用来读写文件的。此处用来将解析好的数据写入json文件。Axios(非必须)。用来抓取网站的HTML网页。因为我要的数据是从网页上点击一个button后获取渲染的,所以直接访问这个网址是抓取不到的。无奈只能将想要的内容复制出来,存成字符串,去解析这个字符串。

接下来就可以用npm init来初始化一个node项目,一路回车后,即可生成一个package.json文件。
然后npm install --save axios cheerio安装cheerio和axios包。

关键的是用cheerio来实现一个类似jquery的功能。只需将抓取到的内容cheerio.load(quesitons)一下即可,之后就可以按照jquery的操作取dom,组装你想要的数据了。

最后用fs.writeFile将数据保存到json文件中,大功告成。

具体代码如下:

let axios = require(axios);

let cheerio = require(cheerio);

let fs = require(fs);

// 我的html结构大致如下,有很多条数据

const questions = `

`;

const $ = cheerio.load(quesitons);

var arr = [];

for (var i = 0; i < 300; i++) {
var obj = {};
obj.quesitons = $(#q + i).find(.question).text();
obj.A = ( ( ((#q + i).find(.answer)[0]).text();
obj.B = ( ( ((#q + i).find(.answer)[1]).text();
obj.C = ( ( ((#q + i).find(.answer)[2]).text();
obj.D = ( ( ((#q + i).find(.answer)[3]).text();
obj.index = i + 1;
obj.answer =
( ( ((#q + i).find(.answer)[0]).attr(value) == 1
? A
: ( ( ((#q + i).find(.answer)[1]).attr(value) == 1
? B
: ( ( ((#q + i).find(.answer)[2]).attr(value) == 1
? C
: D;
arr.push(obj);
}

fs.writeFile(poem.json, JSON.stringify(arr), err => {
if (err) throw err;
console.log(json文件已成功保存!);

});

保存到json后的文件格式如下,这样就可以通过json文件上传到云端服务器了。

在这里插入图片描述

注意事项

微信小程序云开发的数据库,上传json文件的数据格式需要注意一下,之前一直提示格式错误,后来才发现,JSON 数据不是数组,而是类似 JSON Lines,即各个记录对象之间使用 n 分隔,而非逗号。所以还需要对node写出来的json文件做一个小处理之后才能上传成功。

相关资讯: 微信小程序 微信小程序开发教程

爬虫(Web Crawler)是一种自动化程序,用于从互联网上收集信息。其主要功能是访问网页、提取数据并存储,以便后续分析或展示。爬虫通常由搜索引擎、数据挖掘工具、监测系统等应用于网络数据抓取的场景。 爬虫的工作流程包括以下几个关键步骤: URL收集: 爬虫从一个或多个初始URL开始,递归或迭代地发现新的URL,构建一个URL队列。这些URL可以通过链接分析、站点地图、搜索引擎等方式获取。 请求网页: 爬虫使用HTTP或其他协议向目标URL发起请求,获取网页的HTML内容。这通常通过HTTP请求库实现,如Python中的Requests库。 解析内容: 爬虫对获取的HTML进行解析,提取有用的信息。常用的解析工具有正则表达式、XPath、Beautiful Soup等。这些工具帮助爬虫定位和提取目标数据,如文本、图片、链接等。 数据存储: 爬虫将提取的数据存储到数据库、文件或其他存储介质中,以备后续分析或展示。常用的存储形式包括关系型数据库、NoSQL数据库、JSON文件等。 遵守规则: 为避免对网站造成过大负担或触发反爬虫机制,爬虫需要遵守网站的robots.txt协议,限制访问频率和深度,并模拟人类访问行为,如设置User-Agent。 反爬虫应对: 由于爬虫的存在,一些网站采取了反爬虫措施,如验证码、IP封锁等。爬虫工程师需要设计相应的策略来应对这些挑战。 爬虫在各个领域都有广泛的应用,包括搜索引擎索引、数据挖掘、价格监测、新闻聚合等。然而,使用爬虫需要遵守法律和伦理规范,尊重网站的使用政策,并确保对被访问网站的服务器负责。
微信小程序可以使用云函数来抓取网页数据。下面是一个简单的例子: 1. 在小程序开发者工具中创建一个云函数,例如命名为`getWebData`。 2. 在云函数目录下的`index.js`文件中编写云函数代码。首先需要引入`got`模块,可以使用`npm`安装: ```javascript const got = require('got'); ``` 3. 接着,在`index.js`文件中编写云函数代码。以下是一个示例代码: ```javascript // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const got = require('got') // 云函数入口函数 exports.main = async (event, context) => { const {url} = event try { const response = await got(url) return response.body } catch (error) { return error.response.body } } ``` 在上述代码中,我们首先引入了`got`模块,然后在`exports.main`函数中,我们使用`got`模块发送一个`GET`请求,获取指定网页的HTML内容,并且将其作为函数的返回值。如果出现错误,例如网页无法访问,则返回错误信息。 4. 在小程序中调用云函数。可以使用`wx.cloud.callFunction`方法来调用云函数,例如: ```javascript wx.cloud.callFunction({ name: 'getWebData', data: { url: 'https://www.example.com' }, success: res => { console.log(res.result) }, fail: err => { console.error(err) } }) ``` 在上述代码中,我们调用名为`getWebData`的云函数,并且传递了一个`url`参数,指定要抓取网页地址。如果云函数调用成功,则在控制台输出网页内容,否则输出错误信息。 需要注意的是,由于小程序中的云函数是在云端执行的,因此在云函数中无法直接访问小程序的页面,需要使用类似`got`模块这样的第三方库来发起网络请求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值