Merge pull request #293 from mipengine/feat/prerender-novel-shell

feat: 配合结果页预渲染修改

components/mip-shell-xiaoshuo/example/mipx-xiaoshuo-1-2.html

@@ -199,7 +199,7 @@
                     "page": 1
                 },
                 "nextPage": {
-                    "url": "mipx-xiaoshuo-1-66.html",
+                    "url": "mipx-xiaoshuo-1-3.html",
                     "chapter": 1,
                     "page": 3
                 }

components/mip-shell-xiaoshuo/mip-shell-xiaoshuo.js

@@ -32,13 +32,64 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
     this.pageNum = 0
   }
 
+  // 通过小说JS给dom添加预渲染字段
+  connectedCallback () {
+    // 从结果页进入小说阅读页加上预渲染的标识prerender，但是内部的每页不能加，会影响翻页内的预渲染
+    if (this.element.getAttribute('prerender') !== null) {
+      this.element.removeAttribute('prerender')
+    }
+    if (this.element.getAttribute('prerender') == null && MIP.viewer.page.isRootPage) {
+      this.element.setAttribute('prerender', '')
+    }
+    // 页面初始化的时候获取缓存的主题色和字体大小修改整个页面的样式
+    this.initPageLayout()
+  }
+
+  /**
+   * 页面初始化的时候获取缓存的主题色和字体大小修改整个页面的样式
+   *
+   * @private initPageLayout
+   */
+  initPageLayout () {
+    // 创建模式切换（背景色切换）
+    this.pageStyle = new PageStyle()
+    // 承接emit & broadcast事件：所有页面修改页主题 & 字号
+    window.addEventListener('changePageStyle', (e, data) => {
+      if (e.detail[0] && e.detail[0].theme) {
+        // 修改主题
+        this.pageStyle.update(e, {
+          theme: e.detail[0].theme
+        })
+      } else if (e.detail[0] && e.detail[0].fontSize) {
+        // 修改字号
+        this.pageStyle.update(e, {
+          fontSize: e.detail[0].fontSize
+        })
+      } else {
+        // 初始化，从缓存中获取主题和字号apply到页面
+        this.pageStyle.update(e)
+      }
+      document.body.classList.add('show-xiaoshuo-container')
+      // 加载动画完成，发送白屏日志
+      sendWebbLog('whitescreen')
+      // 初始化页面结束后需要把「mip-shell-xiaoshuo-container」的内容页显示
+      let xiaoshuoContainer = document.querySelector('.mip-shell-xiaoshuo-container')
+      if (xiaoshuoContainer) {
+        xiaoshuoContainer.classList.add('show-xiaoshuo-container')
+      }
+    })
+    // 初始化页面时执行一次背景色+字号初始化
+    window.MIP.viewer.page.emitCustomEvent(window, false, {
+      name: 'changePageStyle'
+    })
+  }
+
   // 基类方法：绑定页面可被外界调用的事件。
   // 如从跳转后的iframe颜色设置，通知所有iframe和根页面颜色改变
   bindAllEvents () {
     super.bindAllEvents()
     // 初始化所有内置对象
     // 创建模式切换（背景色切换）
-    this.pageStyle = new PageStyle()
     const isRootPage = MIP.viewer.page.isRootPage
     // 用来记录翻页的次数，主要用来触发品专的广告
     let currentWindow = isRootPage ? window : window.parent
@@ -79,37 +130,6 @@ export default class MipShellXiaoshuo extends MIP.builtinComponents.MipShell {
       this.$buttonMask.onclick = this.closeEverything.bind(this)
     }
 
-    // 承接emit & broadcast事件：所有页面修改页主题 & 字号
-    window.addEventListener('changePageStyle', (e, data) => {
-      if (e.detail[0] && e.detail[0].theme) {
-        // 修改主题
-        this.pageStyle.update(e, {
-          theme: e.detail[0].theme
-        })
-      } else if (e.detail[0] && e.detail[0].fontSize) {
-        // 修改字号
-        this.pageStyle.update(e, {
-          fontSize: e.detail[0].fontSize
-        })
-      } else {
-        // 初始化，从缓存中获取主题和字号apply到页面
-        this.pageStyle.update(e)
-      }
-      document.body.classList.add('show-xiaoshuo-container')
-      // 加载动画完成，发送白屏日志
-      sendWebbLog('whitescreen')
-      // 初始化页面结束后需要把「mip-shell-xiaoshuo-container」的内容页显示
-      let xiaoshuoContainer = document.querySelector('.mip-shell-xiaoshuo-container')
-      if (xiaoshuoContainer) {
-        xiaoshuoContainer.classList.add('show-xiaoshuo-container')
-      }
-    })
-
-    // 初始化页面时执行一次背景色+字号初始化
-    window.MIP.viewer.page.emitCustomEvent(window, true, {
-      name: 'changePageStyle'
-    })
-
     strategy.eventAllPageHandler()
 
     // 绑定小说每个页面的监听事件，如翻页，到了每章最后一页