实现
文章平均质量分 86
综合实现方案
醉逍遥neo
少而精,胜于多而劣。
展开
-
h5日历组件制作
在自己实现之前会觉得日期的展示这块不好处理,而实现过后会发现这块的处理逻辑很有通用性,无论是pc端还是移动端、vue栈还是react,都能套用同样的处理方式,其他的交互和自定义展示就没啥难度了,根据业务需要自己定制就行。日期列表参照 antd-mobile 的展示,固定6行,共42项,共用一个容器,和星期栏类似,flex布局,子元素占总宽度的1/7,溢出换行(flex-wrap: wrap)。以上数据字段可以随意拓展,根据你的需要来对日历展示不同的状态、不同标记等,或者对日历点击事件做自定义的操作。...原创 2022-08-26 14:37:39 · 2985 阅读 · 1 评论 -
IM多选图片发送消息时的消息顺序控制
在IM即时聊天场景中,在发送多媒体消息(图片/音频/视频)时,如果选中了多个多媒体文件一起发送,如何更快地将消息发送出去,且消息顺序和多媒体文件顺序保持一致?简单的实现并不难,难的是如何尽可能地优化性能和用户体验。分享一下个人的优化实践过程。(以图片为例)一、简单实现实现逻辑:1、拿到所有图片文件的file对象列表fileList2、遍历fileList,调用上传接口uploadFile,等待异步上传结果,依次串行上传。3、每上传成功一张图片,就调用一次sendMsg接口将该图片消息发送出原创 2022-03-28 14:40:34 · 1773 阅读 · 0 评论 -
后台管理系统 - 页面布局设计
前端的中后台管理系统相比于其他普通项目,从开发设计的角度来说有几点比较特殊:一个是权限设计,具体实现可参考:传送门。一个是页面布局的设计,也是本文要说的。一个好的页面布局设计,无论是对于页面布局的稳定性,还是系统功能拓展的方便性,亦或是用户体验上,都有着重要的提升作用。一、市面参考先来看看市面上的一些优秀的开源系统项目的页面布局。1、vue-element-adminvue-element-admin 是 vue 框架的一个优秀的后台管理系统开源项目,目前star数75k,也是我入行前端的启原创 2022-03-21 18:05:57 · 42993 阅读 · 7 评论 -
后台管理系统 - 权限设计
一、前言对于前端项目特别是中后台管理系统项目,权限设计是最复杂的点之一。一般来说权限设计需要后端来把关,毕竟相对来说前端是无法保证安全的,前端的代码和数据请求都可以伪造。而前端的权限设计更多是为了用户体验的考虑。前端保证体验,后端保证安全。由于前后端的开发差异和侧重点不同,在权限设计上也不一样。后端更多的是根据功能对象划分不同的权限模块,针对接口相应进行权限判断;而前端更多是针对页面路由进行模块划分,针对页面可访问进行判断。接下来将以后台管理系统为例,分享个人对前端权限设计的见解。(具体内容尽量做原创 2022-02-24 19:00:49 · 9410 阅读 · 1 评论 -
前端下载文件/导出文件
前端h5开发过程中会经常遇到下载文件或导出文件的需求,有时候接口响应慢或者出于优化交互的目的需要前端自定义处理文件下载。下面由浅入深分享一些常用的处理方法。一、window.location.href这也是最简单的解决方式,window.location.href = urlurl即文件或接口的地址如需要额外参数,通过url后问号拼接参数,后端get请求方式接收。二、window.open上述window.location.href的方式直接访问可能会覆盖当前页面地址,影响用户体验,改原创 2022-01-21 15:44:10 · 12837 阅读 · 4 评论 -
h5页面路由切换动画-左右横滑效果(v2)
h5实现仿微信那种页面切换时左右横滑的动画效果,页面前进时新页面从右往左滑,页面后退时旧页面从左往右滑。原创 2021-11-12 14:35:06 · 8337 阅读 · 3 评论 -
h5页面路由切换动画-左右横滑效果(v1)
h5实现仿微信那种页面切换时左右横滑的动画效果,页面前进时新页面从右往左滑,页面后退时旧页面从左往右滑。(注:本文以vue为例)一、思路分析只实现路由切换动画很简单,只需要给路由出口router-view用transition元素包装一下,加上过渡样式即可:<transition :name="myName"> <router-view/></transition>但这里要实现的动画效果是页面前进后退不一样,问题的难点就在于如何区分页面前进和后退。..原创 2021-11-09 11:52:46 · 3892 阅读 · 0 评论 -
spa单页面应用html缓存问题
一、背景浏览器都有一个缓存机制,简单点说就是同路径同名文件会默认被缓存下来,提升下次访问时的速度,默认只有刷新页面或长时间未访问时才会刷新缓存。而spa单页面应用是通过路由切换来访问不同页面,路由切换时不会刷新页面,所有会存在缓存问题。为了避免这个问题,一般都会配置文件名hash,hash一般采用content hash,文件内容有修改时就会生成新的文件名hash,防止项目修改发布后由于浏览器缓存导致页面未更新。然而对于index.html模板文件,一般是不做hash处理的,在没有做特殊处理的情况下原创 2021-10-18 11:52:38 · 3420 阅读 · 0 评论 -
h5、app、小程序 互相跳转打开的方式总结
(本文里的小程序默认是指微信小程序)一、app或小程序打开h51、webview实现你可以把webview理解成一个无界面的浏览器。ios端已经淘汰掉了UIWebView,现在要使用WKWebView容器,android一般使用系统自带的webview即可,小程序就是用自己的wenview内核。关于h5中如何判断所处的客户端环境可以参考另一篇文章:传送门二、app打开小程序1、微信开放平台sdk实现需要已认证的微信开放平台账号app需要接入微信开放平台OpenSDK可跳转至任意小程原创 2021-03-15 16:34:16 · 9043 阅读 · 4 评论 -
webpack自定义plugin实现编译时自动插入js和css
有一些场景下需要这么个需求,在webpack编译运行时自动插入js或css代码到html模板中。例如要插入一段埋点插件或监控插件的js代码,当然你可以直接写在html模板中,但是对于一个项目中存在多个html模板的情况就不适合一个个手写添加了;本文讨论通过自定义封装一个webpack plugin的形式来实现自动插入js或css的功能。你可以直接使用我封装好的npm包:insert-html-webpack-plugin也可以按以下教程自己手写一个。一、分析本身webpack在运行时就会自动原创 2020-11-21 17:27:57 · 4360 阅读 · 0 评论 -
axios请求拦截封装
axios是目前前端最常用的api请求库,这次就结合自己的使用经验分享一下的axios的封装。官方文档:传送门一、js封装request.js:/** * 接口请求基础封装 */import axios from 'axios'import { objToUrlParams } from './tools'// 创建axios实例const service = axios.create()// 定义额外配置let configMore/** * 数据请求 配置项 * @p原创 2020-10-28 14:52:39 · 403 阅读 · 0 评论 -
前端接口RSA加密(h5+小程序,支持超长内容、中文字符)
一、前端加密概述加密目的:1、防止信息泄露(防止用户登录账号、密码等)2、防止数据篡改(防止篡改数据后模拟请求等)设计原则:1、加密方式安全可靠2、开发成本可接受3、易于调试测试加密范围:1、业务相关api接口请求2、排除图片和文件上传二、常见的加密方式1、Base64Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。Base64编码是从二进制到字符的过程,可用于在HTTP环境下传递较长的标识信息。采用原创 2020-10-14 14:25:05 · 10889 阅读 · 19 评论