【dart-skeleton，逻辑篇】自动生成骨架屏项目
前言：
承接上篇【dart-skeleton】自动生成骨架屏项目内容，这一篇主要来说一下第二块内容逻辑篇。
我们先抽象一个生成骨架页面的类(GeneratePageStructure)：
定义由构造函数传入options选项，且选项的类型使用Ts的interface进行定义。
提供两个函数供使用： 公开使用的start方法的主要工作流程：
- 建立pb对象(PuppeteerBrowser)；
const page = await pb.open(
this.options.url,
this.options.emulateOpts,
this.options.extraHTTPHeaders
);
复制代码- 生成骨架片段html；
const html = await this.generateSkeletonFragment(page);
复制代码- 重写入门Html文件；
rewriteHtml(this.options.output.injectSelector, this.filepath, html);
复制代码- 关闭并退出进程。
await pb.close();
process.exit(0);
复制代码私有的generateSkeletonFragment函数的主要工作流程：
- 整合构造函数传入的选项；
// function
value: `${this.options.includeElement}`
// object
value: JSON.stringify({
height: this.options.header?.height,
background: this.options.header?.background,
})
// string
value: value
复制代码- 使用fs读取解析dom的js脚本；
let scriptContent = await fs.readFileSync(
path.resolve(__dirname, "eval-dom-scripts.js"),
"utf8"
);
复制代码- 使用addScriptTag注入脚本内容；
await page.addScriptTag({ content: scriptContent });
复制代码- 在evaluate中执行挂载到window上的解析函数。
await page.evaluate((res) => {
// @ts-ignore
return window.evalDOMScripts.apply(window, res);
// @ts-ignore
}, opts)
复制代码我们还重点操作了一个pb类，这个类的主要功能是对puppeteer库的操作：
- 使用launch函数启动获得一个浏览器对象，启动时可以控制是否需要显示浏览器页面，是否需要开启devtools或是否需要延缓执行；
this.browser = await puppeteer.launch({
headless: !this.isDebug,
devtools: this.isDebug,
slowMo: 5,
});
复制代码- 启动后使用newPage函数打开一个新的页面；
const page = await this.browser.newPage();
复制代码- 我们可以根据页面的实际需要决定是否需要设置请求头属性；
await page.setExtraHTTPHeaders(extraHTTPHeaders);
复制代码- 现在可以对浏览器的设备属性进行调整,如是否在是手机中或PC电脑中,屏幕的尺寸信息等等；
emulateOpts = puppeteer.devices["iPhone 6"];
await page.emulate(emulateOpts);
复制代码- 通过goto函数跳转我们的目标url，至此就可以开始解析DOM信息做后续的操作了。
await page.goto(url, {
timeout: 2 * 60 * 1000,
waitUntil: "networkidle0",
});
复制代码说明： 此项目是在dps项目的基础上重写的一个Ts版本，目的是学习思路方便后续改造。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-11-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
