微信读书项目（4）

最新推荐文章于 2024-04-23 10:06:31 发布

whi_sper-

最新推荐文章于 2024-04-23 10:06:31 发布

阅读量1k

点赞数

分类专栏：前端项目文章标签：前端项目

本文链接：https://blog.csdn.net/weixin_41688305/article/details/97692051

版权

本文详细介绍了微信读书项目的前端开发过程，包括字体设置弹窗、字号和字体的离线存储、标题国际化、阅读器主题设置和全局主题切换等功能的实现。通过Vue-i18n实现国际化，使用Local Storage进行数据存储，结合rendition处理字体和字号，同时解决了主题切换的动态加载和清除冗余CSS问题。此外，还涵盖了阅读进度、目录和全文搜索功能的开发，涉及进度面板和分页逻辑的实现。

摘要由CSDN通过智能技术生成

3.8 字体设置弹窗功能实现

实现点击屏幕，字体设置面板消失：

toggleTitleAndMenu () {
   
  if (this.menuVisible) {
   
    //  隐藏字号设置面板
    this.setSettingVisible(-1)
    this.setFontFamilyVisible(false) // 实现点击屏幕，字体设置面板消失
  }
  // 显示标题和菜单栏
  this.setMenuVisible(!this.menuVisible)
},
hideTitleAndMenu () {
   
  this.setMenuVisible(false)
  this.setSettingVisible(-1)
  this.setFontFamilyVisible(false)// 实现点击屏幕，字体设置面板消失
},

实现字体被选中

给item绑定点击事件

<div class="ebook-popup-item" v-for="(item, index) in fontFamilyList" :key="index"
     @click="setFontFamily(item.font)">

定义setFontFamily函数

setFontFamily (font) {
   
    this.setDefaultFontFamily(font)
}

接下来实现，字体的切换的生效

与字号类似，在currentBook下面调用rendition

setFontFamily (font) {
   
    this.setDefaultFontFamily(font)
    this.currentBook.rendition.themes.font(font)
}

但这里没有生效，因为scss文件没有引入iframe

回到EbookReader.vue中，在initEpub函数中，使用rendition的钩子函数

this.rendition.hooks.content.register(contents => {
   
contents.addStylesheet(`...`)
})

根据contents.js源码，省略号这里必须传入一个url，那么我们利用nginx来实现。
我们把fonts文件放入resource文件夹，生成Http链接可以引用到钩子函数中

这是default字体未生效，通过改动setFontFamily方法来解决

setFontFamily (font) {
   
  this.setDefaultFontFamily(font)
  if (font === 'Default') {
   
      // 设置自己喜欢的字体
    this.currentBook.rendition.themes.font('Times New Roman')
  } else {
   
    this.currentBook.rendition.themes.font(font)
  }
}

到这里，基本功能实现，我们做一些改动。

在Vue-CLI3.0中环境变量和模式设置，为以后上线做准备

在根目录下创建一个文件.env.development，把我们本地的url抽象成一个变量下入该文件。
注意一点，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

所以我们的变量如下：

VUE_APP_RES_URL=http://192.168.0.102:8081

下面我们就可以使用了

this.rendition.hooks.content.register(contents => {
   
  Promise.all(
    [
  contents.addStylesheet(`${
     process.env.VUE_APP_RES_URL}/fonts/daysOne.css`),   contents.addStylesheet(`${
     process.env.VUE_APP_RES_URL}/fonts/cabin.css`),
 contents.addStylesheet(`${
     process.env.VUE_APP_RES_URL}/fonts/montserrat.css`,   contents.addStylesheet(`${
     process.env.VUE_APP_RES_URL}/fonts/tangerine.css`)
    ]
  )
})

！环境变量和配置变量的重新载入都需要重新启动服务器才能生效。

3.9实现字号和字体的离线存储

我们这里利用Local Storage进行离线缓存，首先，安装库npm i --save web-storage-cache
在utils下面引入这个库

创建一个localStorage.js文件，将安装的库引入。这个库可以将我们传入的字符串或对象转换成json存储，读取时又能转换成字符串或对象使用。随后创建一个实例化对象，写入基本方法。

import Storage from 'web-storage-cache'
const localStorage = new Storage()
export function getLocalStorage (key) {
   
  return localStorage.get(key)
}
export function setLocalStorage (key, value) {
   
  return localStorage.set(key, value)
}
export function removeLocalStorage (key) {
   
  return localStorage.delete(key)
}
export function clearLocalStorage () {
   
  return localStorage.clear()
}
export function getHome () {
   
  return getLocalStorage('home')
}
export function saveHome (home) {
   
  return setLocalStorage('home', home, 1800)
}
export function getLocale () {
   
  return getLocalStorage('locale')
}
export function saveLocale (locale) {
   
  return setLocalStorage('locale', locale)
}
export function getLocation (fileName) {
   
  return getBookObject(fileName, 'location')
}
export function saveLocation (fileName, location) {
   
  setBookObject(fileName, 'location', location)
}
export function getBookmark (fileName) {
   
  return getBookObject(fileName, 'bookmark')
}
export function saveBookmark (fileName, bookmark) {
   
  setBookObject(fileName, 'bookmark', bookmark)
}
export function getReadTime (fileName) {
   
  return getBookObject(fileName, 'time')
}
export function saveReadTime (fileName, theme) {
   
  setBookObject(fileName, 'time', theme)
}
export function getProgress (fileName) {
   
  return getBookObject(fileName, 'progress')
}
export function saveProgress (fileName, progress) {
   
  setBookObject(fileName, 'progress', progress)
}
export function getNavigation (fileName) {
   
  return getBookObject(fileName, 'navigation')
}
export function saveNavigation (fileName, navigation) {
   
  setBookObject(fileName, 'navigation', navigation)
}
export function getMetadata (fileName) {
   
  return getBookObject(fileName, 'metadata')
}
export function saveMetadata (fileName, metadata) {
   
  setBookObject(fileName, 'metadata', metadata)
}
export function getCover (fileName) {
   
  return getBookObject(fileName, 'cover')
}
export function saveCover (fileName, cover) {
   
  setBookObject(fileName, 'cover', cover)
}
export function getFontFamily (fileName) {
   
  return getBookObject(fileName, 'fontFamily')
}
export function saveFontFamily (fileName, fontFamily) {
   
  setBookObject(fileName, 'fontFamily', fontFamily)
}
export function getTheme (fileName) {
   
  return getBookObject(fileName, 'theme')
}
export function saveTheme (fileName, theme) {