商业级web阅读器项目（上）_this.rendition.on('touchstart')-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84619467/article/details/139942093

3.2.阅读器解析和渲染

把epub文件夹（放有所有epub电子书的文件夹）放到resource当中

由于访问资源每一本书的url是 http://localhost:8080/#/ebook/education/202yalishanda

这种方式，可见要用动态路由的方式来访问资源

什么是动态路由？听我说来

在这里插入图片描述

这种就是动态路由

，然后我们在浏览器上输入

http://localhost:8080/#/ebook/asasd

在EBook Reader中

接收到了参数

在这里插入图片描述

这就是动态路由

到了这这里想要获取nginx上的电子书时出现了跨域问题，暂时解决不了，先用本地资源

3.3.翻页功能的实现

当屏幕向左划时，向上翻页，反之翻下一页。

//监听滑动翻页事件

this.rendition.on(“touchstart”,event=>{

this.touchStartX = event.changedTouches[0].clientX;

this.touchStartTime = event.timeStamp;

});

this.rendition.on(“touchend”,event=>{

const offsetX = event.changedTouches[0].clientX-this.touchStartX;

const time = event.timeStamp - this.touchStartTime;

if(time<500 && offsetX>40){

this.prevPage();

}else if (time<500 && offsetX<-40) {

this.nextPage();

}else{

this.toggleTitleAndMenu()

}

})

