mip小说阅读器目录接口重构 (#680)

* mip小说阅读器目录接口重构 * remove percey from travis (#685) * feat: 新增 mip-aio 服务组件 (#683) * feat: 新增 mip-aio 服务组件 * add clear action and update docs (#677) * 修复 action 中没有判断 event 的问题 (#678) * 修复 action 中使用原生 event 的问题 * 【免测】mip-ad 组件 ad-fd 类型新增按条件渲染广告功能 (#688) * mip-ad 组件添加 af-fd 广告类型 * 新增自动推送组件 mip-linksubmit (#686) * add mip-autopush * add doc url and change name * change to support submit type * 修改noshell的添加方式,保持医疗小说一致 (#692) * 修改noshell的添加方式,保持医疗小说一致 * 修改注释 * 修复顶上目录未固定的问题 * 修改初次获取目录时的传参 * mip目录首次请求优化
mipengine · Sep 19, 2019 · 13c2689 · 13c2689
1 parent 32ec3b6
commit 13c2689
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 46 deletions.
diff --git a/components/mip-shell-xiaoshuo/common/state.js b/components/mip-shell-xiaoshuo/common/state.js
@@ -2,7 +2,7 @@
  * @file 小说中的各种状态
  * @author JennyL, LiuJing
  */
-import {getJsonld, getRootWindow} from './util'
+import {getJsonld, getRootWindow, deleteUrlParams} from './util'
 
 export default (currentWindow) => {
   const jsonld = getJsonld(currentWindow)
@@ -18,7 +18,7 @@ export default (currentWindow) => {
       *
       * @type {string} 当前页面的原始URL
       */
-    originalUrl: currentWindow.MIP.util.getOriginalUrl(),
+    originalUrl: deleteUrlParams(currentWindow.MIP.util.getOriginalUrl()),
     /**
       * 返回当前页面状态
       *

diff --git a/components/mip-shell-xiaoshuo/common/util.js b/components/mip-shell-xiaoshuo/common/util.js
@@ -164,7 +164,7 @@ export const getCacheUrl = (url) => {
  */
 export const getPrerenderJsonld = () => {
   let url = getCacheUrl(location.href)
-  let pageId = MIP.util.getOriginalUrl(url)
+  let pageId = deleteUrlParams(MIP.util.getOriginalUrl(url))
   pageId = getCacheUrl(pageId)
   let pageInfo = window.MIP.viewer.page.getPageById(pageId)
   return getJsonld(pageInfo.targetWindow)
@@ -185,3 +185,22 @@ export const getParamFromString = (str, param) => {
   }
   return ''
 }
+/**
+ * 去除 originalUrl 上，从卡片带过来的自定义参数，卡片里这两参数务必加在最后
+ *
+ * @param {string} url originalUrl
+ */
+export const deleteUrlParams = (url) => {
+  url = deleteUrlParamsHelper(url, 'mip_book_id_once')
+  url = deleteUrlParamsHelper(url, 'mip_chapter_id_once')
+  return url
+}
+
+export const deleteUrlParamsHelper = (url, str) => {
+  let regex = new RegExp('&' + str + '=([^&]*)')
+  let result = regex.exec(url)
+  if (result) {
+    return url.replace(result[0], '')
+  }
+  return url
+}
diff --git a/components/mip-shell-xiaoshuo/feature/catalog.js b/components/mip-shell-xiaoshuo/feature/catalog.js
@@ -7,12 +7,15 @@
  */
 
 import state from '../common/state'
-import {getCurrentWindow} from '../common/util'
+import {getCurrentWindow, getParamFromString, deleteUrlParams} from '../common/util'
 import {sendWebbLog, sendTCLog} from '../common/log' // 日志
+const currentWindow = getCurrentWindow()
+const {currentPage} = state(currentWindow)
+const CHAPTER_LIST_URL = 'https://novelapi.baidu.com/novelopenapi/mip/chapterlist?' // online
+const CHAPTER_URL = 'https://novelapi.baidu.com/novelopenapi/mip/chapterinfo?' // online
 
-const CATALOG_URL = 'https://sp0.baidu.com/5LMDcjW6BwF3otqbppnN2DJv/novelsearch.pae.baidu.com/novel/api/mipinfo?' // online
-const originUrl = MIP.util.getOriginalUrl()
-// const originUrl = 'http://www.xmkanshu.com/book/mip/read?bkid=685640121&crid=288&fr=bdgfh&mip=1&pg=3'
+let originUrl = MIP.util.getOriginalUrl()
+originUrl = deleteUrlParams(originUrl)
 let util = MIP.util
 let event = util.event
 
@@ -22,7 +25,7 @@ let isReverse = false // false = 正序，从小到大，默认情况；true =
 // 因为目录添加排序之后，当前章节可能在 this.categoryList 里找不到了，但这种情况不需要返回 matchErr 错误，所以需要记录起来。
 let lastPage
 
-// 以下字段isCatFetch=true时才有（根据RD反馈，线上其实不存在在HTML里面配置目录的书了，所以应该都走fetch了）
+// 以下字段 isCatFetch =true时才有（根据RD反馈，线上其实不存在在HTML里面配置目录的书了，所以应该都走fetch了）
 let isSplitPage
 // 记录首尾章节的信息（后端返回的对象）
 let firstChapter
@@ -116,11 +119,11 @@ class Catalog {
     let $contentTop = this.$catalogSidebar.querySelector('.mip-catalog-btn') // 上边元素
     let $catWrapper = this.$catalogSidebar.querySelector('.novel-catalog-content-wrapper')
     let $catalogContent = this.$catalogSidebar.querySelector('.novel-catalog-content')
-    let catalogs = data.data.catalog.chapters
+    let catalogs = data.data.chapters
     if (!isAppend) {
       isFirstChapterLoaded = isLatestChapterLoaded = !isSplitPage
-      firstChapter = data.data.catalog.firstChapter
-      latestChapter = data.data.catalog.latestChapter
+      firstChapter = data.data.firstChapter
+      latestChapter = data.data.latestChapter
       this.categoryList = catalogs.concat([])
     } else if (isUp) {
       this.categoryList = catalogs.concat(this.categoryList)
@@ -136,9 +139,9 @@ class Catalog {
       }
     }
     let renderCatalog = catalogs => catalogs.map(catalog => {
-      return `<div class="catalog-page" data-chapter-id="${catalog.id}">
+      return `<div class="catalog-page" data-chapter-id="${catalog.id}" data-chapter-cid="${catalog.cid}">
         <a class="mip-catalog-btn catalog-page-content"
-        mip-catalog-btn mip-link data-button-name="${catalog.name}" href="${catalog.contentUrl[0]}" replace>
+        mip-catalog-btn mip-link data-button-name="${catalog.name}" href="#" replace>
         ${catalog.name}
         </a>
       </div>`
@@ -255,28 +258,60 @@ class Catalog {
     }
     $scrollWrapper.addEventListener('scroll', catalogScrollListener)
   }
-
+  // 获取当前点击章节的 cid 后端传的那个
+  getChapterId (element) {
+    return MIP.util.dom.closest(element, '.catalog-page').getAttribute('data-chapter-cid')
+  }
+  // 获取章节的链接
+  getChapterUrl (chapterId) {
+    let cid = this.bookid + '|' + chapterId
+    let params = [
+      'app_code=wise_novel',
+      'cid=' + (cid || '')
+    ]
+    return MIP.sandbox.fetchJsonp(CHAPTER_URL + params.join('&'), {
+      jsonpCallback: 'callback'
+    }).then(res => {
+      return res.json()
+    }).then(data => {
+      if (data.errno !== 0) {
+        throw new Error(data)
+      } else {
+        return data
+      }
+    })
+  }
   // type = up / down / middle / asc / desc
   loadCategory (type) {
     isFetchLoading = true
-    let url
+    // 2019-8-7 接口发生变更，传参发生变化
+    let url = originUrl
+    let id, cid
     if (type === 'up') {
-      url = this.categoryList[0].contentUrl[0]
+      id = this.categoryList[0].id
+      cid = this.bookid + '|' + this.categoryList[0].cid
     } else if (type === 'down') {
-      url = this.categoryList[this.categoryList.length - 1].contentUrl[0]
-    } else {
-      // middle / asc / desc
-      url = originUrl
+      id = this.categoryList[this.categoryList.length - 1].id
+      cid = this.bookid + '|' + this.categoryList[this.categoryList.length - 1].cid
+    } else if (type === 'middle') {
+      id = currentPage.chapter
+      const search = location.search
+      // 首次查询，可以根据阿拉丁卡片传递的 bid 和 cid 来加快查询速度
+      const mipBid = getParamFromString(search, 'mip_book_id_once')
+      const mipCid = getParamFromString(search, 'mip_chapter_id_once')
+      if (mipBid && mipCid) {
+        cid = mipBid + '|' + mipCid
+      }
+      // asc / desc 是固定的最新的100章或最后的100章 不用穿 id cid
     }
     let params = [
-      'originUrl=' + encodeURIComponent(url),
-      'type=' + type
+      'originalUrl=' + encodeURIComponent(url),
+      'type=' + type,
+      'app_code=wise_novel',
+      'id=' + (id || ''),
+      'cid=' + (cid || '')
     ]
-    if (isSplitPage) {
-      params.push('forceSplit=true')
-    }
-
-    return MIP.sandbox.fetchJsonp(CATALOG_URL + params.join('&'), {
+    return MIP.sandbox.fetchJsonp(CHAPTER_LIST_URL + params.join('&'), {
       jsonpCallback: 'callback'
     }).then(res => {
       isFetchLoading = false
@@ -285,6 +320,7 @@ class Catalog {
       if (data.errno !== 0) {
         throw new Error(data)
       } else {
+        this.bookid = data.data.bid || ''
         return data
       }
     })
@@ -309,25 +345,25 @@ class Catalog {
     }
     let catalogHtml = `
       <div class="mip-shell-catalog mip-border mip-border-right">
-        <div class="novel-catalog-content-wrapper">
-          <div class="mip-catalog-btn book-catalog-info">
-            <div class="catalog-header-wrapper book-catalog-info-header">
-              <div class="book-catalog-info-title">
-                <p class="book-catalog-title-name catalog-title">${title}</p>
-                <div class="catalog-content-total-wrapper">
-                  <p class="catalog-content-total"><span>${chapterStatus}</span><span class="chapter-number">${chapterNumber}</span></p>
-                </div>
+        <div class="mip-catalog-btn book-catalog-info">
+          <div class="catalog-header-wrapper book-catalog-info-header">
+            <div class="book-catalog-info-title">
+              <p class="book-catalog-title-name catalog-title">${title}</p>
+              <div class="catalog-content-total-wrapper">
+                <p class="catalog-content-total"><span>${chapterStatus}</span><span class="chapter-number">${chapterNumber}</span></p>
               </div>
-              <div class="catalog-content-center-wrapper">
-                <div class="width-50 text-left catalog-content-center-left"><a href="#">目录</a></div>
-                <div class="width-50 text-right catalog-content-center-left">
-                  <a href="#" class="catalog-reserve">
-                    <i class="icon icon-order reverse-infor"><span class="reverse-name"> 倒序 </span></i>
-                  </a>
-                </div>
+            </div>
+            <div class="catalog-content-center-wrapper">
+              <div class="width-50 text-left catalog-content-center-left"><a href="#">目录</a></div>
+              <div class="width-50 text-right catalog-content-center-left">
+                <a href="#" class="catalog-reserve">
+                  <i class="icon icon-order reverse-infor"><span class="reverse-name"> 倒序 </span></i>
+                </a>
               </div>
             </div>
           </div>
+        </div>
+        <div class="novel-catalog-content-wrapper">
           <div class="net-err-info">
             <div class="sm_con">
               <div class="bg"></div>
@@ -345,7 +381,7 @@ class Catalog {
       this.isCatFetch = true
       this.loadCategory('middle')
         .then(data => {
-          isSplitPage = data.data.catalog.isSplitPage
+          isSplitPage = data.data.isSplitPage
           this.renderCatalogCallBack(data)
         }).catch(err => {
           isFetchLoading = false
@@ -407,6 +443,7 @@ class Catalog {
       $catalogSidebar.appendChild($catalog)
     }
     this.clickCatalogToResetReadPageNum()
+    this.clickCatalogToGoToPageUrl()
     this.bindClickCatalogMessageEvent()
     this.bindShellCatalogMessageEvent()
     this.bindPageCatalogMessageEvent()
@@ -438,6 +475,19 @@ class Catalog {
       }
     })
   }
+  /**
+   * 只要是点击目录进入阅读页，readPageNum 重新开始记为 1.
+   *
+   * @private
+   */
+  clickCatalogToGoToPageUrl () {
+    event.delegate(document.documentElement, '.novel-catalog-content .catalog-page-content', 'click', (event) => {
+      let cid = this.getChapterId(event.target)
+      this.getChapterUrl(cid).then(data => {
+        MIP.viewer.open(data.data.url)
+      })
+    })
+  }
   /**
    * 发送 搜索点出/二跳 日志
    * 点击目录章节绑定发送日志函数
@@ -651,7 +701,7 @@ class Catalog {
         util.css(this.$catalogSidebar.querySelector('.net-err-info'), {
           display: 'none'
         })
-        isSplitPage = data.data.catalog.isSplitPage
+        isSplitPage = data.data.isSplitPage
         this.renderCatalogCallBack(data, {
           isReload: true
         })

diff --git a/components/mip-shell-xiaoshuo/mip-shell-xiaoshuo.less b/components/mip-shell-xiaoshuo/mip-shell-xiaoshuo.less
@@ -169,9 +169,9 @@ mip-fixed.mip-shell-catalog-wrapper {
 
   .novel-catalog-content-wrapper {
     position: absolute;
-    top: 0;
+    top: 4.6em;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 4.6em);
     box-sizing: content-box;
     overflow-y: scroll;
     overflow-x: hidden;