提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

【dart-skeleton，逻辑篇】自动生成骨架屏项目

2023-02-18 16:41:28 时间

前言：

承接上篇【dart-skeleton】自动生成骨架屏项目内容，这一篇主要来说一下第二块内容逻辑篇。

我们先抽象一个生成骨架页面的类(GeneratePageStructure)：

定义由构造函数传入options选项，且选项的类型使用Ts的interface进行定义。

提供两个函数供使用： 公开使用的start方法的主要工作流程：

  1. 建立pb对象(PuppeteerBrowser)；
const page = await pb.open(
  this.options.url,
  this.options.emulateOpts,
  this.options.extraHTTPHeaders
);
复制代码
  1. 生成骨架片段html；
const html = await this.generateSkeletonFragment(page);
复制代码
  1. 重写入门Html文件；
rewriteHtml(this.options.output.injectSelector, this.filepath, html);
复制代码
  1. 关闭并退出进程。
await pb.close();
process.exit(0);
复制代码
私有的generateSkeletonFragment函数的主要工作流程：
  1. 整合构造函数传入的选项；
// function
value: `${this.options.includeElement}`

// object
value: JSON.stringify({
  height: this.options.header?.height,
  background: this.options.header?.background,
})
  
// string
value: value
复制代码
  1. 使用fs读取解析dom的js脚本；
let scriptContent = await fs.readFileSync(
  path.resolve(__dirname, "eval-dom-scripts.js"),
  "utf8"
);
复制代码
  1. 使用addScriptTag注入脚本内容；
await page.addScriptTag({ content: scriptContent });
复制代码
  1. 在evaluate中执行挂载到window上的解析函数。
await page.evaluate((res) => {
  // @ts-ignore
  return window.evalDOMScripts.apply(window, res);
  // @ts-ignore
}, opts)
复制代码

我们还重点操作了一个pb类，这个类的主要功能是对puppeteer库的操作：

  1. 使用launch函数启动获得一个浏览器对象，启动时可以控制是否需要显示浏览器页面，是否需要开启devtools或是否需要延缓执行；
this.browser = await puppeteer.launch({
  headless: !this.isDebug,
  devtools: this.isDebug,
  slowMo: 5,
});
复制代码
  1. 启动后使用newPage函数打开一个新的页面；
const page = await this.browser.newPage();
复制代码
  1. 我们可以根据页面的实际需要决定是否需要设置请求头属性；
await page.setExtraHTTPHeaders(extraHTTPHeaders);
复制代码
  1. 现在可以对浏览器的设备属性进行调整,如是否在是手机中或PC电脑中,屏幕的尺寸信息等等；
emulateOpts = puppeteer.devices["iPhone 6"];
await page.emulate(emulateOpts);
复制代码
  1. 通过goto函数跳转我们的目标url，至此就可以开始解析DOM信息做后续的操作了。
await page.goto(url, {
  timeout: 2 * 60 * 1000,
  waitUntil: "networkidle0",
});
复制代码

说明： 此项目是在dps项目的基础上重写的一个Ts版本，目的是学习思路方便后续改造。

相关文章