uniapp仿追书神器的小说阅读器小程序（附源码）_uniapp电子书阅读

作者：菜鸟追梦旅行 | 2024-02-27 12:06:13

踩

uniapp电子书阅读

简介

基于mpvue的小说阅读器小程序，已隐去API，数据脱敏，仅供学习交流使用，如有侵权，请及时联系。

效果展示

在这里插入图片描述

项目结构说明

.
├── dist                     # 打包后的代码，也是实际上传小程序的代码
├── build                    # webpack配置文件
├── config                   # 环境配置文件
├── project.config.json      # 项目配置文件
├── src                      # 程序源文件
│   ├── main.js              # 入口文件
│   ├── components           # 可复用的组件(Presentational Components)
│   ├── styles               # 样式文件
│   ├── store                # Vuex Store文件
│   └── pages                # 页面文件
1
2
3
4
5
6
7
8
9
10
11

特性

搜索小说
分享小说，最低层级可至指定章节
阅读小说章节
追更
更多。。。

部分源码
首页

<template>
  <div class="home-page">
    <div :class="['refresh-bar', {show: refreshing}]">
      <i></i>
      <i></i>
      <i></i>
    </div>
    <BookItem
      v-for="(item, index) in bookList"
      :key="index"
      :title="item.title"
      :content="`${formatTime(item.updated)}：${item.lastChapter}`"
      :cover="getImgSrc(item.cover)"
      :hasUpdated="item._hasUpdated"
      @click="gotoChapterPage(item._id)"
      @longpress="removeBook(item)"
    />
    <div class="home-add" @click="gotoSearchPage">
      <i class="iconfont icon-add"></i>
      <span>添加你喜欢的小说</span>
    </div>
  </div>
</template>
<script>
import BookItem from '@/components/BookItem';
import { getImgSrc, formatTime } from '@/utils';
import store from '@/store';

