心若向阳，无谓悲伤的博客

最近在做开发的过程中，需要对前端界面进行性能检测和优化，使用的是lighthouse。Lighthouse是Google开源的一个自动化工具，用于改进网络应用的质量，适用于网页版和移动端，比如找出哪些资源适合延迟加载，以及可以在初始页面加载中节省多少流量。能生成一个包括页面性能、PWA（Progressive web apps，渐进式 Web 应用）、可访问性（无障碍）、最佳实践、SEO的报告清单提供参考。一、lighthouse的安装Lighthouse是Chrome提供的一个扩展工具，.

最近在做微信公众号开发，需要用到微信的扫码功能，所以集成了相应的功能及相应的JS文件后，点击调用一直报这个问题：Error in v-on handler: "TypeError: _.mapObject is not a function"首先怀疑是使用到的_变量没有引入进来，引入后还是在报同样的错误。在浏览器中打断点调试，发现当加载这个方法的时候，_这个变量指向了lod...

最近在开发时，遇到一个需求，在界面内有一个tabbar,点击其中一个，需要使界面跳转到对应位置，一般能想到的办法就是采用锚 链接实现。<a href="#aaa"></a> 大家都知道，这样写，我们在点击链接时，会伴随着url改变，一般都是locaiton.href+“/#/”+href#后面的值，这样写有一个问题就是在点击浏览器后退按钮时，界面直接...

最近因为项目需要，升级了AndroidStudio，并对项目支持的targetSDK做了一次全面升级，但是切换到之前的项目后，打包和安装都没问题，但是在点击APP进入的时候，就出现闪退，后来是通过下面这篇文章解决了问题，分享给大家。有相同问题的小伙伴可以试一下。good luck~https://www.jianshu.com/p/61a206070c46...

最近在做项目的时候，需要在index.html中引用js文件，但是一直报Failed to load resource: the server responded with a status of 404。从字面上看，就是路径找不到，但是检查了一圈之后，发现路径没有错误啊。最后在浏览器调试台看到加载出来的文件的路径是这样的，在localhost:8080服务器下，先生成了本地磁盘路径，然后将s...

最近在做vue项目时，需要引入一个第三方的js文件，在index.html中通过以下方式引入JS文件编译后，就报了这个问题。根据广大的网页的思路，导致这一现象的原因可能有以下几种：原因一.引用文件的位置不正确js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言之： 1.assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放...

大家可能都习惯了使用box-shadow来设置盒阴影，但顾名思义，盒阴影一般阴影的投影是一个方形，如果我们遇到其他姓张，想要做阴影效果应该怎么实现呢，比如下面这种？那就要用到drop-shadow啦~drop-shadow滤镜可以给元素或图片非透明区域添加投影。box-shadow: h-shadow v-shadow blur spread color inset;h-shado...

有一些应用场景中，我们需要叠加设置多张图片，一般我们可能是采用img来设置，但还有一种更简单的方法，采用背景属性来设置，css提供了可同时设置多张背景图的属性。语法如下：.bg{ background: url('../img/bg1.png'), url('../img/bg2.png'), url('../img/bg3.png')}为不同的背景图片...

使用方法及步骤：1.在webStorm的terminal窗口中下载vue-lottie插件，下载命令：npm install --save vue-lottie2.在main.js文件中引入vue-lottie插件,你可以将其设置为全局组件，也可以在需要使用的时候单独引入第一种：全局引入,在main.js中加入如下代码import lottie from 'vue-lotti...

最近在项目开发中需要实现很多特效，其中一个卡片就是点击后，要3D翻转显示背面信息，再点击再3D翻转回正面。实现代码是参考以下这篇文章：http://www.php.cn/html5-tutorial-389335.html但其中有两个参数我改了一下，因为在移动端，发现这样写效果和图片中的不一致。...

