forked from lengyibai/wzry
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
193 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,196 @@ | ||
| # 王者荣耀图鉴 | ||
| ## 🚀一、主要技术栈 | ||
|
|
||
| ## 前往稀土掘金开发者社区查看文章介绍 | ||
| - [Vue3.4](https://cn.vuejs.org/) | ||
| - [Typescript](https://www.tslang.cn/index.html) | ||
| - [Vite4](https://vitejs.cn/) | ||
| - [Pinia](https://pinia.vuejs.org/) | ||
| - [Vue-Router](https://router.vuejs.org/zh) | ||
| - [Less](https://less.bootcss.com/) | ||
|
|
||
| > 文章地址：https://juejin.cn/post/7373937820177940518 | ||
| ## ✈️二、主要插件 | ||
|
|
||
| - [axios](https://github.com/axios/axios) 网络请求库 | ||
| - [mitt](https://github.com/developit/mitt) 事件总线 | ||
| - [dayjs](https://github.com/iamkun/dayjs) 时间处理工具 | ||
| - [vue-i18n](https://github.com/intlify/vue-i18n-next) 国际化 | ||
| - [lodash](https://github.com/lodash/lodash) 实用工具库 | ||
| - [js-base64](https://github.com/dankogai/js-base64) Base64加密解密工具 | ||
| - [localforage](https://github.com/localForage/localForage) IndexedDB数据存储库 | ||
| - [jszip](https://github.com/Stuk/jszip) Zip压缩、解压工具 | ||
| - [decimal.js](https://github.com/MikeMcl/decimal.js) 高精度运算工具 | ||
| - [pinyin-pro](https://github.com/zh-lx/pinyin-pro) 中文转拼音工具 | ||
| - [vueuse](https://github.com/vueuse/vueuse) Vue组合式API实用工具集 | ||
|
|
||
| ## 🚁三、其他插件 | ||
|
|
||
| - `basic-ssl` 开发环境下https访问 | ||
| - `autoprefixer + postcss` 编译时自动加CSS兼容性前缀 | ||
| - `vite-plugin-pwa` 实现网站作为应用程序安装，从浏览器分离 | ||
| - `cspell` 拼写检查工具 | ||
| - `eslint` 代码校验工具 | ||
| - `prettier` 代码美化工具 | ||
| - `stylelint` css检验工具(主要用来css属性排序) | ||
|
|
||
| ## 🏡四、模块列表 | ||
|
|
||
| - Zip包下载 | ||
| - 更新公告 | ||
| - 邮箱 | ||
| - 设置 | ||
| - 音效反馈 | ||
| - 音乐播放器 | ||
| - 鼠标悬浮反馈 | ||
| - 小贴士小窗 | ||
| - 个人中心 | ||
| - 任务中心 | ||
| - 皮肤、技能竞猜活动 | ||
| - 英雄列表 | ||
| - 英雄详情(包含基本信息页、关系网页、皮肤语音页、技能页) | ||
| - 皮肤列表 | ||
| - 英雄海报、皮肤海报合集列表 | ||
| - 装备三级联动 | ||
| - 英雄夺宝 | ||
| - 皮肤夺宝 | ||
| - 道具商店、英雄碎片商店和皮肤碎片商店、王者水晶商店和荣耀水晶商店 | ||
| - 铭文列表、铭文搭配、铭文套装及套装信息 | ||
| - 背包 | ||
| - 开箱、英雄熟练度升级、英雄兑换和皮肤兑换、双倍道具卡和夺宝周卡 | ||
| - 乂宝部件个性化套装搭配及购买、部件订单列表 | ||
| - 可点击播放语音的弹幕 | ||
| - 个人数据统计 | ||
| - 召唤师卡数据合并与读取写入 | ||
|
|
||
| ## ✨五、项目细节 | ||
|
|
||
| ### 1、PWA应用 | ||
|
|
||
| 当浏览网站`三分钟后`会提示安装`PWA`应用，安装后网站将会从浏览器`分离`成为单独的应用程序，`体验更佳`。 | ||
|
|
||
| ### 2、Zip下载 | ||
|
|
||
| 为了解决在体验时出现音效点击会因为`网速问题`迟迟没有播放，贴图还需要`边看边加载`。 | ||
|
|
||
| 网站素材及游戏数据采用下载`压缩包`，部署在`Github`。 | ||
|
|
||
| 下载后`解压`并存储在内存中，访问内存中的图片，提高网站浏览的`顺畅度`。 | ||
|
|
||
| 如果浏览器刷新，由于`缓存`的原因，压缩包不会`重新下载`，但需要`重新解压`。 | ||
|
|
||
| 下载的资源总共不足`10MB`，分包下载是为了`方便更新`。 | ||
|
|
||
| 下载资源时按顺序`依次下载`，不会`同时下载`，`设计如此`。 | ||
|
|
||
| 下载的游戏数据存储在`IndexDB`。 | ||
|
|
||
| ### 3、版本更新 | ||
|
|
||
| 版本分为`网站部署版本`和`数据版本`，检测到新版会在网站下载资源之前弹出更新弹窗。 | ||
|
|
||
| 通过请求`版本JSON文件`获取两个版本号与本地版本号`比对`，如果是部署版本更新，则要求点击按钮`刷新浏览器`并写入版本号。 | ||
|
|
||
| 如果是数据版本更新，点击按钮后`关闭弹窗`并`删除本地指定数据库`。 | ||
|
|
||
| 此时进入`下载阶段`，下载是会判断本地是否存在指定数据来决定是否下载并`解压数据`。 | ||
|
|
||
| ### 4、数据存储 | ||
|
|
||
| 用户数据加密后存储在`LocalStorage`，当在个人中心`退卡`时，会导出一个`召唤师卡片文件`，下次登录可凭此卡在任何设备上登录。 | ||
|
|
||
| ### 5、数据展示 | ||
|
|
||
| 英雄海报、皮肤海报、铭文贴图加载时，会`读取本地`下载的小图，加载大图时，将小图模糊，当大图加载完成后，替换为大图并去除模糊。 | ||
|
|
||
| 每一张皮肤海报包含了三种尺寸：小图(100×100，用于`模糊加载`)、中图(640×294，用于列表`封面展示`)、大图(2351×1080，用于英雄详情页`全屏皮肤背景`)、4K图(用于查看大图及`下载原图`)。 | ||
|
|
||
| 英雄列表、商城-碎片商店-英雄列表采用`分页加载`，皮肤列表、商城-碎片商店-英雄列表、商城-水晶商店-皮肤列表采用`虚拟列表`，图集列表采用`瀑布流布局`+`分页加载`，当屏幕尺寸缩小时，通过改变列表一行的个数来进行适配，`虚拟列表`和`瀑布流布局`都有适配。 | ||
|
|
||
| 所有图片列表都使用了`懒加载`，即进入`可视区`后才会加载图片，但做了一个`防抖`，必须停留可视区`250ms`才会加载，不会加载`快速略过`的图片。 | ||
|
|
||
| ### 6、夺宝及开箱概率 | ||
|
|
||
| 每个普通道具的数量为`2`，每个稀有道具的数量为`1`，以这样的方式存在`奖池`中，每次夺宝和开箱会重新`打乱奖池`并`随机获取`其中一个。 | ||
|
|
||
| ### 7、乂宝 | ||
|
|
||
| 跟随鼠标的`3D`方块，通过`CSS`拼接六面合成一个`立方体`。 | ||
|
|
||
| 乂宝页的`乂宝`跳跃动画使用的是`JS`的`Element.animate`帧动画，在进入`乂宝页`和购买`乂宝`部件装扮时调用并播放帧动画函数。 | ||
|
|
||
| ## 📚六、素材来源 | ||
|
|
||
| - 英雄头像、技能图标、图片素材——[王者荣耀官网](https://pvp.qq.com) | ||
| - 英雄语音——[王者世界观体验站](https://pvp.qq.com/ip) | ||
| - 点击音效——游戏内录制视频、提取音频、截取音频 | ||
| - 英雄封面——对`100`多个英雄的海报进行裁剪获取 | ||
| - 技能信息——游戏内对每个英雄的详情页进行截图、识字、富文本编辑器对关键文字设置颜色 | ||
| - 英雄基础信息——手敲 | ||
| - 游戏装备——游戏内截图、抠图、利用深度卷积神经网络进行修复 | ||
|
|
||
| ## 🎉七、网站地址 | ||
|
|
||
| > Github部署的网站，需要科学上网，勉强适配手机，但为了更好地体验，推荐使用使用电脑横屏浏览。 | ||
| - 访问地址：https://lengyibai.github.io/wztj | ||
| - Github仓库：https://github.com/lengyibai/wzry | ||
|
|
||
| ⭐求Star⭐求Star⭐求Star⭐ | ||
|
|
||
| ## 🌈八、29张截图 | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  | ||
|
|
||
|  |