electron+vue3 桌面端壁纸工具案例（二）

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

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

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

在做任何采集的时候，首先我们必须要了解需要什么采集语言，既然我们选择了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
//本文不作详细描述，稍微会前端的同志 基本都会

展示结果