- 博客(63)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Chrome浏览器http自动跳https问题
Chrome浏览器访问http页面时有时会自动跳转https，导致一些问题。比如：+ 开发阶段访问dev环境网址跳https，后端还是http，导致接口跨域。
2023-12-22 18:14:04
1627
原创 跨域和cookie
为什么会出现跨域？出于浏览器的同源策略限制，浏览器会拒绝跨域请求。什么情况下出现跨域？不同源就会跨域。同源即：协议、域名、端口号都相同。任意一项不同就会跨域。例如 https://127.0.0.1:8000为什么会有跨域需求？项目工程服务化后，不同职责的服务分散在不同的工程中，往往这些工程的域名是不同的，但一个需求可能需要对应到多个服务，这时便需要调用不同服务的接口，因此会出现跨域。跨域只是浏览器的限制，服务器没有跨域问题。
2023-01-29 14:45:35
1941
原创 h5日历组件制作
在自己实现之前会觉得日期的展示这块不好处理，而实现过后会发现这块的处理逻辑很有通用性，无论是pc端还是移动端、vue栈还是react，都能套用同样的处理方式，其他的交互和自定义展示就没啥难度了，根据业务需要自己定制就行。日期列表参照 antd-mobile 的展示，固定6行，共42项，共用一个容器，和星期栏类似，flex布局，子元素占总宽度的1/7，溢出换行（flex-wrap: wrap）。以上数据字段可以随意拓展，根据你的需要来对日历展示不同的状态、不同标记等，或者对日历点击事件做自定义的操作。...
2022-08-26 14:37:39
2799
1
原创 ikbc键盘win键失效的解决方法
今天敲代码时发现键盘win键失灵了，因为最近刚从windows系统切换到mac系统编程，所以一直以为是mac系统下键盘配置问题或者兼容性问题，反复尝试了很久没有解决。后来问了购买店铺的客服，原来是win键被锁住了。......
2022-07-11 17:39:25
15558
原创 IM多选图片发送消息时的消息顺序控制
在IM即时聊天场景中，在发送多媒体消息（图片/音频/视频）时，如果选中了多个多媒体文件一起发送，如何更快地将消息发送出去，且消息顺序和多媒体文件顺序保持一致？简单的实现并不难，难的是如何尽可能地优化性能和用户体验。分享一下个人的优化实践过程。（以图片为例）一、简单实现实现逻辑：1、拿到所有图片文件的file对象列表fileList2、遍历fileList，调用上传接口uploadFile，等待异步上传结果，依次串行上传。3、每上传成功一张图片，就调用一次sendMsg接口将该图片消息发送出
2022-03-28 14:40:34
1708
原创 后台管理系统 - 页面布局设计
前端的中后台管理系统相比于其他普通项目，从开发设计的角度来说有几点比较特殊：一个是权限设计，具体实现可参考：传送门。一个是页面布局的设计，也是本文要说的。一个好的页面布局设计，无论是对于页面布局的稳定性，还是系统功能拓展的方便性，亦或是用户体验上，都有着重要的提升作用。一、市面参考先来看看市面上的一些优秀的开源系统项目的页面布局。1、vue-element-adminvue-element-admin 是 vue 框架的一个优秀的后台管理系统开源项目，目前star数75k，也是我入行前端的启
2022-03-21 18:05:57
40156
6
原创 npm插件制作（全网最全教程~）
一、npmnpm是h5前端最常用的包管理工具，官方的npm仓库（传送门），用来存储第三方包（插件），通过npm命令下载安装和管理。npm是随着node.js一起诞生的，起初是node.js用来管理包依赖的工具，后来随着webpack这类打包工具的兴起，npm逐渐成为h5前端使用和管理第三方插件的默认平台。二、插件相对于js功能类的插件来说，组件插件的配置更加复杂，下面以一个ts编写的react组件为例。
2022-03-10 17:30:22
6434
原创 小程序开发笔记
微信小程序开发的经验和笔记记录，整理一下分享出来。1、配置合法域名配了合法域名的地址才能正常通信。接口请求，只考虑使用wx.request、wx.uploadFile、wx.downloadFile、wx.connectSocket方法的接口地址需要配置。webview，只考虑h5网址域名需要配置（包括iframe的），而h5里的接口请求不需要考虑。每一种类型最多配置200个域名，每个月最多配置50次。2、设备id小程序没有设备id（官方没有提供相关API）。由于一个设备可能登录多个微
2022-03-01 15:55:48
419
原创 后台管理系统 - 权限设计
一、前言对于前端项目特别是中后台管理系统项目，权限设计是最复杂的点之一。一般来说权限设计需要后端来把关，毕竟相对来说前端是无法保证安全的，前端的代码和数据请求都可以伪造。而前端的权限设计更多是为了用户体验的考虑。前端保证体验，后端保证安全。由于前后端的开发差异和侧重点不同，在权限设计上也不一样。后端更多的是根据功能对象划分不同的权限模块，针对接口相应进行权限判断；而前端更多是针对页面路由进行模块划分，针对页面可访问进行判断。接下来将以后台管理系统为例，分享个人对前端权限设计的见解。（具体内容尽量做
2022-02-24 19:00:49
8978
1
原创 es6模块循环引用的问题
起因是开发时的一个报错信息：Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization。由于报错信息不明确，网上也搜不到明确的原因解释和解决方法，所以自行排查了很久才逐渐找到原因。要说怎么排查，就是最笨的也是最有效的“代码删除法”，即从入口文件开始一行行删代码，直到定位到具体出错位置，然后凭借自身知识和经验判断出问题原因。原因就是import的循环引用导致webpack无法正确解析。一、循环引用简介最简单的 a 引用了 b，b 又
2022-02-11 11:47:44
7328
2
原创 前端下载文件/导出文件
前端h5开发过程中会经常遇到下载文件或导出文件的需求，有时候接口响应慢或者出于优化交互的目的需要前端自定义处理文件下载。下面由浅入深分享一些常用的处理方法。一、window.location.href这也是最简单的解决方式，window.location.href = urlurl即文件或接口的地址如需要额外参数，通过url后问号拼接参数，后端get请求方式接收。二、window.open上述window.location.href的方式直接访问可能会覆盖当前页面地址，影响用户体验，改
2022-01-21 15:44:10
10815
4
原创 mobx v6 + react hook 状态管理配置
react hook 风格下不再使用class类的形式定义组件，也就不再适用mobx以前版本的装饰器语法。以下分享 reack hook 语法风格下使用 mobx v6 版本的状态管理配置使用方式。相关依赖版本："react": "^17.0.2","mobx": "^6.3.2","mobx-react-lite": "^3.2.2",一、mobxmobx 是 react 生态中常用的状态管理插件之一，特点是配置及使用方式比较简便，方式上和 vuex 有些相似。官方中文文档：https:
2022-01-13 17:35:39
4244
原创 react-router v6 路由统一管理及路由拦截方案
上一篇分享了react-router v5 版本的路由管理及拦截方案，但也存在一些缺陷，例如不支持嵌套路由、不支持动态路由参数等。后来看到了react-router v6 版本useRoutes api 的特性，决定升级到v6版本，并对路由管理和路由拦截的实现方案进行了重构。v6版本目前网上的文章寥寥无几，实现过程基本靠自己摸索，下面分享具体方案。一、react-router v6官方文档：https://github.com/remix-run/react-router/blob/main/do
2022-01-07 12:02:47
20431
13
原创 react-router 5 管理路由
实现功能：全局路由统一管理，支持配置路由重定向、路由懒加载、自定义meta字段等。全局路由拦截，支持读取路由meta配置，支持拦截跳转其他路由等。版本：[email protected]@5.3.0一、react路由react-router-dom v5版本里，路由不再是js，而是一个个组件，即<Route />。通过path路径区分不同的路由来渲染。配合<Switch />组件只渲染内部第一个匹配到的<Route />这个特
2021-12-28 19:54:48
2661
原创 webpack迁移vite小结
Vite 是新一代的前端开发与构建工具，相比于传统的webpack，Vite 有着极速的本地项目启动速度（通常不超过5s）以及极速的热更新速度（几乎无感知）。Vite 官网：https://cn.vitejs.dev/下面分享 Webpack 项目（vue-cli项目）迁移至 Vite 的过程步骤、遇到的问题及解决方式。一、项目背景首先不建议做同时支持webpack和vite，这种只适合自己玩玩，实际项目中要考虑多人开发时的协作和维护成本，只用一种最好。原项目主技术栈及版本： Vue@3.
2021-12-09 15:57:54
4400
原创 Vue3 有哪些提升
这里的主要关注点是vue3相比于vue2带来了哪些提升，具体API的使用就不再细述。下面从vue3的几大新特性来逐个展开。一、Composition APIComposition API，即组合式API高内聚聚合业务逻辑，提高代码可读性vue2 通过属性选项（options，如 data、computed、methods 等）书写代码逻辑，代码逻辑点是碎片化、跳跃式的，在大型项目和复杂组件中使得维护变得困难。vue3 的组合式API能够将分散的逻辑代码组合在一起，使代码逻辑更清晰易
2021-12-09 09:41:41
1563
原创 h5页面路由切换动画-左右横滑效果（v2）
h5实现仿微信那种页面切换时左右横滑的动画效果，页面前进时新页面从右往左滑，页面后退时旧页面从左往右滑。
2021-11-12 14:35:06
7969
3
原创 h5页面路由切换动画-左右横滑效果（v1）
h5实现仿微信那种页面切换时左右横滑的动画效果，页面前进时新页面从右往左滑，页面后退时旧页面从左往右滑。(注：本文以vue为例)一、思路分析只实现路由切换动画很简单，只需要给路由出口router-view用transition元素包装一下，加上过渡样式即可：<transition :name="myName"> <router-view/></transition>但这里要实现的动画效果是页面前进后退不一样，问题的难点就在于如何区分页面前进和后退。..
2021-11-09 11:52:46
3791
原创 spa单页面应用html缓存问题
一、背景浏览器都有一个缓存机制，简单点说就是同路径同名文件会默认被缓存下来，提升下次访问时的速度，默认只有刷新页面或长时间未访问时才会刷新缓存。而spa单页面应用是通过路由切换来访问不同页面，路由切换时不会刷新页面，所有会存在缓存问题。为了避免这个问题，一般都会配置文件名hash，hash一般采用content hash，文件内容有修改时就会生成新的文件名hash，防止项目修改发布后由于浏览器缓存导致页面未更新。然而对于index.html模板文件，一般是不做hash处理的，在没有做特殊处理的情况下
2021-10-18 11:52:38
3225
原创 vue 理解&使用render函数
render函数是vue中生成虚拟dom的底层api，可用于在组件封装中使用js编写动态模板，实现js的完全编程能力。vue中在一些复杂场景下使用template模板不太方便，例如需要引入大量子组件时，使用template模板会使代码重复冗余，这时用render函数就可以轻松解决问题。一、render函数的背景在深入渲染函数之前，建议先了解一下vue的渲染原理。1、虚拟domvue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。真实DOM的属性有几百个，为了更高效的来完成dom对比及局部更新
2021-09-10 17:12:33
3970
原创 js实现深拷贝（深克隆）
关于深拷贝和浅拷贝的概念和区别在这里就不再赘述了，而常规的JSON.parse(JSON.stringfy(data)方式存在很多缺陷，例如无法处理undefined、function、特殊引用类型、循环引用等。最近尝试手写一下深拷贝的实现，分享一下思路和代码。（完整代码见文章末尾）一、整体思路深拷贝要考虑的点还是挺复杂的，数据类型太多需要一一处理，具体我是怎么一步步手写以及修改填坑的过程就不多说了，就大概说一下我的代码流程吧。（定义源数据为target，克隆后的数据为result）1、数据类型
2021-09-03 16:36:28
5455
原创 script setup 语法使用
vue3.2正式版已经发布，script setup语法已经由实验性质改为了正式语法，可以放心大胆的在项目中用了。官方文档：https://v3.cn.vuejs.org/api/sfc-script-setup.html#basic-syntax相比于常规的composition api语法，script setup语法更加简练方便，官方文档纯英文且不够详细，下面分享一下个人整理的语法使用方式。（看这篇文章之前需先提前熟悉vue3新语法变化）。1、基础用法<template> &
2021-08-18 15:36:58
14441
4
原创 前端数据加密（Base64、MD5、AES、RSA）
以前端的角度来梳理一些常见的加密方式。一、前端加密有意义吗正反派都有。1、无意义论 说无意义的，无非是说，对于后端而言，前端无论是直接发送明文密码还是使用md5等加密的密文密码，从数据层面来讲，都是『明文』，只要被劫持，就算是密文，也并不需要去破解，直接伪造请求，照样发送就好了。 再加上，因为前端代码是运行在用户本地浏览器，代码都能扒下来，什么加密算法都是用户可见的，混淆，散列，加密无非是增大这种可见的难度，并没有从根本上解决问题。2、有意义论 说有意义的呢，更多说的是保护用户隐私，不至
2021-07-05 17:51:34
9267
原创 前端抓包调试工具
待续一、调试工具1、h5调试2、小程序调试二、抓包1、windows下普通抓包2、mac下普通抓包3、单页面应用hash路由抓包4、安卓7.0+版本下的app抓包
2021-06-30 15:19:58
4082
原创 小程序自定义tabbar
待续一、官方tabbar官方文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html二、自定义tabbar官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
2021-05-31 18:36:30
3529
原创 generator函数 以及 async、await
generator函数，通过在函数名前加一个*号来定义生成器函数，返回一个迭代器对象，然后通过函数内部的 yield标识 和 迭代器对象调用 next方法 来使函数分段执行。一、generator函数1、基础用法function *test () { yield 11 yield 12}const iterator = test()const next1 = iterator.next()const next2 = iterator.next()const next3 = ite
2021-04-07 18:20:15
659
1
原创 h5、app、小程序 互相跳转打开的方式总结
（本文里的小程序默认是指微信小程序）一、app或小程序打开h51、webview实现你可以把webview理解成一个无界面的浏览器。ios端已经淘汰掉了UIWebView，现在要使用WKWebView容器，android一般使用系统自带的webview即可，小程序就是用自己的wenview内核。关于h5中如何判断所处的客户端环境可以参考另一篇文章：传送门二、app打开小程序1、微信开放平台sdk实现需要已认证的微信开放平台账号app需要接入微信开放平台OpenSDK可跳转至任意小程
2021-03-15 16:34:16
7879
4
原创 ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用，有时傻傻分不清，网上还有很多错误的解读，哎，分享一下个人的理解。1、reactivereactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。获取副本原始数据值的时候直接获取，不需要加.value参数只能传入对象类型import { reactive } from 'vue'// 响应式状态const state = reactive({ count: 0})// 打印count的值co
2021-01-06 18:41:38
31515
7
原创 vue3 自定义hooks / 可组合函数
vue2.x下封装的mixins在引入文件都是通过this上下文来调用封装的属性或方法，而在vue3.0的composition API下不再使用this上下文，所以，实际上这两者就是冲突的，只能重新封装一套全新的方式来使用类似mixins的功能。一、vue2.x里mixins的痛点传统的mixins有很多让人诟病的地方，mixins 的深度合并非常隐式，这让使代码逻辑更难理解和调试，具体表现为如下几点：mixin 很容易发生冲突：因为每个特性的属性都被合并到同一个组件中，所以为了避免 proper
2020-12-25 17:41:06
6187
2
原创 项目升级vue3.0总结
vue3.0正式版已经发布几个月了，ui框架也跟进的差不多了，咱也得紧跟潮流不能落伍，所以趁着空闲就升级了项目vue框架，由vue2.6升级到vue3.0，总结下升级过程中的遇到的问题及解决方法。一、项目简介基于vue2框架的多项目聚合方案，分为多个子项目，主要运行在hybrid app中，之前也写过一个教程，讲了这个项目的搭建过程，传送门。不过原项目刚搭建时是js版本，在我升级vue3.0之前这个项目已经升级为ts版了（可参考vue2升级ts教程），所以这次就只升vue框架就行了，如果你的项目还没t
2020-12-17 16:53:13
10450
7
原创 script脚本阻塞的探究、异步属性async和defer的区别
本文主要讨论html中script标签的一些特性，其中，script的阻塞是讨论的核心点，主要围绕script的阻塞探讨其现象及解决方式。一、阻塞dom的解析渲染1、描述由于js的执行可能会有操作dom的情况导致dom结构发生变化，所以在html解析最初设计的时候就让js执行时暂停dom的解析渲染，这就造成了对dom的阻塞。2、常规解决方式一般就是把js放在body标签的最底部，这样既保证dom解析完后才执行js，也保证js里能获取到dom元素。另外不建议把script代码放在body闭合标签（
2020-12-01 16:17:16
1575
原创 webpack 从零开始配置教程
由于webpack5刚刚发布，相关生态还不成熟，这里以webpack4的版本为例，为了避免插件版本的兼容问题，以下安装个别npm依赖时我会指定版本号。本文仅作为webpack学习之用，实际项目中还是更推荐使用成熟的脚手架搭建，然后根据学习的成果再去定制改造。一、基础1、目录文件新建一个文件夹作为示例项目，项目根目录运行命令初始化package.json：npm init -y然后按照以下目录先创建空文件：2、入口和出口安装webpack依赖npm i -D [email protected]
2020-11-24 17:23:49
1504
1
原创 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
4164
原创 npm包发布详细教程
将我们编写的代码发布到npm仓库后就可以在多个不同的项目里引入使用，不管是公司内部使用还是分享给互联网上其他用户，都是非常方便。一、新建项目1、建立目录新建一个项目文件夹wxmp-rsa，在里面新建src文件夹，src里新建index.js，index.js就作为我们的代码主文件，在里面简单写几行代码，然后新建项目说明文档README.md，最后目录如下：2、初始化git在项目根目录运行终端命令：git init .3、编写package.json在项目根目录运行终端命令，初始化生
2020-11-16 11:51:05
22741
11
原创 h5页面运行环境判断
判断h5页面所处的运行环境，以便针对不同的环境做兼容性或差异化处理；由于很多时候需要一进页面就第一时间做处理，所以异步的判断方法都不予考虑，必须是能实时获取的;那么自然的，判断UA是最好、最方便的方式。一、先上代码：js封装platform.js：const ua = window.navigator.userAgent.toLowerCase()// android平台const isAndroid = (() => { return /Android|Adr/i.test(.
2020-11-06 11:09:19
2868
原创 jenkins + nginx 前端自动化部署项目
由于资源有限，没有linux服务器可用，这里就以windows环境为例，配合jenkins和nginx，搭建一个前端项目自动化部署示例，供参考和学习。一、jenkins1、下载安装官网下载jenkins：传送门选择LTS windows版本：按照提示一步步安装jenkins然后安装相关插件，下载很慢，慢慢等吧，我等了一整天，还重试了一次才把全部插件下载安装完。。。2、创建jenkins任务jenkins首页，左上角选择新建item,输入任务名称，建议用项目名+api服务器环境名，选择f
2020-10-30 11:47:18
4151
原创 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
394
原创 vue2配置使用typescript教程
本文是vue项目的js升级ts教程，也可以作为vue项目的ts使用教程。项目背景：vue版本：2.6.11基于vue-cli4脚手架生成已配置eslint（配置教程参考：传送门）一、安装依赖vue ts基础：npm i -D typescript @vue/cli-plugin-typescriptts校验相关：npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-
2020-10-26 18:31:46
12082
4
原创 前端接口RSA加密（h5+小程序，支持超长内容、中文字符）
一、前端加密概述加密目的：1、防止信息泄露（防止用户登录账号、密码等）2、防止数据篡改（防止篡改数据后模拟请求等）设计原则：1、加密方式安全可靠2、开发成本可接受3、易于调试测试加密范围：1、业务相关api接口请求2、排除图片和文件上传二、常见的加密方式1、Base64Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。采用
2020-10-14 14:25:05
10442
19
原创 微信小程序自定义服务器环境切换
微信小程序由于生态圈的封闭性，很多功能不支持或者实现起来很繁琐，这次就分享一下项目里对于小程序服务器切换相关的配置及使用心得。首先要解释一下后面会出现的两个变量名：SERVER_MODE： 综合性的切换服务器模式，通过在代码里手动修改配置文件里的服务器模式值，用于测试、预发及上线时的版本切换及环境模式判断，包括各个接口服务器、h5域名服务器、第三方appId、自定义服务器等一键切换。SERVER_DEV_MODE：接口api的切换服务器，通过在特定入口里打开特定页面，在该页面里可选切换api服务器环境
2020-10-09 16:53:59
3738
padwalker-perl的debug工具-for Windows
2016-01-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人