export default {
  data() {
    return {
      refreshing: false, // 是否在刷新
    };
  },
  components: {
    BookItem,
  },
  computed: {
    // 书架列表
    bookList() {
      return store.state.bookCase;
    }
  },
  methods: {
    formatTime,
    getImgSrc,
    // 跳转搜索历史页
    gotoSearchPage() {
      wx.navigateTo({
        url: '/pages/history/main'
      });
    },
    // 跳转详情页面
    gotoChapterPage(bookId) {
      wx.navigateTo({
        url: `/pages/chapter/main?bookId=${bookId}`
      });
      store.dispatch('confirmUpdate', bookId);
    },
    // 从书架移除
    removeBook(book) {
      wx.showModal({
        title: '提示',
        content: `确认从书架移除 ${book.title} ?`,
        success(res) {
          if (res.confirm) {
            store.dispatch('removeFromBookCase', book._id);
          }
        }
      });
    },
  },
  // 下拉刷新的时候查询有无更新
  async onPullDownRefresh() {
    this.refreshing = true;
    const ids = this.bookList.map(book => book._id) || [];
    await store.dispatch('fetchBookUpdate', ids.join(','));
    this.refreshing = false;
    wx.stopPullDownRefresh();
  },
  onLoad() {
    store.dispatch('getBookCase');
    setTimeout(() => {
      if (this.bookList && this.bookList.length >= 1) {
        wx.startPullDownRefresh();
      }
    }, 500);
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

搜索历史

<template>
  <div class="history-page">
    <!-- 搜索 -->
    <SearchBar readonly @click="gotoSearchPage()"/>
    <!-- 其他内容 -->
    <div class="history-container">
      <div class="history-title">
        <span>大家都在搜</span>
        <span @click="changeHotWords"><i class="iconfont icon-refresh" /> 换一批</span>
      </div>
      <ul class="history-hotwords">
        <li v-for="(item, index) in hotWords" :key="index" @click="gotoSearchPage(item.word)">{{item.word}}</li>
      </ul>
      <div class="history-title">
        <span>搜索历史</span>
        <span @click="clearSearchHistory"><i class="iconfont icon-trash" /> 清 空</span>
      </div>
      <ul class="history-list">
        <li v-for="(item, index) in historyWords" :key="index" @click="gotoSearchPage(item)"><i class="iconfont icon-history"></i> {{item}}</li>
      </ul>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

详情页

<template>
  <div class="detail-page">
    <div class="detail-header">
      <image class="book-cover" mode="aspectFill" :src="bookDetailsConver" />
      <div class="detail-header__inner">
        <h5>{{bookDetails.title}}</h5>
        <p class="p2">
          <em @click="gotoSearchPage(bookDetails.author)">{{bookDetails.author}}</em>
          <span v-if="bookDetails.minorCate">&nbsp;|&nbsp;{{bookDetails.minorCate}}</span>
          <span>&nbsp;|&nbsp;{{wordCount}}字</span>
        </p>
        <p class="p3">{{updatedTime}}</p>
      </div>
      <div class="detail-header__cooperation">
        <button @click="gotoChapterPage(bookDetails._id)">开始阅读</button>
        <button @click="afterMore(bookDetails._id)" v-if="!isAddToBookCase">+追更新</button>
      </div>
    </div>
    <ul class="detail-staes">
      <li>
        <p>追更人数</p>
        <span>{{bookDetails.latelyFollower}}</span>
      </li>
      <li>
        <p>读者存留率</p>
        <span>{{bookDetails.retentionRatio}}%</span>
      </li>
      <li>
        <p>日更新字数</p>
        <span>{{bookDetails.serializeWordCount}}</span>
      </li>
    </ul>
    <div class="detail-introduce" v-if="bookDetails.longIntro">
      <h5>简介</h5>
      <div class="container">
        <rich-text :nodes="longIntroConver"/>
      </div>
    </div>
    <div class="detail-likes" v-if="booksLike.length > 0">
      <h5>猜你喜欢</h5>
      <scroll-view scroll-x style="width: 100%">
        <div class="like-item" @click="gotoDetailsPage(book._id)" v-for="(book, index) in booksLikeConver" :key="index">
          <image lazy-load class="book-cover" mode="aspectFill" :src="book.cover" />
          <p>{{book.title}}</p>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import store from '@/store';
import { getImgSrc, formatTime } from '@/utils';

export default {
  data() {
    return {
      a: 1
    };
  },
  methods: {
    getImgSrc,
    formatTime,
    // 跳转搜索页面
    gotoSearchPage(query = '') {
      wx.navigateTo({
        url: `/pages/search/main?search=${query}`
      });
    },
    // 跳转章节页
    gotoChapterPage(bookId = '') {
      wx.navigateTo({
        url: `/pages/chapter/main?bookId=${bookId}`
      });
    },
    // 跳转详情页,同一个页面不能跳转？
    // 用的同一实例？
    // 数据会变掉？
    gotoDetailsPage(bookId) {
      if (bookId) {
        wx.navigateTo({
          url: `/pages/details/main?bookId=${bookId}`
        });
      }
    },
    // 获取详情及推荐
    getBookDetails(bookId) {
      store.dispatch('fetchBookDetails', bookId);
      store.dispatch('fetchBookLikes', bookId);
    },
    // 追更，加入书柜
    async afterMore(bookId) {
      // 获取书源
      const sources = await store.dispatch('fetchBookSource', bookId);
      // 默认第一个书源，查章节目录
      if (Array.isArray(sources) && sources.length > 0) {
        const currentSource = sources[0];
        const { chapters } = await store.dispatch('fetchChapterList', currentSource._id);
        // 默认第一章节
        if (Array.isArray(chapters) && chapters.length > 0) {
          const currentChapter = chapters[0];
          store.dispatch('addToBookCase', {
            ...this.bookDetails,
            currentSource,
            currentChapter
          });
          wx.showToast({
            title: '已添加至书架',
            icon: 'success',
            duration: 1500
          });
        }
      }
    }
  },
  computed: {
    // 书籍详情
    bookDetails() {
      return store.state.bookDetails;
    },
    // 猜你喜欢
    booksLike() {
      return store.state.booksLike;
    },
    // 字数
    wordCount() {
      const count = this.bookDetails.wordCount;
      if (count > 10000) {
        return `${Math.ceil(count / 10000)}万`;
      }
      return count;
    },
    // 更新时间
    updatedTime() {
      return formatTime(this.bookDetails.updated);
    },
    // 封面转过之后的数据(mpvue不支持在 template 内使用 methods 中的函数，尴尬)
    bookDetailsConver() {
      return getImgSrc(this.bookDetails.cover);
    },
    // 猜你喜欢数据封面转换
    booksLikeConver() {
      return this.booksLike.map(book => ({
        ...book,
        cover: getImgSrc(book.cover)
      }));
    },
    // 简介转换
    longIntroConver() {
      try {
        // 暂时想不到其他法子，先把\n|\r转成<p>标签
        return (this.bookDetails.longIntro || '').replace(/\n|\r/g, '<p>');
      } catch (e) {
        return '';
      }
    },
    // 书架
    bookCase() {
      return store.state.bookCase;
    },
    // 是否被加入到书架了
    isAddToBookCase() {
      return this.bookCase.findIndex(book => book._id === this.bookDetails._id) !== -1;
    }
  },
  onLoad() {
    const { bookId } = this.$root.$mp.query;
    if (bookId) {
      this.getBookDetails(bookId);
    }
    // 如果没有书架数据的话，就去获取
    if (this.bookCase.length === 0) {
      store.dispatch('getBookCase');
    }
  },
  // 分享
  onShareAppMessage() {
    return {
      title: `好友向你推荐了一本好书——${this.bookDetails.title}`,
      path: `/pages/details/main?bookId=${this.bookDetails._id}`,
      imageUrl: this.bookDetailsConver
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

控制中心

<template>
  <div :class="['chapter-page', {nightMode: isNightMode}]">
    <rich-text class="chapter-content" @click="onPageClick" :nodes="chapterDetailsConver" :style="{fontSize: chapterFontSize + 'px'}"/>
    <div class="turnPage" v-show="chapterDetailsConver">
      <div class="button last" @click="gotoTargeChapter(currentPageIndex - 1)" v-if="currentPageIndex > 0">上一章</div>
      <div class="button next" @click="gotoTargeChapter(currentPageIndex + 1)" v-if="currentPageIndex < chaptersSectionCount - 1">下一章</div>
    </div>
    <!-- 底部菜单 -->
    <div :class="['chapter-footbar', { show: showFooterBar }]">
      <ul>
        <li @click="gotoHome" v-if="fromOtherPlace">
          <i class="iconfont icon-home"></i>
          <span>书架</span>
        </li>
        <li @click="toggleNightOrDay">
          <i class="iconfont icon-sun1" v-if="isNightMode"></i>
          <i class="iconfont icon-moon" v-else></i>
          <span>{{isNightMode? "白天" : "夜间"}}</span>
        </li>
        <li @click="toggleSettingPanel">
          <i class="iconfont icon-setting"></i>
          <span>设置</span>
        </li>
        <li @click="toggleCategoryList">
          <i class="iconfont icon-menu"></i>
          <span>目录</span>
        </li>
        <li @click="gotoSourcePage(chapterListDataId)">
          <i class="iconfont icon-change"></i>
          <span>换源</span>
        </li>
      </ul>
      <!-- 设置面板 -->
      <div class="setting-panel" v-show="showFooterBar && showSettingPanel">
        <!-- 亮度调节面板 -->
        <div class="lightness setting-panel-normal">
          <i class="iconfont icon-sun"></i>
          <slider min="0" max="1" :value="lightness" step="0.05" color="#f5f5f5" activeColor="#4393e2" block-size="14" @changing="changeLightNess" @change="changeLightNess"/>
          <div >
            <span style="margin-right: 10px;">常亮</span>
            <switch type="checkbox" :checked="isKeepLight" @change="toggleScreenLight"></switch>
          </div>
        </div>
        <!-- 字体大小调节面板 -->
        <div class="font-size setting-panel-normal">
          <i class="iconfont icon-ziti"></i>
          <slider min="12" max="30" :value="chapterFontSize" step="1" color="#f5f5f5" activeColor="#4393e2" block-size="14" @change="changeFontSize"/>
        </div>
      </div>
    </div>
    <!-- 目录 -->
    <section :class="['chapter-picker', { showDirectory }]" @click="toggleCategoryList">
      <header @click.stop>
        <h3>目录(共{{chaptersSectionCount}}章)</h3>
        <picker :range="chapterSectionArray" @change="chapterSectionArrayChange" :value="currentChapterSectionIndex">
          <span class="picker">{{chapterSectionArray[currentChapterSectionIndex]}} <i class="iconfont icon-dropDown"></i></span>
        </picker>
      </header>
      <ul @click.stop>
        <li
          :key="item.id"
          :class="{active: (currentChapterSectionIndex * CHAPTER_SECTION_COUNT) + index === currentPageIndex}"
          v-for="(item, index) in currentChapterSection"
          @click="gotoTargeChapterFromItem(item, index)"
        >{{item.title}}</li>
      </ul>
      <button>关闭</button>
    </section>
  </div>
</template>

<script>
// /pages/chapter/main?from=share&bookId=${书籍ID}&sourceId=${书源ID}&chapterIndex=${章节号}
import store from '@/store';
import isEqual from 'lodash/isEqual';
import _chunk from 'lodash/chunk';
import _get from 'lodash/get';
import { CHAPTER_FONT_SIZE, SCREEN_IS_LIGHT, CHAPTER_SECTION_COUNT } from '@/utils/constants';
import { keepUsefulAttributeInArray, getImgSrc } from '@/utils';

// 临时变量,书源
let _currentSource = null;
// 临时变量,保存页面onHide之前的数据，与onShow之后做对比，如果一直就不重新获取
let _lastChapter = null;
// 保存章节数据，不放在data中，防止数据过大，造成卡顿
let _chapterListData = {
  chapters: []
};
// 保存章节分段数据
let _chaptersSection = [];

export default {
  data() {
    return {
      CHAPTER_SECTION_COUNT,
      fromOtherPlace: false, // 是否从其他地方跳转过来
      showDirectory: false, // 是否展示目录
      showFooterBar: false, // 是否展示底部菜单
      isNightMode: false, // 是否是夜间模式
      currentPageIndex: 0, // 当前查看第几章
      bookInBookCase: null, // 书籍对应的书架的内容
      lightness: 0, // 亮度
      showSettingPanel: false, // 是否展示设置面板
      chapterFontSize: 14, // 默认字体大小
      isKeepLight: false, // 屏幕是否保持常亮
      currentChapterSectionIndex: 0, // 当前处在章节分段第几段
      chapterListDataId: 0, // 章节ID
      chaptersSectionCount: 0, // 章节数量
      currentChapterSection: [], // 当前查看的章节段落
    };
  },
  computed: {
    // 书架内容
    bookCase() {
      return store.state.bookCase;
    },
    // 书籍详情
    bookDetails() {
      return store.state.bookDetails;
    },
    // 书籍对应的书架的内容
    bookInBookCase() {
      const { bookId } = this.$root.$mp.query;
      return this.bookCase.find(book => book._id === bookId);
    },
    // 书源
    sourceList() {
      return store.state.sourceList;
    },
    // 章节内容
    chapterDetails() {
      return store.state.chapterDetails;
    },
    // 章节内容转换
    chapterDetailsConver() {
      try {
        // 暂时想不到其他法子，先把\n|\r转成<p>标签
        return (this.chapterDetails.cpContent || this.chapterDetails.body).replace(/\n|\r/g, '<p>');
      } catch (e) {
        return '';
      }
    },
    // 章节目录分段范围
    // ['1-100','101-200',....]
    chapterSectionArray() {
      const totalArrayCount = Math.ceil(this.chaptersSectionCount / CHAPTER_SECTION_COUNT);
      return Array.from({ length: totalArrayCount }).map((section, index) => `${(index * CHAPTER_SECTION_COUNT) + 1} - ${Math.min((index + 1) * CHAPTER_SECTION_COUNT, this.chaptersSectionCount)}`);
    },
  },
  watch: {
    showFooterBar(value) {
      if (!value) {
        this.showSettingPanel = false;
      }
    },
    isKeepLight(value) {
      wx.setKeepScreenOn({
        keepScreenOn: value
      });
    },
    // 监听showDirectory变化，需要重新计算currentChapterSectionIndex，并还原
    showDirectory(value) {
      // 只在展示的时候还原
      if (value) {
        this.currentChapterSectionIndex = Math.floor(this.currentPageIndex / CHAPTER_SECTION_COUNT);
      } else {
        // 只在关闭的时候隐藏底部操作栏
        this.showFooterBar = false;
      }
    },
    // 监听当前章节段落序号，改变章节段落
    currentChapterSectionIndex(value) {
      this.currentChapterSection = _chaptersSection[value];
    }
  },
  methods: {
    // 回首页
    gotoHome() {
      wx.redirectTo({
        url: '/pages/index/main'
      });
    },
    // 跳转哪一章
    gotoTargeChapter(index) {
      this.showDirectory = false;
      this.showFooterBar = false;
      this.currentPageIndex = +index;
      // 先清空章节内容
      store.dispatch('resetChapterDetails');
      const chapter = _chapterListData.chapters[index];
      if (chapter) {
        chapter._index = index;
        store.dispatch('fetchChapterDetails', chapter.link).then(() => {
          wx.pageScrollTo({
            scrollTop: 0,
            duration: 300
          });
        });
        // 更改titleBar文案
        wx.setNavigationBarTitle({
          title: chapter.title
        });
        if (this.bookInBookCase) {
          store.dispatch('addToBookCase', {
            ...this.bookInBookCase,
            currentChapter: chapter,
            __order: false // 倒序插入
          });
        }
      }
    },
    gotoTargeChapterFromItem(item, index) {
      // 计算将要跳往哪一章
      // eslint-disable-next-line
      const targetChapterIndex = (this.currentChapterSectionIndex * CHAPTER_SECTION_COUNT) + Number(index);
      this.gotoTargeChapter(targetChapterIndex);
    },
    onPageClick() {
      // 切换底部显示
      this.showFooterBar = !this.showFooterBar;
    },
    // 切换目录
    toggleCategoryList() {
      this.showDirectory = !this.showDirectory;
    },
    // 切换夜间/白天模式
    toggleNightOrDay() {
      this.isNightMode = !this.isNightMode;
    },
    // 切换设置面板
    toggleSettingPanel() {
      this.showSettingPanel = !this.showSettingPanel;
    },
    // 跳转换源页面
    gotoSourcePage(bookId) {
      this.showFooterBar = false;
      // 如果没有加入书架，不允许换源
      if (!this.bookInBookCase) {
        wx.showToast({
          title: '加入书架才能换源哦~',
          icon: 'none',
          duration: 2000
        });
      } else {
        wx.navigateTo({
          url: `/pages/source/main?bookId=${bookId}`
        });
      }
    },
    // 改变亮度
    changeLightNess(e) {
      const { value } = e.target;
      if (typeof value === 'number') {
        this.lightness = value;
        wx.setScreenBrightness({ value });
      }
    },
    // 改变字体大小
    changeFontSize(e) {
      const { value } = e.target;
      if (typeof value === 'number') {
        this.chapterFontSize = value;
        wx.setStorage({
          key: CHAPTER_FONT_SIZE,
          data: value
        });
      }
    },
    // 保持屏幕常亮
    toggleScreenLight(e) {
      const { value } = e.target;
      this.isKeepLight = value;
      wx.setStorage({
        key: SCREEN_IS_LIGHT,
        data: value
      });
    },
    // 章节序列切换区间
    chapterSectionArrayChange(e) {
      this.currentChapterSectionIndex = e.target.value;
    }
  },
  onLoad() {
    // 更改titleBar标题
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#333333',
      animation: {
        duration: 150,
        timingFunc: 'easeIn'
      }
    });
    // 获取屏幕亮度
    wx.getScreenBrightness({
      success: ({ value }) => {
        if (typeof value === 'number') {
          this.lightness = value;
        }
      }
    });
    // 是否常亮
    wx.getStorage({
      key: SCREEN_IS_LIGHT,
      success: ({ data }) => {
        this.isKeepLight = data;
      }
    });
    // 获取之前设置的字体大小
    wx.getStorage({
      key: CHAPTER_FONT_SIZE,
      success: ({ data }) => {
        this.chapterFontSize = data;
      }
    });
    // 获取书架数据
    store.dispatch('getBookCase');
    const { from } = this.$root.$mp.query;
    // 如果是从其他地方跳转过来的，比如，分享页
    if (from) {
      this.fromOtherPlace = true;
    }
  },
  onShow() {
    const {
      bookId,
      sourceId,
      chapterIndex,
      from
    } = this.$root.$mp.query;
    this.bookInBookCase = this.bookCase.find(book => book._id === bookId);
    const bookInBookCase = this.bookInBookCase; // eslint-disable-line
    // 如果重新进来的时候，当前小说是否跟hide之前一致的，一致就不重新获取
    // 什么时候不一致？当更改书源的时候
    if (_lastChapter && isEqual(bookInBookCase, _lastChapter)) {
      return;
    }
    _lastChapter = bookInBookCase;
    if (bookId) {
      store.dispatch('fetchBookSource', bookId)
        .then((result) => {
          // 默认拿第一个书源
          let source = result[0];
          // 如果是从分享页进来的
          if (from === 'share' && sourceId) {
            source = result.find(r => r._id === sourceId) || source;
          } else if (bookInBookCase && bookInBookCase.currentSource) {
            source = bookInBookCase.currentSource;
          }
          // 只在当前页面临时保存书源
          _currentSource = source;
          return store.dispatch('fetchChapterList', source._id);
        }).then((result) => {
          _chapterListData = result;
          // 只保留必要的属性，减少数据量
          _chapterListData.chapters = keepUsefulAttributeInArray(_chapterListData.chapters, ['_index', 'link', 'title', 'id']);
          // 给章节分段
          _chaptersSection = _chunk(_chapterListData.chapters, CHAPTER_SECTION_COUNT);
          this.currentChapterSection = _chaptersSection[this.currentChapterSectionIndex];
          // 章节ID
          this.chapterListDataId = _chapterListData._id;
          // 章节数量
          this.chaptersSectionCount = _chapterListData.chapters.length;

          // 默认第一章
          let chapter = result.chapters[0];
          /* eslint-disable */
          // 如果是从分享页进来的
          if (from === 'share' && chapterIndex) {
            this.currentPageIndex = +chapterIndex;
            chapter = result.chapters[+chapterIndex];
          }
          // 如果已收藏，本地有数据的话
          else if (bookInBookCase && bookInBookCase.currentChapter && bookInBookCase.currentChapter._index) {
            let { _index } = bookInBookCase.currentChapter;
            // 如果之前的章节比现在书源的总章节还要大, 则最大不能超过该书源的总章节
            if (_index > result.chapters.length - 1) {
              _index = result.chapters.length - 1;
            }
            this.currentPageIndex = _index;
            chapter = result.chapters[_index];
          }
          /* eslint-enable */
          // 更改titleBar文案
          wx.setNavigationBarTitle({
            title: chapter.title
          });
          store.dispatch('fetchChapterDetails', chapter.link);
        });
    }
  },
  onHide() {
    this.showDirectory = false;
    this.showFooterBar = false;
  },
  // 分享
  onShareAppMessage() {
    const {
      title,
      _id,
      cover
    } = this.bookInBookCase || this.bookDetails;
    let chapterTitle = _get(this.chapterDetails, 'title');
    // 有的小说获取到的title是字符串的点.，此时拿书架保存的当前章节的title
    if (chapterTitle.length <= 1) {
      chapterTitle = _get(_chapterListData.chapters[this.currentPageIndex], 'title');
    }
    return {
      title: `${title} - ${chapterTitle}——Deny阅读`,
      path: `/pages/chapter/main?from=share&bookId=${_id}&sourceId=${_currentSource._id}&chapterIndex=${this.currentPageIndex}`,
      imageUrl: getImgSrc(cover)
    };
  },
  onUnload() {
    this.showDirectory = false;
    this.showFooterBar = false;
    this.currentPageIndex = 0;
    this.currentChapterSectionIndex = 0;
    _currentSource = null;
    _lastChapter = null;
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422

命令说明

 npm start # 启动
 npm run build # 打包
1
2

源码截图：

在这里插入图片描述

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下谢谢~

源码获取关注公众号「码农园区」，回复【uniapp源码】

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/152797