OneWord 是个人的练习之作，页面结构尽可能仿照ios端app 一言
Note: 开发期间该APP改版过几次，部分细节有变化
前端采用vue+vuex+vue-router，使用了部分PWA特性
后端采用koa2，数据库使用postgress,redis用于保存session
服务器部署在阿里云，采用nginx进行端口转发，又拍云做CDN加速，使用HTTPS协议
已失效
ios端如果在safari浏览器下访问，点击浏览器下方分享按钮，添加到主屏幕 Android端 也可以添加到桌面，具体方式请自行尝试
网站目前没有做PC端适配，建议在调试模式下测试效果
Note: 请尽可能使用移动端添加到桌面方式访问，可得到媲美原生APP的体验
| 所在路由或组件 | 触发条件 | 效果 |
|---|---|---|
| /login | 登录注册 | |
| /home | 点击右上角 | 进入/crosstie |
| 所有卡片 | 点击卡片顶部或中部 | 进行过度动画跳转到card-container |
| 所有卡片 | 点击卡片底部 | 点击评论图标跳转到/comment，点击喜欢图标喜欢，再次点击不喜欢（点击喜欢不喜欢之后跳转到/comment相应参数也会改变） |
| 音乐卡片 | 点击播放按钮 | 点击播放音乐，右下角显示转盘，点击转盘，跳转到音乐相关信息；点击暂停音乐，右下角转盘消失，音乐暂停；进入cardcontainer中对应的音乐卡片，可拖动进度条跳转音乐，暂停音乐；点击其他音乐，切换到其他音乐 |
| card-container | 左右滑动切换卡片，点击返回，回到上一个页面，并跳转到之前切换到的卡片， | |
| 查看新添加的卡片 | 左滑或者下拉刷新 | |
| /home /crosstime | 在卡片区域滑动 | 快速滑动 ，滑动越快，要滑动到的卡片位置越靠前或者越靠后，如果要滑动到的卡片位置超过了卡片最大位置索引，滑动到loading动画位置，更新数据；拖动，放手的时候如果拖动的距离大于1/4VW，滑动到上一张或者下一张，否则返回之前的一张卡片 |
| /choose-crosstime | 点击左侧月份，用户点击任意一天会跳转到相对应日期的所有卡片（目前数据太少未实现跳转对应日期的所有卡片，默认显示所有卡片）并且点击后localStorage会存储用户此次点击记录，点击的那个日期项会永久变成灰色，除非用户删除localStorage | |
| scroll-x scrol-y-cards | 滚动初始点向右滑动或者往下滑动 | 每次滑动从初始点滑动时动画项的初始位置都会打乱 ；快速滑动或者滑动到阈值会触发刷新；请求时间小于600ms，会延迟到600ms动画才会回弹，没有数据了会显示END |
| /commen | 点击底部输入框 | 发送评论，评论会发送成功会马上更新到评论界面，并且返回卡片界面，评论数也会更新，不会再次请求数据 |
| /commen | 点击别人评论 | 弹出drawer，可复制，回复别人评论，点击右侧图标可点赞别人评论 |
| /commen | 点击自己的评论 | 弹出drawer，可复制，删除评论，点击右侧图标会提示不能点赞自己的评论 |
| /explore/all | 左右滑动 | 顶部下方动画会跟随滑动滑动 |
| /mine | 点击头像 | 底部背景模糊，编辑用户资料，点击头像图片，选择图片，选择图片裁切区域，裁切图片，点击完成，上传修改 |
| /mine | 点击退出登录 | 退出登录，清除cookie，重置vuex为初始值 |
| /mine | 点击新建文集 | 弹出新建文集页面，点击文集封面图，选择图片，选择图片裁切区域，裁切图片，点击完成，上传保存 |
| /new-word | 发布图文 | 正文为必填项，私密下方文字会根据是否勾选私密切换内容，选择分类为文字归类，点击添加图标，选择文字图片； |
| /new-word | 选择存入文集 | 选择存入文集，也可以新建文集 |
| /new-word | 选择样式 | 点击第一排图标，切换横向排列文字或者竖向排列，竖向排列时，无法点击最后一排的第三个切换对齐方式图标，此时只有默认对齐方式；点击最后一排图标，第一个图标，切换图片圆形或者矩形铺满，点击切换后，会有过渡动画，点击第二个图标，切换字体，一共有五种字体可供选择，点击第三个图标，切换文字对齐方式，左对齐或者居中 |
应用内截图，通过设计软件测量各区域的长宽颜色等各种值
应用内录屏，逐帧查看测量各区域的长宽颜色等各种值
mock数据 通过用fiddler4抓包
pwa在项目中是为了让应用全屏化 ，通过workbox将字体文件设置为采用缓存优先策略
通过 https://www.likefont.com/ 找到相似字体
通过 https://transfonter.org/formats 将字体转换为Base64格式
网站加载后 将其挂载在head标签
base64格式字体文件在ios端中英文中线无法居中，遂直接采用ttf格式字体文件，使用FontFace APi异步加载字体文件
www.iconfont.cn 使用iconfont图标
宽高采用vw，使用stylus-px-to-relative-unit包，配置后可直接设置为测量值，stylus-px-to-relative-unit会将其自动转换为vw值，布局大部分采用flex布局，少部分采用grid布局
better-scroll animatejs axios等
所有ui组件均自行设计，只要是需要用到两次及以上的部分都会拆分为组件，下面分析重要组件
card组件是应用的核心，分为两大类，根据卡片类型将其归类为card-music和card-text ， 对应音乐卡片和文字卡片，两种卡片有很多相似点，将其中相似区域拆分为card-base组件，通过props传入不同的值展示不同的内容
音乐卡片有两种，根据卡片类型将其归类为card-fixed-music、card-detail-music对应固定音乐卡片、细节音乐卡片，音乐卡片，除了使用部分card-base基础组件还使用了music-player、music-player-control、music-process-bar三个其特有的组件
music-player组件会监听vuex中musicSrc、currentTime、playing ，对应音乐路径，当前播放时间，音乐播放状态，当musicSrc改变 切歌；当currentTime改变，说明用户在拖动进度条跳转到拖动的音乐进度；当playing状态改变，播放或者暂停歌曲
music-player-control组件，监听vuex中的musicSrc，如果musicSrc和当前控制器记录的musicSrc一致，切换播放暂停状态，点击该组件，会commit 播放暂停状态到vuex
music-process-bar 组件，监听vuex中的musicSrc，如果musciSrc和当前进度条记录的musicSrc一致，进度条会监听vuex中的currentTime，如果之前的musicSrc和当前进度条记录的musicSrc一致，说明现在切掉了这首歌，取消之前的监听事件，初始化一些状态
文字卡片有三种，根据卡片类型将其归类为card-flex-text、card-fixed-text、card-detail-text 对应自适应卡片、固定文字卡片、细节文字卡片，除了使用部分card-base基础组件还使用了card-base-content-horizontal、card-base-content-vertical两个其特有的组件，用于文字水平布局和垂直布局
该组件用于点击卡片后执行一个过渡动画，切换到card-detail，左右滑动可以切换目前加载到的所有卡片
由于使用了betterscroll ，该库通过transfrom模拟原生APP内部的滚动滑动效果，但是transform 会形成一个新的上下文环境，脱离了文档流，动画需要逐渐隐藏所有其他元素，将card元素前置并移动到中部，然后再显示card-detail，需要设置z-index,由于zindex的层级是只针对当前文档流的，也就是设置index，不会影响transform之外的文档流，那么肯定不能在transform的文档流中运行动画，这里一般思路是将其放置在根组件同级位置，每次点击通过vuex传递要移动的卡片信息，生成新的卡片来执行动画，这里我采用获取transform坐标然后移除tranform，使用获取到的坐标通过position定位，动画执行完毕再将其设置成以前的transform坐标
穿越组件用于穿越页面，拆分为两部分，左侧为crosstime-month，右侧为crosstime-date，crosstime-month中的月份项点击后会携带月份信息触发monthChange事件，crosstime-date可以通过props接收到月份信息，根据信息改变crosstime-date组件的日期信息，展示这个月的每一天，用户点击任意一天会跳转到相对应日期的所有卡片（目前数据太少未实现跳转对应日期的所有卡片，默认显示所有卡片）并且点击后localStorage会存储用户此次点击记录，点击的那个日期项会永久变成灰色，除非用户删除localStorage
该组件基于vue-cropper组件
scrollbase组件基于better-scroll,绝大多数页面都使用了该组件
scroll-x和scroll-y-cards将card和其他元素高度封装到了一起，因为多个页面会用到，使用是只需要传入相关参数如下，通用性和实用性非常高
<scroll-y-cards
ref="scroll"
:pullUp="true"
@pullUp="handlePullUp"
:pullDown="true"
@pullDown="handlePullDown"
/>scroll-y 较之 scroll-y-cards 只是没有嵌入card相关组件，更具用通用性。
scroll-x、scroll-y均有loading动画，滚动到一定值会触发刷新事件，根据观察原APP，每次下拉或者右滑动组件loading动画项的起始位置都不一样，但结束位置都是一样的,这里用一个数组来记录每个动画项需要移动到的位置参数
// 用来记录每一条动画中的li的长度，需要偏转的角度，位置，x轴偏移量，y轴偏移量
list: [
[LONG_LINE_HEIGHT, 90, 0, -22, 0],
[LONG_LINE_HEIGHT, 50, 1, -10, 0],
[LONG_LINE_HEIGHT, 90, 2, 2, 0],
[LONG_LINE_HEIGHT, 65, 3, 5, 0],
[SHORT_LINE_HEIGHT, 0, 4, 20, 0],
[LONG_LINE_HEIGHT, 115, 5, 35, 0],
[SHORT_LINE_HEIGHT, 135, 6, 40, -5],
[SHORT_LINE_HEIGHT, 90, 7, 55, 4],
[SHORT_LINE_HEIGHT, 45, 8, 70, -5],
[LONG_LINE_HEIGHT, 90, 9, 30, 0],
[SHORT_LINE_HEIGHT, 145, 10, 25, -5],
[SHORT_LINE_HEIGHT, 90, 11, 40, 4],
[SHORT_LINE_HEIGHT, 45, 12, 55, -5]
]监听滚动事件，每次滚动的值大于0，就去打乱list，更新dom之后，拿到dom并缓存起来，如果已经缓存起来了就不打乱更新dom了，滚动结束就清空缓存的dom。滚动过程中根据滚动的值实时变换动画
scroll-y中loading动画在请求到数据后再结束，如果单单实现这个一个效果是很简单的，直接使用bs 的pulldown库，基本满足需求，但必须要达到阈值才能触发，原APP当执行快速下拉时也会触发，查看pulldown源码下拉相关代码
if (!this.pulling) {
this.pulling = true
this.scroll.trigger('pullingDown')
this.originalMinScrollY = this.scroll.minScrollY
this.scroll.minScrollY = stop
}使用了minScrollY 设置了下拉的停顿坐标，并触发了下拉事件，参考其定义了一个手动触发函数，快速下拉时执行该函数
scroll-x中滚动开始前保存开始时间和当前滚动的位置，滚动结束时计算这次滚动用时和滚动距离，用时小于200ms滚动距离大于20，就会触发快速滑动卡片，卡片会根据滚动距离的多少滚动n张，其他情况也就是慢速滚动的时候卡片跟随手指移动，手指松开时，获取当前卡片距离左右两侧的距离，根据距离判断该滑动到左侧或者右侧
通过闭包封装axios,封装成基础的两个post、get方法，用于post、get请求，如果请求过程中出错会弹出toast报错
拦截axios请求，如果此时是需要显示loading的请求显示请求动画，响应后关闭请求动画
使用了modules，将数据分为3类，card、common、music，分别对应卡片信息，公用信息、音乐信息。
定义了mutation-types.js 文件来存储mutation名称常量
其中card中有10种卡片数据，对应10个页面，为评论页面创建了增加评论数mutation，获取卡片信息的getter，为每个card页面创建了设置卡片信息的mutation
RESET_CARD_STATE mutation 用于用户退出登陆之后重置mutation为初始值
路由元信息上绑定index 用来判定是进入还是退出，执行相对应的动画
根据路由路径动态设置keep-alive组件的exclude props
路由模式 history 路由守卫 登录鉴权
实现toast
由于有多种卡片且卡片都相似方法，将其抽离出来作为mixin
css中设置 -webkit-tap-highlight-color: transparent 移除IOS端点击后高亮效果 css中设置 touch-action: manipulation;解决点击300ms问题
env.js
passport+koa-redis+koa-session
catchError.js 用于捕获异常 changeStaticPath.js 用于修改请求的静态目录路径 decode.js 用于解码请求 isLogin.js 用于判断用户是否登录，绝大多数API需要登录才能访问 normalBody.js 用于在ctx上添加相应方法
使用sequelize 操作 postgress数据库
/onewordback/dbs/models 目录中book.js card.js comment.js user.js 中分别定义了书籍表、卡片表、评论表、用户表并在associtate.js中设置了关联
nginx 转发80端口到443 /yiyan/ 路径的请求代理到pm2管理的本地3000端口服务上 /js/png/mp3 缓存过期时间为30天
nginx 部分配置文件如下
location / {
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
if ($request_filename ~* .*\.(?:js|css|png)$)
{
expires 30d;
}
root /root/oneword/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /yiyan/ {
if ($request_filename ~* .*\.(?:jpg|mp3)$)
{
expires 30d;
}
if ($request_filename ~* .*\.(?:ttf)$)
{
expires 365d;
}
proxy_pass http://localhost:3000;
}又拍云使用默认设置