- 博客(82)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 前端页面性能检测工具-Lighthouse安装及使用
最近在做开发的过程中，需要对前端界面进行性能检测和优化，使用的是lighthouse。Lighthouse是Google开源的一个自动化工具，用于改进网络应用的质量，适用于网页版和移动端，比如找出哪些资源适合延迟加载，以及可以在初始页面加载中节省多少流量。能生成一个包括页面性能、PWA（Progressive web apps，渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO的报告清单提供参考。一、lighthouse的安装Lighthouse是Chrome提供的一个扩展工具，.
2021-04-01 18:12:58
2717
4
原创 Error in v-on handler: "TypeError: _.mapObject is not a function"解决方案
最近在做微信公众号开发，需要用到微信的扫码功能，所以集成了相应的功能及相应的JS文件后，点击调用一直报这个问题：Error in v-on handler: "TypeError: _.mapObject is not a function"首先怀疑是使用到的_变量没有引入进来，引入后还是在报同样的错误。在浏览器中打断点调试，发现当加载这个方法的时候，_这个变量指向了lod...
2020-04-11 13:33:05
5310
原创 html 界面内跳转，点击浏览器返回键时，返回界面空白的问题解决方法
最近在开发时，遇到一个需求，在界面内有一个tabbar,点击其中一个，需要使界面跳转到对应位置，一般能想到的办法就是采用锚 链接实现。<a href="#aaa"></a> 大家都知道，这样写，我们在点击链接时，会伴随着url改变，一般都是locaiton.href+“/#/”+href#后面的值，这样写有一个问题就是在点击浏览器后退按钮时，界面直接...
2019-10-09 19:33:17
3182
转载 升级AndroidStudio后，打包安装APK后闪退
最近因为项目需要，升级了AndroidStudio，并对项目支持的targetSDK做了一次全面升级，但是切换到之前的项目后，打包和安装都没问题，但是在点击APP进入的时候，就出现闪退，后来是通过下面这篇文章解决了问题，分享给大家。有相同问题的小伙伴可以试一下。good luck~https://www.jianshu.com/p/61a206070c46...
2019-07-18 15:18:33
967
原创 vue js引用路径报错解决方案
最近在做项目的时候，需要在index.html中引用js文件，但是一直报Failed to load resource: the server responded with a status of 404。从字面上看，就是路径找不到，但是检查了一圈之后，发现路径没有错误啊。最后在浏览器调试台看到加载出来的文件的路径是这样的，在localhost:8080服务器下，先生成了本地磁盘路径，然后将s...
2019-04-01 15:33:14
4706
原创 vue 出现Uncaught SyntaxError: Unexpected token 解决方案
最近在做vue项目时，需要引入一个第三方的js文件，在index.html中通过以下方式引入JS文件编译后，就报了这个问题。根据广大的网页的思路，导致这一现象的原因可能有以下几种：原因一.引用文件的位置不正确js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言之： 1.assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放...
2019-03-28 15:55:38
70617
5
原创 css drop-shadow使用方法
大家可能都习惯了使用box-shadow来设置盒阴影，但顾名思义，盒阴影一般阴影的投影是一个方形，如果我们遇到其他姓张，想要做阴影效果应该怎么实现呢，比如下面这种？那就要用到drop-shadow啦~drop-shadow滤镜可以给元素或图片非透明区域添加投影。box-shadow: h-shadow v-shadow blur spread color inset;h-shado...
2019-03-21 16:12:01
7863
原创 css中设置多张背景图片
有一些应用场景中，我们需要叠加设置多张图片，一般我们可能是采用img来设置，但还有一种更简单的方法，采用背景属性来设置，css提供了可同时设置多张背景图的属性。语法如下：.bg{ background: url('../img/bg1.png'), url('../img/bg2.png'), url('../img/bg3.png')}为不同的背景图片...
2019-03-21 15:35:12
14268
1
原创 在VUE中使用Lottie动画
使用方法及步骤：1.在webStorm的terminal窗口中下载vue-lottie插件，下载命令：npm install --save vue-lottie2.在main.js文件中引入vue-lottie插件,你可以将其设置为全局组件，也可以在需要使用的时候单独引入第一种：全局引入,在main.js中加入如下代码import lottie from 'vue-lotti...
2019-03-21 14:12:44
10688
8
转载 实现点击3D翻转效果
最近在项目开发中需要实现很多特效，其中一个卡片就是点击后，要3D翻转显示背面信息，再点击再3D翻转回正面。实现代码是参考以下这篇文章：http://www.php.cn/html5-tutorial-389335.html但其中有两个参数我改了一下，因为在移动端，发现这样写效果和图片中的不一致。...
2019-03-20 15:08:57
1323
原创 使div滑动到父元素的指定位置
最近有一个项目需求，需要在界面顶部竖排显示菜单栏，菜单栏底部显示内容，点击菜单栏中的选项，让底部显示的相应内容置于内容显示区的顶部，而不是页面的顶部，这样做的好处是可以不遮盖菜单栏，方便用户操作。说一下实现思路：总体思路：采用js原生的Scroll实现。因为是在vue中实现，引入jquey显得很笨重，所以直接用原生写，代码也是非常简单。第一步，计算父元素div到顶部的高度第二步...
2019-03-13 11:30:03
2289
原创 Vue 从文件中获取文本信息
最近在使用vue做项目的时候，遇到一个需求，界面中需要显示大量的说明文字，为了保持界面的整洁和赶紧，决定采用单独的文件来存储显示信息，然后通过文件读取的方式显示到界面上。刚开始我使用的是File和FileReader对象获取，但是比较气人的是这两个对象是IE浏览器特有的属性，chrome不支持，而且为了安全起见，现在浏览器是不推崇这种做法的，因为很容易造成文件被外部恶意删除或增加内容，安全性太...
2019-03-13 09:41:28
7427
原创 Unexpected token: name (Dom7)
今天在运行vue项目的时候，报了这个异常，异常引起的原因是由于在vue项目中使用了4.0以上版本的swiper,Dom7是swiper4.0+版本的依赖库，所以在编译的时候，因为无法找到dom7这个依赖，就报错了。我看了很多种解决方法：第一种：修改webpack.base.conf.js（在/build目录下）,新增这两句代码,但这个方法对我不起作用，还引入了新的问题。resolve...
2019-03-07 15:15:15
3676
原创 vue-awesome-swiper滑动失效的问题解决方案
最近在做项目的时候遇到这样一个问题，就是在vue项目的不同页面使用了swiper插件后，导致其他界面的swiper插件失效，最终摸索了一天终于解决了。我遇到的情况是这样的，在界面A中，使用这种定义变量式的方式来初始化swiper.var mswiper = new Swiper('.swiper-container', { effect : 'coverflow', ...
2019-03-04 18:03:15
6094
原创 vue post application/x-www-form-urlencoded如何传参
今天在使用axios进行参数获取时，始终获取不到，但是调用postman是正常的，所以初步估计是参数格式不正确，那么正确的应该怎么写呢？一般按照正常的逻辑，我们在传递application/x-www-form-urlencoded时，参数应该这样写，但实际操作中发现一只获取不到参数。 axios.create({ baseURL: 'url', ...
2019-02-27 16:09:27
72631
4
原创 Vue 数组赋值踩过的坑
最近需要在Vue当中完成动态赋值数组操作，从服务器拿到数据后，刷新数组中的数据，但是发现无论使用什么方法都不行，通过打log,发现数据在这里就无法向下执行，而且也没有报任何的异常，最终问题解决，在这里做个记录。Vue中的数组赋值和在普通的JS中赋值还是有所区别。以下操作可以引起界面刷新：push，pop ，unshift，shift，reverse，sort，splice以下操作不会引...
2019-02-27 14:03:36
9013
原创 Vue 实现横向滑动效果 从小到大
最近项目中遇到一个需求，需要实现横向滑动，并且在滑动过程中，中间的大，两边的小，通过参考其他的人代码以及自己的实践，终于做出来啦，给大家做个参考。实现效果如下图：先来说一下实现思路吧：整体思路：采用vue+vue-awesome-swiper完成因为我们的项目是采用vue来做的，所以在经过很多的考量和比较以后，选择了vue-awesome-swiper插件来辅助，从这个名字上也...
2019-02-21 17:38:55
5648
1
原创 Vue 实现带图标的input框
最近由于项目需要，需要实现一个带图标的input框，但一直没有找到一个很好的方法，所以只能自己动手写了。该控件是单独写的，所以可以拿来直接使用。先说一下该控件支持的功能：1.从外部动态传入placeholder的值2.从外部传入图标地址并给图标增加点击事件3.外部监听input的change事件并获取input的输入值，input禁止输入表情元素和特殊字符4.外部可动态设置...
2019-02-20 17:42:37
8100
原创 mint-ui picker 实现省市区县三级联动
实现效果：首先说一下实现思路：1.采用单独的js文件存储省市区数据，可以是json或者js文件，数据可参考我的上一篇博客。2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。3.最好采用单独的组件实现，方便修改和复用。代码：<template> <div class="location...
2019-02-16 18:20:30
2642
2
原创 2018最新版省市区三级联动数据
这个也是我在网上找的相对比较新的数据，提供给大家参考。其中附加了三个方法和四个参数，分别用来获取省的列表，第一个省中包括市的列表以及市中包括的区县的列表，可以直接导出，在想使用的地方直接引用(限于支持export和import属性的版本哦~)为什么这么做？之前在网上看了很多人写的方法，他们大多都是从服务器上获取的数据，数据结构相对简单，获取本身省市区数据结构比较简单，可以通过Objec...
2019-02-16 18:02:42
3268
原创 使用mt-range实现一个数字随着滑动杆变化的效果
最近开发中有一项需求，需要实现数字随着滑竿移动的这样一个效果。对于我来说，我喜欢用最少和最简单的代码来实现看似复杂的功能，所以在这里记录一下我的实现思路和方法，希望有更好的实现方法的小伙伴，可以多多交流~先上效果图(录制GIF图失败，只能上静态图凑活看o(╥﹏╥)o)1.实现思路：使用UI框架：Vue+MintUI通过获取滑竿上的值，将滑竿上的值按照最大值和最小值以及步...
2019-01-24 11:01:47
1547
原创 MintUI mt-range 事件
最近开发中在使用饿了么的移动端UI框架MintUI,但发现这个框架虽然用起来很方便，但是官方给的文档真的有点坑爹，好多属性和调用方法都没给出来，在这里只能自己动手总结啦~Q1.mt-range在Vue中调用后，无法显示的问题？第一次调用的时候就遇到这个问题，而且在网上查了一圈儿也没人回答这个问题，不知道是不是因为大家都没有遇到这个问题。没办法，只能自己动手解决了~其实这个问题解决方法很...
2019-01-24 10:29:33
2003
原创 Webpack打包后报错问题解决办法
最近使用Vue+WebPack进行项目开发，在完成开发后，执行npm run build生成dist文件后，打开index.html，界面一直未加载成功，通过console窗口看到所有资源文件都在报404错误。意思很显然是路径不对，但是检查过后，感觉路径也没有大的错误，后来发现只要其实是一个特别不起眼的错误导致的。这个是引入文件的路径地址，看起来是不是感觉没什么问题，其实是少了一个...
2019-01-08 17:57:35
3576
原创 CSS3 动画实现几个常见的loading效果
最近在学习使用CSS动画，看着一些已经实现的loading，自己动手写了一下，在这里做个记录，方便以后在项目中应用，感兴趣的小伙伴也可以拿去用，由于我的电脑无法录制gif，所以暂时先用图片代替效果吧，以后搞好了再更新。1.图片效果html代码<!DOCTYPE html><html> <head> <meta charset="U...
2018-12-19 17:42:39
959
原创 CSS3新特性学习之Transform Transition Animation总结
1.transition介绍transition是指元素的过渡，指元素从一个状态过渡到另外一个状态。这里的状态要和形态区分开，状态比如说hover,focus,active等都算是元素的状态，所以往往我们会将transition定义在初始状态中，只在最终状态中定义它需要改变的属性，就可以看到过渡效果。transition的相关属性：transition-property:需要实现过渡效...
2018-12-18 15:56:25
447
原创 ES6自定义Symbol.iterator的实例-解决死循环问题
今天学习ES6的Symbol属性，顺便分享一个Symbol.iterator的实例：这是一个用于输出下标为偶数位数值的遍历方法，但是发现这样写以后，直接进入死循环，浏览器都卡死了//自定义Symbol的迭代器Symbol.iteratorvar arr1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];//自定义遍历器，输出index为偶数的数...
2018-12-11 17:04:41
1114
2
原创 使用Hbuilder编写ECMAScript6的语法报错解决方案
最近学习ECMAScript6,采用HBuilder编写，结果报错了，语法无法识别，遇到这个问题的小伙伴可以参考下面这个方法：首先，在项目上右键-属性-语法&框架-Javascript版本，选择ECMAScript 6,然后点击应用，确认。但你会发现你的项目依然在报错，这个时候，需要退出关闭应用后，重启，就可以啦~但是我发现在HBuilder自带的控制窗口依然会有错误...
2018-12-11 13:20:36
2541
原创 Cannot find module 'webpack/bin/config-yargs'解决方案
最近在学习使用命令行创建vue项目，满心欢喜的开始，然后在运行的时候，报了这个BUG:Cannot find module 'webpack/bin/config-yargs'具体的报错信息是这样的：经过查询，是由于安装的webpack和webpack-dev-server版本不匹配导致的，所以首先尝试了在命令行卸载webpack-dev-server，然后安装指定的...
2018-12-07 13:55:31
30023
8
原创 VUE学习笔记(三)-子路由、多路由、嵌套路由、动态路由都是什么鬼？
最近学习到VUE路由这块，发现这块知识点有点多，好容易混乱，我的学习习惯就是先要建立框架，然后再去挨个学习搞懂，所以先来把概念搞搞清楚再说。首先，我们要知道VUE路由创建的是单页面路由。子路由其实和单路由意思是一样的，单路由应该很好理解，因为我们都知道路由是可以一层一层嵌套的，你可以想象一下俄罗斯套娃，就是一个套一个的这种感觉，而里面那个都会一直被外面一个包含着。所以单路由的意思就是只有一...
2018-12-04 17:31:55
5383
原创 多页面与单页面应用的区别
虽然接触web开发有一段时间了，但从头开始构建一个完整的web项目的机会非常少，对于一些概念还很模糊，今天首先来梳理一下在应用开发中，单页面应用和多页面应用的区别。其实从字面意思上理解，就很好理解了。单页面，顾名思义只有一个界面。界面是通过URL来定位的，所以单页面应用从头到尾它的html地址都是不变的，注意哦，是html地址，而不是URL地址，这两者还是有点区别的。html地址是截止...
2018-12-04 16:47:27
7301
原创 VUE学习笔记(二) -computed与methods的区别
最近在学习VUE的时候，发现computed与methods的作用很像，而且一些网站上也说这两种可以互相替换使用，但实际上在用的时候，发现其实这两者之间还是有区别的。computed 计算属性 可用于定义属性的setter和getter方法，一般如果不特意强调的话，申明出来的会被自动当做属性的getter方法调用，也就是说computed中虽然定义的时候，形式和方法很像，其实定义的是...
2018-11-28 14:00:49
1099
原创 VUE学习笔记(一) --对VUE作用域的一些思考
我学习有一个习惯，就是在用的时候一定要搞清楚一些基本问题，要不然稀里糊涂的，脑子里没有一根清晰的线，总感觉是一团乱。所以学习笔记里不会有什么语法之类的，这些在各大教程里都讲的很清楚，在这里只记录一些我自己的思考和理解，如果有不对的地方，欢迎路过的大神帮忙指点。1.VUE中，作用域及作用范围？ 使用Vue来开发HTML时，作用域与VUE对象的定义密切相关，一个html中，可以有多个VU...
2018-11-19 16:47:14
3557
原创 使用Jquery在UL中添加或删除指定LI元素
今天看了很多帖子，对于元素的添加和删除的方法都很多，但我的要求就是用最简单的代码实现功能，不喜欢太复杂的内容，所以通过自己的实践，写了一个简单的demo,直接上代码，为下一个项目做准备<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><meta name=&
2018-11-19 16:02:21
5239
1
原创 Android Studio如何在Logcat的搜索栏设置多个过滤条件
有时候想要同时查看两个标识符打印出的内容，一直没找到合适的方法，今天终于用正则表达式解决了我的问题，在此记录一下。一些方法是通过在logcat窗口添加多个过滤条件，来过滤，我觉得这样虽然能够解决我的问题，但是很麻烦，我需要来回切换看，不能实时比较结果。所以想在同一个窗口中，仅查看这两个标签的打印，就想到了使用正则表达式。先来了解一下正则表达式在android studio中的书写规则：...
2018-11-16 14:24:08
7907
原创 使用JQuery实现ul中添加LI和删除指定的Li元素
最近为了实现这个简单的功能也是看了很多的内容，终于找出了看起来简单易实现的方法，我觉得能用最简洁的代码实现，就不要写的那么复杂，看也看不懂。先码着，为后面的项目做做准备。<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><meta name="ke
2018-10-23 16:53:49
18086
8
转载 android中px,sp,dp之间相互转化的工具类
在平时开发中，难免遇到需要在代码里对尺寸进行转化的问题，在这里总结一下，方便以后调用public class DensityUtil { /** * dp转换成px */ private int dp2px(Context context,float dpValue){ float scale=context.getResources()....
2018-10-16 15:53:49
162
原创 Android集成html中调用拍照功能拍照后无法上传问题分析解决
最近在做项目的时候遇到一个很诡异的问题，后来找到原因以后，发现原因很简单，修改很easy,不多大多数情况下我们都容易忽略。问题描述：使用Android手机中的html界面调用拍照功能（未使用第三方插件），发现照片无法传上去，但是使用从相册选择功能，就可以正常上传照片。后来我把上次通过拍照存储的照片，通过从相册上传的方式去上传，发现也传不上去。刚开始，我以为是因为路径的原因，图片路径无访问权...
2018-09-11 14:44:02
2097
原创 Failed to load D:\Android-SDK\sdk\build-tools\26.0.2\lib\dx.jar
最近由于升级Android Studio3.0版本，下载了27.0.3和26.0.2版本的build-tools之后，使用Eclipse编译设备的时候，报出以下问题。解决方法也很简单，就是在工程的project.properties文件夹下，加入以下这句代码，再重新运行就可以正常运行了。sdk.buildtools=23.0.2...
2018-09-05 18:07:45
1536
原创 android SDK buid tools 27.0.3版本离线下载
哈哈，没错，我就是这么乐于助人~免费分享 buid tools 27.0.3的下载地址，我自己也是花了5个积分买的可以点击下面的链接在百度云盘下载哦~链接：https://pan.baidu.com/s/1gZoXpiGaFN2G_mSWH950zg 密码：aofj使用方法可以看我的上上篇博客~...
2018-09-04 19:07:00
3847
4
原创 gradle-4.4-all.zip下载地址分享
哈哈，没错，我就是这么乐于助人~免费分享gradle-4.4-all.zip的下载地址，我自己也是花了5个积分买的可以点击下面的链接在百度云盘下载哦~链接：https://pan.baidu.com/s/1fXEhXbL3PKj3owB7K8NMPw 密码：im1y ...
2018-09-04 19:04:58
7755
17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人