- 博客(112)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 常用的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
325
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
965
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
2310
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
366
原创 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
2703
6
原创 vue封装自定义组件并上传到npm
使用vue-cli3搭建团队的组件库并发布到npm 1.安装vue-cli3并创建一个项目 首先我们先安装开发必要的工具集,并创建一个项目: npm发包的常用基础知识
2020-12-22 11:24:57
3063
5
原创 JS防抖和节流方法说明及使用
应用场景在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1..
2020-12-16 10:00:37
1062
原创 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
1085
原创 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
3599
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
327
原创 移动端H5强制页面横屏展示
接到一个H5小游戏的需求，需要强制H5横屏显示；大概效果如下：实现原理利用transform将这个父容器在竖屏状态下整体顺时针旋转90º，页面就处于横屏的状态。但是因为旋转元素的基点默认为本身的中心点。所以我们设置一下它的旋转中心为左上角（transform-origin: 0% 0%；），这样页面被“转出了屏幕”停留在屏幕的左侧，最后一步只需要将它往右平移一个屏幕的宽度就刚刚好（left：100vw）。完整的实现代码如下：<!DOCTYPE html><html>
2020-12-07 17:05:22
8912
3
原创 H5页面跨窗口通信之postMessage（iframe子页面向父页面发送信息）
需求背景 最近在做H5项目时，遇到一个需求，公司所有的项目共用了一个防人机页面，当人机验证完成时需要把结果参数发送给调用它的父页面，APP端在使用验证页面时，结果是通过H5与APP交互方法传递的；但是H5引用这个页面时，只能通过iframe内嵌的方式来实现，这样在验证通过后就面临着iframe内嵌页面需要将验证结果发送给外部父页面，通知外部父页面做相应的处理；实现方式 1.父页面发送消息，子页面接受消息 父页面：<!-- a.index.html --&...
2020-11-09 17:15:54
4285
原创 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
1850
原创 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
1066
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
4954
原创 解决H5页面在iOS系统中滑动回弹效果(橡皮筋效果)导致的穿透问题
移动端开发时，H5长页面在iOS系统中滑动时，当页面滑动到顶部或底部时，页面还能够上滑或下滑，手指离开屏幕后回弹，这就时橡皮筋效果，单纯来说这个效果并没有什么问题，但是它对H5页面却并不友好，会导致穿透，导致H5页面出现被截断的假象；参考了很多文章之后，我采用了如下办法，亲测好用：使用插件inobounce（但是只适用于ios系统，安卓不适用）下载插件：npm install inobounce -s在需要处理的页面上添加如下代码：<script>i...
2020-08-12 17:43:49
6442
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
2210
原创 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
424
原创 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
373
原创 Vue设置部分页面缓存，设置部分页面不缓存
在项目中经常会遇到需要设置部分页面缓存，在路由切换时，不必每次都拉取接口更新，这样可以很大程度的提升用户体验，也可以减少接口请求次数，降低服务器消耗；首先我们先了解下vue这个框架在页面缓存知识1：keep-alive 组件； 说明： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们； |- include 属性 说明： 只要include包含组件name则缓存下来； 官方解释：允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示 ...
2020-06-04 17:29:40
3700
原创 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
4386
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
273
原创 按钮背景为图片，在按钮不可用时，将按钮置灰
这个需求有两种解决方法，一种是通过滤镜来实现，还有一种简单除暴，直接在按钮不可用时，将按钮背景图片换成灰色的背景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
1005
原创 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
2955
转载 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
17977
原创 vue-cli3.0 中创建多个子项目，并能分别打包到对应的文件夹下
在项目中我们经常会做多个小的vue项目，这些项目页面不多，功能也不复杂，它们可以共用依赖，但是我们又不能每个小项目单独初始化vue项目，这个时候，我们就希望在一个vue脚手架下创建多个子项目，它们互不干扰，可以独立运行，但又能共用一套依赖； 其实这个需求尤大大早就替我们想到了，在vue-cli的官方文档中就有介绍;pages Type:Obj...
2020-04-26 16:57:35
11572
6
原创 一步一步学会使用vuex
1. vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。白话：vuex就是帮我们存储一下多个组件共享的数据，方便我们对其读取和更改。2. State官方解释：Vuex使用单一状态树，用一个对象就包含了全部的应用层次状态。它便作为一个唯一的数据源而存在。这也就意味着， 每个应用将仅仅包含一个store实例。白...
2020-04-22 10:31:30
188
原创 使用charles抓取手机APP的数据包，https请求一样能抓取
在开发过程中，经常会遇到真机调试的场景，但是受环境限制，只能使用数据抓包的办法来查看http请求的数据结果和状态，下面就为大家介绍一款非常好用的数据抓包工具及使用方法；工具介绍Charles 是一款收费的抓包修改工具，易上手，数据请求容易控制，修改简单，抓取数据的开始暂停方便等优势！下载地址：https://www.charlesproxy.com/download/1.下载...
2020-04-09 13:55:36
1404
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
7102
转载 前端表单验证常用的15个JS正则表达式
在表单验证中，使用正则表达式来验证正确与否是一个很频繁的操作，本文收集整理了15个常用的javaScript正则表达式，其中包括用户名、密码强度、整数、数字、电子邮件地址（Email）、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。1、用户名正则//用户名正则，4到16位（字母，数字，下划线，减号）var uPatter...
2020-03-28 22:11:50
184
转载 高效的编码：我的VS Code设置
代码编辑器很多，有些是免费的，有些是付费的。其中最喜欢的代码编辑器是 Visual Studio Code。它是免费的，并具有强大的功能，我陆续抛弃了Atom、Sublime Text以及也很强大的WebStorm。今天，我将分享我最喜欢的代码编辑器设置，用于我的 Web 开发。我将从代码编辑器的外观开始。毕竟外观颜值很重要。????主题我最常用的 VS Code 主题是Snazzy Op...
2020-03-27 19:56:02
1359
原创 vue-cli3.0 项目内使用vue-skeleton-webpack-plugin插件根据路由来渲染不同的骨架屏
为了前端体验更加友好，减缓用户的焦虑情绪，提升项目质量等，我们在项目里面可以使用骨架屏，提前渲染出来一个跟正式页面相似的页面出来，减小首屏加载时间。在vue中使用骨架屏因为我们的代码会使用webpack打包，所以在我们的js下载运行之前，用户是无法在页面上看到信息，所以，我们要把骨架屏相关的代码放到HTML里面，当然，可以把代码直接写在html文件的<div id=’app‘>...
2020-03-17 17:43:30
2811
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
13956
2
原创 APP内嵌H5开发常见问题及解决方案
前言作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。常规操作哈，点赞后再观看呗！你的点赞就是我创作的动力之一！问题下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文）...
2020-03-11 15:38:29
9403
1
原创 JS常用开发技巧
「String Skill」：字符串技巧 「Number Skill」：数值技巧 「Boolean Skill」：布尔技巧 「Array Skill」：数组技巧 「Object Skill」：对象技巧 「Function Skill」：函数技巧 「DOM Skill」：DOM技巧 备注 代码只作演示用途，不会详细说明ES6语...
2020-03-11 15:20:15
175
原创 vue封装通用页面布局组件
在做项目时，我们的页面风格往往都是统一的，页面布局大多也相似，这样我们就可以吧相同的，可以复用的组件封装起来，页面上需要使用时，引用就可以了；下面介绍一个自己封装的页面布局组件1.在components下新建PageFrame/index.vue,内容如下：<template> <div class="page-frame"> <div clas...
2020-03-10 16:08:23
2665
原创 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
3278
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
1918
原创 vue+table2excel 导出JSON数据到excle
最近在做一个信息采集管理系统，需要把采集到的信息导出到excle，先说说在vue中安装和引入table2excel//安装npm install js-table2excel//引入import table2excel from 'js-table2excel'采集系统需要收集的信息包含姓名、手机号、身份证号、还有一项是上传图片；模拟数据如下：const da...
2020-02-12 10:07:24
3072
3
原创 在Vue中，将数据导出成excel,合并单元格
前段时间接到一个做报表的项目，需要将数据导出成excel表格，表格模板中有很多表格是需要合并的，之前没有这方面的经验，也为难了好久，后来终于发现一个好用的js插件，完全能够实现我需要的功能，一块分享给大家；由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格...
2020-01-20 17:01:50
11522
18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人