- 博客(112)
- 资源 (1)
- 收藏
- 关注
原创 常用的ADB指令合集
常用的ADB指令合集##通过ADB指令安装卸载应用确认设备和电脑在同一局域网下1.通过ADB 指令链接设备adb connect [device_IP:port]2.断开连接adb disconnect [serialNumber]3.覆盖安装应用adb install -r "应用地址"4.查看设备应用列表adb shell pm list packages5.卸载应用adb uninstall 应用包名4.关闭应用adb shell am force-stop 应
2021-10-09 17:51:43 405 1
原创 Vue-cli3.0+Electron初始化桌面应用程序项目
初始化一个Vue-cli3.0vue create vue-electron创建vue项目过程,选常用模块以及配置? Please pick a preset: Manually select features? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex>
2021-07-07 11:05:44 1057 4
原创 解决vue-cli3.0项目在低版本安卓系统和IE中白屏问题详细记录
解决vue-cli3.0项目在低版本安卓系统和IE中白屏问题用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了。低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错。但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的…网上的文章大
2021-07-02 13:41:16 2668 7
转载 WebSocket、Socket、TCP、HTTP区别
1. 概述WebSocket 是为了满足基于 Web 的日益增长的实时通信需求而产生的。在传统的 Web 中,要实现实时通信,通用的方式是采用 HTTP 协议不断发送请求。但这种方式即浪费带宽(HTTP HEAD 是比较大的),又消耗服务器 CPU 占用(没有信息也要接受请求)。(下图来自WebSocket.org)而是用 WebSocket 技术,则会大幅降低上面提到的消耗:(下图来自websocket.org)关于更详细的描述,尹立的这篇文章讲得非常好:WebSocket(2)–..
2021-02-22 15:26:29 439
原创 vue+swiper+animate.css制作全屏滚动H5
年底了,接到需求要制作年度账单,形式就是全屏滚动H5页面,翻页时给页面元素添加动画,大概效果如下:H5长翻页动画效果接下来就来介绍一下我的制作步骤;1.安装swiper、animate.cssnpm install swiper@3 --savenpm install animate.css --save2.在main.js中引入animate.css// main.jsimport Vue from "vue"import App from "./App.vue".
2021-01-14 10:56:27 2935 6
原创 vue封装自定义组件并上传到npm
使用vue-cli3搭建团队的组件库并发布到npm 1.安装vue-cli3并创建一个项目 首先我们先安装开发必要的工具集,并创建一个项目: npm发包的常用基础知识
2020-12-22 11:24:57 3225 5
原创 JS防抖和节流方法说明及使用
应用场景在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。函数防抖函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。如下图,持续触发scroll事件时,并不执行handle函数,当1..
2020-12-16 10:00:37 1150
原创 29个常用CSS选择器说明与使用
1、 *:通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。*选择器也可以应用到子选择器中,例如下面的代码:#container * { border:1px solid black; }这样ID为container 的所有子标签元素都被选中了,并且设置了border。2、 #id:id选择器#container {.
2020-12-15 16:49:28 1224
原创 postcss-pxtorem设置不转换UI框架的CSS单位
在移动端项目中使用postcss-pxtorem做适配,同时也使用到了第三方UI库(vant)。这时就出现了一个问题。第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器,vant-UI组件库的CSS都是以.van开头的因此我只需要将 .van 忽略掉就好,具体配置如下:module.exports = { plugins: { // 这个工具可.
2020-12-14 09:48:34 4183 3
原创 前端常用动画CSS代码
/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bou.
2020-12-07 17:09:16 355
原创 移动端H5强制页面横屏展示
接到一个H5小游戏的需求,需要强制H5横屏显示;大概效果如下:实现原理利用transform将这个父容器在竖屏状态下整体顺时针旋转90º,页面就处于横屏的状态。但是因为旋转元素的基点默认为本身的中心点。所以我们设置一下它的旋转中心为左上角(transform-origin: 0% 0%;),这样页面被“转出了屏幕”停留在屏幕的左侧,最后一步只需要将它往右平移一个屏幕的宽度就刚刚好(left:100vw)。完整的实现代码如下:<!DOCTYPE html><html>
2020-12-07 17:05:22 9610 3
原创 H5页面跨窗口通信之postMessage(iframe子页面向父页面发送信息)
需求背景 最近在做H5项目时,遇到一个需求,公司所有的项目共用了一个防人机页面,当人机验证完成时需要把结果参数发送给调用它的父页面,APP端在使用验证页面时,结果是通过H5与APP交互方法传递的;但是H5引用这个页面时,只能通过iframe内嵌的方式来实现,这样在验证通过后就面临着iframe内嵌页面需要将验证结果发送给外部父页面,通知外部父页面做相应的处理;实现方式 1.父页面发送消息,子页面接受消息 父页面:<!-- a.index.html --&...
2020-11-09 17:15:54 5335
原创 H5在部分iOS系统中软键盘收起页面不回落、input输入内容显示不全解决方法
1.部分iOS系统中软键盘收起H5页面不回落项目中遇到了,页面中input框输入信息软件盘弹起,输入完成后,点击确定,软件键盘收起时,发现页面底部滚动到上面,底部留白,页面不会弹到底部。解决方法如下: // 解决H5页面ios软键盘收回页面卡半屏问题 $("input,select").blur(function() { var u = navigator.userAgent; if (u.indexOf('iPhone') > -1) { //苹果手机 setT
2020-10-29 16:41:57 2015
原创 JS获取url参数及解决参数中包含中文时出现的乱码问题
H5页面通过url传参时需要通过JS获取url上的参数,以下两个方法配合使用,就可以获取到URL上携带的参数url如:http://127.0.0.1:8848/zz-metro-op-H5/syx-activity/test.html?name=张三//根据参数名来获取参数值function getParamString(paraPart,name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
2020-10-14 15:31:46 1257 1
原创 vue项目中GET请求传数组类型参数
在AJAX异步请求为GET方式时,如果需要传递到后台的参数是数组类型,直接通过query的方式会有问题,参数在URL上的展示形式如下:参数:{name:[‘张三’,'李四','王五','赵六']}url:https://mp.csdn.net/console/editor/html/108768288通过query的方式传参,请求url变成了下面这样https://mp.csdn.net/console/editor/html/108768288?name[]=张三&...
2020-09-24 14:22:59 5572
原创 解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题
移动端开发时,H5长页面在iOS系统中滑动时,当页面滑动到顶部或底部时,页面还能够上滑或下滑,手指离开屏幕后回弹,这就时橡皮筋效果,单纯来说这个效果并没有什么问题,但是它对H5页面却并不友好,会导致穿透,导致H5页面出现被截断的假象;参考了很多文章之后,我采用了如下办法,亲测好用:使用插件inobounce(但是只适用于ios系统,安卓不适用)下载插件:npm install inobounce -s在需要处理的页面上添加如下代码:<script>i...
2020-08-12 17:43:49 6680 4
原创 vue-cli 3.0中使用postcss-px-to-viewport或postcss-pxtorem实现移动端自动适配
postcss-pxtorem和postcss-px-to-viewport都是PostCSS的插件,用于将像素单元生成rem单位或者vw单位。前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。1.安装依赖npm install postcss postcss-loader postcss-pxtorem -D2.设置规
2020-08-10 16:17:58 2363
原创 Vue中小型状态管理器observable
大型项目中的数据状态会比较复杂,一般都会使用vuex来管理。但在一些小型项目或状态简单的项目中,为了管理几个状态而引入一个库,显得有些笨重。在 2.6.0+ 版本中,新增的Vue.observable可以帮助我们解决这个尴尬的问题,它能让一个对象变成响应式数据:// store.jsimport Vue from 'vue'export const state = Vue.observable({ count: 0 })使用:<div @click="setC...
2020-08-10 11:30:52 482
原创 iOS中H5从其他页面返回当前页面,页面不更新
做活动H5的时候,多个H5页面之间相互跳转的情况很多,在开发中我遇到了这样一个问题,A页面跳转到B页面,在从B页面返回时,我需要A页面做更新操作,在安卓中,不用特殊处理,就能实现,但是在iOS中A页面被缓存了,返回页面不会更新,后来百度了一些文章,找到了解决方法; //决ios返回页面不刷新BUG window.addEventListener('pageshow', function(e) { if (e.persisted) { //页面...
2020-07-01 13:40:48 428
原创 Vue设置部分页面缓存,设置部分页面不缓存
在项目中经常会遇到需要设置部分页面缓存,在路由切换时,不必每次都拉取接口更新,这样可以很大程度的提升用户体验,也可以减少接口请求次数,降低服务器消耗;首先我们先了解下vue这个框架在页面缓存知识1:keep-alive 组件; 说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们; |- include 属性 说明: 只要include包含组件name则缓存下来; 官方解释:允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示 ...
2020-06-04 17:29:40 3861
原创 Vue-cli3.0中 使用image-webpack-loader 做图片优化时,乱码报错解决办法
1.Vue-lie3.0中image-webpack-loader插件的使用方法 做H5活动页面的时候,使用到了很多图片,就像使用image-webpack-loader插件来做图片优化,vue-lie3.0中image-webpack-loader插件的使用方法如下:(1)安装image-webpack-loadernpm install image-webpack-loader --save --dev(2)修改vue.config.js// vue.config....
2020-06-02 14:09:13 4540 1
转载 前端常用60个工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) =>
2020-05-27 15:06:11 305
原创 按钮背景为图片,在按钮不可用时,将按钮置灰
这个需求有两种解决方法,一种是通过滤镜来实现,还有一种简单除暴,直接在按钮不可用时,将按钮背景图片换成灰色的背景1.按钮添加灰色滤镜.btn-disabled { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filt
2020-05-27 10:14:16 1159
原创 element UI的form 禁止浏览器自动填充用户名或密码
浏览器自动填充的功能在登录的时候挺好用的,但是在用户注册或管理的时候就很不需要再自动填充了;普通的form表单内的input设置autoComplete="off"就可以了<input type="password" autoComplete="off"/>但是在element UI里面设置autoComplete="off"是不生效的,需要设置为new-password<el-input v-model="form.password" show-password au
2020-05-20 15:36:13 3039
转载 2020 web前端面试题及答案大全
css相关1. 万能居中1.margin: 0 auto;水平2.text-align: center;水平3.行高,垂直4.表格,center,middle;水平垂直5.display:table-cell;模拟表格,all6.绝对定位,50%减自身宽高7.绝对定位,上下左右全0,margin:auto8.绝对定位加相对定位。不需要知道宽高9.IE6,IE7:给父元素设一个font-size:高度/1.14,vertical-align:middle2. BFC优化块格式化
2020-05-12 13:43:50 18656
原创 vue-cli3.0 中创建多个子项目,并能分别打包到对应的文件夹下
在项目中我们经常会做多个小的vue项目,这些项目页面不多,功能也不复杂,它们可以共用依赖,但是我们又不能每个小项目单独初始化vue项目,这个时候,我们就希望在一个vue脚手架下创建多个子项目,它们互不干扰,可以独立运行,但又能共用一套依赖; 其实这个需求尤大大早就替我们想到了,在vue-cli的官方文档中就有介绍;pages Type:Obj...
2020-04-26 16:57:35 12503 6
原创 一步一步学会使用vuex
1. vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。白话:vuex就是帮我们存储一下多个组件共享的数据,方便我们对其读取和更改。2. State官方解释:Vuex使用单一状态树,用一个对象就包含了全部的应用层次状态。它便作为一个唯一的数据源而存在。这也就意味着, 每个应用将仅仅包含一个store实例。白...
2020-04-22 10:31:30 221
原创 使用charles抓取手机APP的数据包,https请求一样能抓取
在开发过程中,经常会遇到真机调试的场景,但是受环境限制,只能使用数据抓包的办法来查看http请求的数据结果和状态,下面就为大家介绍一款非常好用的数据抓包工具及使用方法;工具介绍Charles 是一款收费的抓包修改工具,易上手,数据请求容易控制,修改简单,抓取数据的开始暂停方便等优势!下载地址:https://www.charlesproxy.com/download/1.下载...
2020-04-09 13:55:36 1481 1
原创 Vue项目中添加husky
husky 是一个 GitHook 工具。主要实现提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突;1.安装 husky,lint-stagednpm i -D husky lint-staged2.在package.json中新增如下配置{ ... "scripts": { ... }, "h...
2020-03-31 10:28:06 7226
转载 前端表单验证常用的15个JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。1、用户名正则//用户名正则,4到16位(字母,数字,下划线,减号)var uPatter...
2020-03-28 22:11:50 220
转载 高效的编码:我的VS Code设置
代码编辑器很多,有些是免费的,有些是付费的。其中最喜欢的代码编辑器是 Visual Studio Code。它是免费的,并具有强大的功能,我陆续抛弃了Atom、Sublime Text以及也很强大的WebStorm。今天,我将分享我最喜欢的代码编辑器设置,用于我的 Web 开发。我将从代码编辑器的外观开始。毕竟外观颜值很重要。????主题我最常用的 VS Code 主题是Snazzy Op...
2020-03-27 19:56:02 1439
原创 vue-cli3.0 项目内使用vue-skeleton-webpack-plugin插件根据路由来渲染不同的骨架屏
为了前端体验更加友好,减缓用户的焦虑情绪,提升项目质量等,我们在项目里面可以使用骨架屏,提前渲染出来一个跟正式页面相似的页面出来,减小首屏加载时间。在vue中使用骨架屏因为我们的代码会使用webpack打包,所以在我们的js下载运行之前,用户是无法在页面上看到信息,所以,我们要把骨架屏相关的代码放到HTML里面,当然,可以把代码直接写在html文件的<div id=’app‘>...
2020-03-17 17:43:30 2901 4
原创 npm 安装 node-sass 失败问题分析及解决方案
在使用npm 安装依赖时,执行到Binary found at D:\work\xiangmu\xian-metro-operator-web\node_modules\node-sass\vendor\win32-x64-64\binding.node时卡主不动了,想了半天也没找到是什么原因,后来...
2020-03-12 23:44:57 14123 2
原创 APP内嵌H5开发常见问题及解决方案
前言作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下,并在后面给出坑产生的原理,和现阶段常规的填坑方案。由此来做一个阶段性的总结。常规操作哈,点赞后再观看呗!你的点赞就是我创作的动力之一!问题下面列举了我遇到的一些常规问题,如有遇到其他问题请在评论区补充,之后我也会实践后加以补充,感谢!(经常更新该文)...
2020-03-11 15:38:29 10574 1
原创 JS常用开发技巧
「String Skill」:字符串技巧 「Number Skill」:数值技巧 「Boolean Skill」:布尔技巧 「Array Skill」:数组技巧 「Object Skill」:对象技巧 「Function Skill」:函数技巧 「DOM Skill」:DOM技巧 备注 代码只作演示用途,不会详细说明ES6语...
2020-03-11 15:20:15 254
原创 vue封装通用页面布局组件
在做项目时,我们的页面风格往往都是统一的,页面布局大多也相似,这样我们就可以吧相同的,可以复用的组件封装起来,页面上需要使用时,引用就可以了;下面介绍一个自己封装的页面布局组件1.在components下新建PageFrame/index.vue,内容如下:<template> <div class="page-frame"> <div clas...
2020-03-10 16:08:23 2813
原创 H5页面中引用的静态图片、CSS或JS时,在路径后添加时间戳,防止浏览器缓存
HTML内引用静态图片,浏览器缓存<div class="box"> <script type="text/javascript">document.write('<img src="./img/face-guide1.png?timestamp='+new Date().getTime()+'"><\/img>');</scrip...
2020-03-04 15:13:41 3452 1
原创 移动端h5页面软键盘弹出后 背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题<div class="app" :style="{ height: bodyHeight + 'px' }"></div>mounted(){ this.bodyHeight=document.documentEl...
2020-02-13 21:25:43 1986
原创 vue+table2excel 导出JSON数据到excle
最近在做一个信息采集管理系统,需要把采集到的信息导出到excle,先说说在vue中安装和引入table2excel//安装npm install js-table2excel//引入import table2excel from 'js-table2excel'采集系统需要收集的信息包含姓名、手机号、身份证号、还有一项是上传图片;模拟数据如下:const da...
2020-02-12 10:07:24 3183 3
原创 在Vue中,将数据导出成excel,合并单元格
前段时间接到一个做报表的项目,需要将数据导出成excel表格,表格模板中有很多表格是需要合并的,之前没有这方面的经验,也为难了好久,后来终于发现一个好用的js插件,完全能够实现我需要的功能,一块分享给大家;由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格...
2020-01-20 17:01:50 12270 18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人