最近有一个项目需求，需要在界面顶部竖排显示菜单栏，菜单栏底部显示内容，点击菜单栏中的选项，让底部显示的相应内容置于内容显示区的顶部，而不是页面的顶部，这样做的好处是可以不遮盖菜单栏，方便用户操作。说一下实现思路：总体思路：采用js原生的Scroll实现。因为是在vue中实现，引入jquey显得很笨重，所以直接用原生写，代码也是非常简单。第一步，计算父元素div到顶部的高度第二步...

最近在使用vue做项目的时候，遇到一个需求，界面中需要显示大量的说明文字，为了保持界面的整洁和赶紧，决定采用单独的文件来存储显示信息，然后通过文件读取的方式显示到界面上。刚开始我使用的是File和FileReader对象获取，但是比较气人的是这两个对象是IE浏览器特有的属性，chrome不支持，而且为了安全起见，现在浏览器是不推崇这种做法的，因为很容易造成文件被外部恶意删除或增加内容，安全性太...

今天在运行vue项目的时候，报了这个异常，异常引起的原因是由于在vue项目中使用了4.0以上版本的swiper,Dom7是swiper4.0+版本的依赖库，所以在编译的时候，因为无法找到dom7这个依赖，就报错了。我看了很多种解决方法：第一种：修改webpack.base.conf.js（在/build目录下）,新增这两句代码,但这个方法对我不起作用，还引入了新的问题。resolve...

最近在做项目的时候遇到这样一个问题，就是在vue项目的不同页面使用了swiper插件后，导致其他界面的swiper插件失效，最终摸索了一天终于解决了。我遇到的情况是这样的，在界面A中，使用这种定义变量式的方式来初始化swiper.var mswiper = new Swiper('.swiper-container', { effect : 'coverflow', ...

 今天在使用axios进行参数获取时，始终获取不到，但是调用postman是正常的，所以初步估计是参数格式不正确，那么正确的应该怎么写呢？一般按照正常的逻辑，我们在传递application/x-www-form-urlencoded时，参数应该这样写，但实际操作中发现一只获取不到参数。 axios.create({ baseURL: 'url', ...

最近需要在Vue当中完成动态赋值数组操作，从服务器拿到数据后，刷新数组中的数据，但是发现无论使用什么方法都不行，通过打log,发现数据在这里就无法向下执行，而且也没有报任何的异常，最终问题解决，在这里做个记录。Vue中的数组赋值和在普通的JS中赋值还是有所区别。以下操作可以引起界面刷新：push，pop ，unshift，shift，reverse，sort，splice以下操作不会引...

最近项目中遇到一个需求，需要实现横向滑动，并且在滑动过程中，中间的大，两边的小，通过参考其他的人代码以及自己的实践，终于做出来啦，给大家做个参考。实现效果如下图：先来说一下实现思路吧：整体思路：采用vue+vue-awesome-swiper完成因为我们的项目是采用vue来做的，所以在经过很多的考量和比较以后，选择了vue-awesome-swiper插件来辅助，从这个名字上也...

最近由于项目需要，需要实现一个带图标的input框，但一直没有找到一个很好的方法，所以只能自己动手写了。该控件是单独写的，所以可以拿来直接使用。先说一下该控件支持的功能：1.从外部动态传入placeholder的值2.从外部传入图标地址并给图标增加点击事件3.外部监听input的change事件并获取input的输入值，input禁止输入表情元素和特殊字符4.外部可动态设置...

实现效果：首先说一下实现思路：1.采用单独的js文件存储省市区数据，可以是json或者js文件，数据可参考我的上一篇博客。2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。3.最好采用单独的组件实现，方便修改和复用。代码：&lt;template&gt; &lt;div class="location...

这个也是我在网上找的相对比较新的数据，提供给大家参考。其中附加了三个方法和四个参数，分别用来获取省的列表，第一个省中包括市的列表以及市中包括的区县的列表，可以直接导出，在想使用的地方直接引用(限于支持export和import属性的版本哦~)为什么这么做？之前在网上看了很多人写的方法，他们大多都是从服务器上获取的数据，数据结构相对简单，获取本身省市区数据结构比较简单，可以通过Objec...