electron+vue3 桌面端壁纸工具案例(二) - 风之涯技术博客

标签搜索

electron+vue3 桌面端壁纸工具案例(二)

小峰
2022年10月01日 / 0 评论 / 43 阅读 / 正在检测是否收录...

今天继续来聊一聊壁纸采集,采集目标地址

https://bizhi.cheetahfun.com/dtag_109/index_1.shtml
//这是元气动态壁纸

d6354d03d6a61809d0f1755791e1079f.png

接上期采集动态壁纸,静态壁纸以后有时间再说。

在做任何采集的时候,首先我们必须要了解需要什么采集语言,既然我们选择了nodejs,那么我们就选用浏览器模拟采集,需要用到的插件 puppeteer , puppeteer插件是一款常用的模拟浏览器进行数据访问的一种方式,当然有一些大站是屏蔽了此插件。

废话不多说,先安装puppeteer

npm i puppeteer

安装成功后,我们就可以开始编码了

按照puppeteer的API文档,文档地址https://learnku.com/docs/puppeteer/3.1.0/class-puppeteer/8541
第一步 我们需要先创建一个浏览器
1.首先在编码文档中引入 puppeteer

import puppeteer from "puppeteer"

2.创建浏览器

let browser = await puppeteer.launch({
          headless: puppeteer["headless"],//true, //显示浏览器与否 true=显示 false=隐藏
          devtools: false,//是否打开浏览器调试模式
          timeout: 0, //默认30000ms超时,0表示不超时
          ignoreHTTPSErrors:true,
          ignoreDefaultArgs:[
              // '--disable-extensions',
              // '--enable-automation'
          ]
      });

第二步 打开浏览器的一个页面

let newPage = await browser.newPage(); 

第三步 代码方式输入网址

let url = "https://bizhi.cheetahfun.com/dtag_109/index_1.shtml";
newPage.goto(url); //进入网址
newPage.setViewport({ width: 1600, height: 900 }); //设置浏览器的大小(headless=true有效)
await newPage.waitForNavigation();//等待页面加载完成

第四步 植入需要采集的代码获取壁纸列表

let titles = await newPage.$$eval('section>ul>li>div>a',eles=>eles.map(item=>item.title)); //获取本页全部动态壁纸名称
let urls = await newPage.$$eval('section>ul>li>div>a',eles=>eles.map(item=>item.href));//获取本页全部动态壁纸需要打开的链接
let covers = await newPage.$$eval('section>ul>li>div>a>img:nth-child(1)',eles=>eles.map(item=>item.src));//获取本页全部动态壁纸的封面图片
let list=[];
for(let i in titles){
    list.push({
        aTitle:titles[i],
        aUrl:urls[i],
        aCover:covers[i]
    });
}
//list为最终本页的所有动态壁纸列表数据
//此处的$$eval()和$eval()类似于jq一样,获取标签的属性值

第五步 获取动态壁纸的最终链接(这里全部是mp4的地址)

let mediaUrl = 'https://bizhi.cheetahfun.com/dn/pd241982.html'; //这里以第一个为例
//这个页面只有一个video是源链接
//所以我们这里就采集video标签的src即可
//按照采集列表的方法
newPage.goto(mediaUrl); //进入网址
newPage.setViewport({ width: 1600, height: 900 }); //设置浏览器的大小(headless=true有效)
await newPage.waitForNavigation();//等待页面加载完成

let result = await newPage.evaluate(()=>{
    if(document.querySelector('video')){
        return document.querySelector('video').src;
    }
    return '';
});

//此处是直接在本页面直接获取video的src属性
//result就是mp4视频的链接
//只要获取了视频地址,至于视频的下载 参考request插件,自己编写方法即可,同时需要文件插件 fs
//本文不作详细描述,稍微会前端的同志 基本都会

展示结果

2378b0ca681d9c1a5fc9e1200939fae6.png

ebbbd0955e187517a8253c50b53fa9cb.png

动态壁纸都能获取,那么一些图片壁纸就不必多说了,方法差不多,只要在抓取的时候配置好抓取规则即可。

1

评论 (0)

QQ
昵称
邮箱
取消