prevPage(){

if (this.rendition){

this.rendition.prev();

// this.$store.dispatch(“setMenuVisible”,false)

this.setMenuVisible(false);

}

nextPage(){

if (this.rendition){

this.rendition.next();

// this.$store.dispatch(“setMenuVisible”,false)

this.setMenuVisible(false);

}

在这里，值得注意的一点，需要修改epubjs的版本，修改为 “epubjs”: “0.3.71”,因为0.38以上的都不支持滑动

3.4.标题栏和菜单栏实现

先创建标题栏和菜单栏组件

//EbookTitle

//EbookMenu

<span class=“icon-a icon” @click=“showSetting(0)”>A

用 menuvisible来控制标题栏和菜单栏是否显示

。

到这里，容易发现

methods:{

…mapActions([‘setMenuVisible’,‘setFileName’]),

}

这里再很多组件中都是共有的，这样，可以把这些共有的放在一起，在通过vue的一个勾子mixins 调用出来

在这里插入图片描述

3.5.字号UI的设置

在这里插入图片描述

当点击菜单栏中的A 的时候，出现字号设置UI，

3.6.字号设置功能实现

通过更改 defautFontSize来更改字体大小

defautFontSize 选

export const FONT_SIZE_LIST =[

{fontSize:12},

{fontSize:14},

{fontSize:16},

{fontSize:18},

{fontSize:20},

{fontSize:22},

{fontSize:24},

];

之中的一个值

设置电子书的字号如下实现

setFontSize(fontSize){

this.setDefaultFontSize(fontSize);

this.currentBook.rendition.themes.fontSize(fontSize);

}

3.7.字体设置功能实现

在这里插入图片描述

在字号设置界面当中，我们把这整个wrapper的布局设置为flex，上面flex：2，下面flex：1

在这里插入图片描述

结构如此，简单明了

3.8.字体设置弹窗UI实现

在这里插入图片描述

分为两部分，这部分较大的难题，就是使选中部分高亮+√

选择字体

看代码，很巧妙，用一行就解决了这个问题

如何判断选中呢？其实就是靠defaultFontFamily这个值来判断，看这个方法的实现！粗俗易懂

isSelected(item){

return this.defaultFontFamily===item.font;

}

3.9.字体设置弹窗功能实现

通过上面一节，容易发现，只要改变defaultFontFamily就能改变选中高亮的选项

因此，可以绑定一个方法

setFontFamily(font){

this.setDefaultFontFamily(font);

}

接着也要记得改变电子书的字体，语句和改变电子书字号类似

setFontFamily(font){

this.setDefaultFontFamily(font);

this.currentBook.rendition.themes.font(font);

}

但发现这样并不能实现，这是虽然，我们把样式文件虽然放到项目当中了，但是并不能直接加载到电子书，因此，我们需要在电子书初次被渲染的时候就要把样式加载给电子书，这样在后面才有了选择的权力

在电子书.display()之后

//加载字体样式到电子书

this.rendition.hooks.content.register(contents=>{

contents.addStylesheet(“./…/…/assets/fonts/daysOne.css”)

})

但这并不难成功达到目的，因为

在这里插入图片描述

这里传入的必须是个url，而不是一个路径，所以把font样式资源放到搭建好的nginx服务器上

改成这样：

//加载字体样式到电子书

this.rendition.hooks.content.register(contents=>{

contents.addStylesheet(“http://localhost:8081/fonts/daysOne.css”)

})

在这里插入图片描述

发现功能已经实现

接着把所有资源都加载

在这里插入图片描述

3.10.字号和字体设置离线存储

为了方便，引入依赖 web-storage-cache

这个插件的用处是可以把传进来的json转化为对象存到本地，读取时将对象转化为json

为了方便管理本地存储把关于ebook相关的都放进book的对象当中，这样以后扩展其他功能是，例如添加音乐时，可以把音乐相关的都放进music对象

在这里插入图片描述

创建这个来管理本地存储

import Storage from “web-storage-cache”;

const localStorage = new Storage();

export function setLocalStorage(key,value) {

return localStorage.set(key,value);

}

export function getLocalStorage(key) {

return localStorage.get(key);

}

export function removeLocalStorage(key) {

return localStorage.delete(key);

}

export function clearLocalStorage() {

return localStorage.clear();

}

export function setBookObject(fileName,key,value) {

console.log(fileName);

let book = getLocalStorage(${fileName}-info);

if(!book){

book = {}

}

book[key] = value;

setLocalStorage(${fileName}-info,book)

}

export function getBookObject(fileName,key) {

let book = getLocalStorage(${fileName}-info)

if(book){

return book[key]

}else {

return null

}

export function getFontFamily(fileName) {

return getBookObject(fileName,‘fontFamily’)

}

export function saveFontFamily(fileName,font) {

return setBookObject(fileName,‘fontFamily’,font);

}

调用其中的方法就可以了，是不是超鸡方便

‘

不信可以看看使用，

我们在已渲染完电子书后中就获取本地 fontFamily，如果不存在，则，默认添加为defaut

this.rendition.display().then(()=>{

let font = getFontFamily(this.fileName);

if(!font){

saveFontFamily(this.fileName,this.defaultFontFamily)

}else{

this.rendition.themes.font(font);

this.setDefaultFontFamily(getFontFamily(this.fileName));

}

});

每次更改完后也要存储到本地

在这里插入图片描述

字号本地化过程类似，在此，就不再遨述

3.11. 字体设置标题国际化

为了跟上时代，必须使用国际化，这国际化以后搬到别处应用也是可以装一把。

创建这几个文件

在这里插入图片描述

中文包

const messages = {

home: {

title: ‘书城’,

hint: ‘计算机科学和软件工程’,

guessYouLike: ‘猜你喜欢’,

change: ‘换一批’,

clear: ‘清空’,

hotSearch: ‘热门搜索’,

historySearch: ‘搜索历史’,

sameAuthor: ‘与$1同作者’,

sameReader: ‘对$1感兴趣的人也在读’,

readPercent: ‘阅读$2的人，$1都在读’,

recommend: ‘热门推荐’,

seeAll: ‘查看全部’,

readers: ‘$1人同时在读’,

featured: ‘精选’,

category: ‘分类’,

books: ‘本书’,

readNow: ‘立即阅读’,

allBook: ‘共 $1 本图书’

category: {

computerScience: ‘计算机科学’,

socialSciences: ‘社会科学’,

economics: ‘经济学’,

education: ‘教育学’,

engineering: ‘工程学’,

environment: ‘环境学’,

geography: ‘地理学’,

history: ‘历史学’,

laws: ‘法学’,

lifeSciences: ‘生命科学’,

literature: ‘文学’,

biomedicine: ‘生物医学’,

businessandManagement: ‘工商管理’,

earthSciences: ‘地球科学’,

materialsScience: ‘材料科学’,

mathematics: ‘数学’,

medicineAndPublicHealth: ‘公共卫生’,

philosophy: ‘哲学’,

physics: ‘物理’,

politicalScienceAndInternationalRelations: ‘国际关系’,

psychology: ‘心理学’,

statistics: ‘统计学’

shelf: {

title: ‘书架’,

edit: ‘编辑’,

cancel: ‘取消’,

search: ‘搜索’,

private: ‘私密阅读’,

noPrivate: ‘关闭私密阅读’,

download: ‘开启离线’,

move: ‘移动到…’,

remove: ‘移出书架’,

setPrivateTitle: ‘开启后，所选书籍的阅读记录将不会对外公开’,

open: ‘开启’,

closePrivateTitle: ‘是否关闭所选书籍的私密阅读？’,

close: ‘关闭’,

setPrivateSuccess: ‘已开启私密阅读
阅读记录将不再公开’,

closePrivateSuccess: ‘已关闭私密阅读’,

setDownloadTitle: ‘开启后，将自动缓存所选书籍内容’,

setDownloadSuccess: ‘已开启，将自动离线已购内容’,

setDownloadError: ‘离线下载异常，请重新尝试’,

removeDownloadTitle: ‘确认后，将删除所选书籍的离线内容’,

removeDownloadSuccess: ‘已选书籍的离线内容已删除’,

delete: ‘删除’,

clearCache: ‘清除缓存’,

clearCacheSuccess: ‘缓存已清空’,

removeBookTitle: ‘是否将$1移出书架？’,

removeBook: ‘移出’,

selectedBooks: ‘所选书籍’,

default: ‘默认’,

progress: ‘按进度’,

purchase: ‘按购买’,

bought: ‘已购买’,

notPurchased: ‘未购买’,

selectBook: ‘选择书籍’,

haveSelectedBook: ‘已选择$1本’,

haveSelectedBooks: ‘已选择$1本’,

moveBook: ‘移动书籍’,

newGroup: ‘新建分组’,

groupOut: ‘移出分组’,

editGroup: ‘修改分组’,

editGroupName: ‘修改分组名’,

deleteGroup: ‘删除分组’,

deleteGroupTitle: ‘删除分组后，分组内的书籍将会自动移出分组’,

groupNone: ‘当前分组暂无书籍’,

groupName: ‘分组名’,

confirm: ‘确定’,

moveBookInSuccess: ‘成功移入$1’,

moveBookOutSuccess: ‘成功移出分组’,

statistic: ‘$1本公开阅读 • $2本私密阅读’,

startDownload: ‘开始下载…’,

progressDownload: ‘正在下载：$1’,

downloadFirst: ‘请先缓存图书’,

welcome: ‘欢迎访问慕课网
学习《实战微信读书——媲美原生APP的企业级Web书城》
-------- 作者：Sam --------’,

find: ‘去找书’,

changeLanguage: ‘切换语言’,

studyNow: ‘去慕课网学习’

detail: {

navigation: ‘目录’,

publisher: ‘出版社’,

category: ‘分类’,

ISBN: ‘ISBN’,

trial: ‘试读’,

lang: ‘语言’,

loading: ‘加载中…’,

read: ‘阅读’,

listen: ‘听书’,

addOrRemoveShelf: ‘加入书架’,

isAddedToShelf: ‘已加入书架’

speak: {

voice: ‘语音朗读’,

read: ‘查看原文’,

settings: ‘设置’,

timing: ‘定时’,

current: ‘当前章节’,

requestFailed: ‘请求失败!’,

apply: ‘语义解析核心技术由科大讯飞提供’

book: {

pulldownAddMark: ‘下拉添加书签’,

releaseAddMark: ‘松手添加书签’,

pulldownDeleteMark: ‘下拉删除书签’,

releaseDeleteMark: ‘松手删除书签’,

selectFont: ‘选择字体’,

haveRead: ‘已读$1分钟’,

themeDefault: ‘默认’,

themeGold: ‘雅致’,

themeEye: ‘护眼’,

themeNight: ‘夜间’,

loading: ‘加载中…’,

navigation: ‘目录’,

bookmark: ‘书签’,

searchHint: ‘搜索全书内容’,

haveRead2: ‘已读’,

minutes: ‘分钟’,

cancel: ‘取消’

}

export default messages

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

js基础.PNG