- 博客(100)
- 收藏
- 关注
RSS订阅原创 H5 项目快速开发模版 vue-template-mobile
本人从事前端开发工作已有四年，这期间做的大部分都是移动端 H5 项目，这几年来大大小小的 H5 项目也做了有十几个了。对于移动端 H5 项目来说，有些功能和配置其实是通用的，基本上每个项目都会用到，比如说：微信授权及分享、UI 组件库、各种小组件等。基于我平时比较喜欢总结以及为了以后开发 H5 项目省事的目的，就有了这个项目（主要就是为了偷懒，，，）项目地址：https://github.com/zgh0711/vue-template-mobile这个项目是啥Vue 移动端新项目模板，封装了 H5
2020-09-23 22:55:20
3090
1
原创 结合面试题学习 JS 词法作用域与预解析
在面试题之前先做一下名词解释词法作用域什么是作用域作用域就是指一个变量可以被使用的范围. 即从什么地方开始可以被访问到. 到什么地方结束, 不能在访问到, 这个范围称为变量的作用域.什么是块级作用域块级作用域就是使用代码块来限定变量的使用范围.在 js 中( ES5 以前 )没有块级作用域.在 es6 中引入了 let 命令, 来代替 var 声明变量. 而 let 命令声明的变量就具有块级作用域.所谓的块级作用域就是从变量声明开始, 到变量所在的最近的(最小的)花括号结束为止.js 中的词法
2020-08-30 21:57:27
479
原创 浏览器缓存相关知识总结
缓存会根据请求保存输出内容的副本，例如 页面、图片、文件，当下一个请求来到的时候:如果是相同的 URL，缓存直接使 用本地的副本响应访问请求，而不是向源服务器再次发送请求。因此，可以从以下 2 个方面提升性能。减少相应延迟，提升响应时间减少网络带宽消耗，节省流量我们用两幅图来了解下浏览器的 缓存机制。1、浏览器第一次请求第一次请求2、浏览器再次请求再次请求从以上两幅图中，可以清楚的了解浏览器 缓存 的过程：首次访问一个 URL ，没有 缓存 ，但是，服务器会响应一些 header 信息
2020-08-30 16:40:15
636
原创 Vue 爬坑之旅 -- 修改了数据，界面为啥没反应？
<template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{ userInfo.officialAccount }}
2020-08-30 11:16:36
3163
原创 H5 定位爬坑过程记录
https不要在 Chrome 测试精确定位没有精确定位需要的话可以使用城市信息查询<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=9721dba07cd10df7137a1167f290edf3'></script> <script src="/...
2020-08-29 19:47:37
216
原创 Vue 爬坑之旅 -- 给页面加上背景音乐并直接播放
在很多的 H5 推广或者宣传页面都有背景音乐，并且基本上进入页面后背景音乐都是自动播放的，最近我也接到了这么一个需求（虽然我觉得这个需求很 Low，没什么必要，但架不住 PM 的硬性要求）。要想在页面上播放背景音乐其实很简单，只需要一个 audio 标签即可，基本用法如下：<audio ref="audio" src="https://img.youpenglai.com/penglai...
2020-08-29 19:34:58
3994
2
原创 Vue 爬坑之旅 -- 在vue单页应用中利用 H5+ 实现扫码功能
最近做了个项目，项目本身没什么复杂的，就是其中有一个功能是要求调用手机摄像头扫描并识别二维码，最后还要打包成一个App。基于以上的需求，最后决定采用的技术方案是前端页面用 vue 来写，然后涉及到扫码和打原生App的话就用 HBuilder 的 wap2app 的方式，综合时间和开发成本上的考虑，这种方案是最合适的。前端界面没什么说的，这里要说的是在实现扫码功能和 App 打包的时候会碰到的坑...
2019-11-01 15:19:09
6277
1
原创 H5 实现横向滚动的方法及需要注意的地方
现在的前端开发中，有许多页面上有设计了横向滚动，可以说横向滚动是一个很常见的场景，今天就来说说横向滚动怎么实现以及需要注意的问题。实现横向滚动要实现横向滚动，方式不止一种，这里我只说最简单的一种，其它太复杂的也没说的必要，其实只需要三个 CSS 属性就能搞定/*横向滚动*/.scroll-x{ display: flex; flex-wrap: nowrap; overflow...
2019-10-25 14:51:41
6955
原创 写 CSS3 动画时需要注意的几个点和几个动效 Demo
最近项目中需要做一组宣传的页面，这几个页面上全都是静态图片再加上各种动画，为了做出符合预期效果的页面，我也是恶补了一下 CSS3 动画相关的知识，最后做出来的效果也是达到了设计师的要求。动画相关知识如果以前没有接触过或者写过 CSS 动画，有些动画相关的知识还是需要学一下的，这里我并不会讲这些基础知识。这些资料网上有很多，也都写的很好，这里我贴出一些写的不错的分享出来。CSS3 动画基础C...
2019-08-22 13:25:05
571
原创 带输入框的页面在进行布局的时候需要注意的几个点
带输入框的页面在平时开发的时候经常会碰到，最常见的比如登录，注册等页面。今天就拿一个基本的登录页面来讲下在给这类页面做布局的时候需要注意的几个问题。1，靠近底部或者固定在底部的元素不要使用 fixed，absolute 等定位方式如果使用了 fixed ，absolute 等方式将元素固定在底部，在 Android 中，当键盘弹起时，你会发现固定在底部的元素跟着键盘一起被顶上去了，顶上去了不说...
2019-07-05 09:39:46
1105
原创 Vue 爬坑之旅 -- 双层 v-for 中使用 v-model 绑定 input 时碰到的坑
双层v-for中使用 v-model时碰到的坑处理数据时不能直接传对象，要么用深拷贝，要么转为json再处理
2019-07-04 11:51:44
6766
2
原创 Vue 爬坑之旅 -- 动态合成分享海报时需要注意的几个问题
前段时间有写过一篇生成分享二维码然后在和背景图一起合成成为一张海报的文章，Vue 爬坑之旅 – 生成分享二维码和合成分享海报的方法及踩坑历程，当时这个功能是用 qrcode 先生成二维码然后将二维码用定位的方式放在背景图片上面，然后使用 html2canvas 来将二维码和背景图合成为一张分享海报。在上周又接到了一个差不多的需求，也是要生成一张分享海报，这次的不同点在于出了二维码之外，还有其他的...
2019-05-29 16:56:56
1060
原创 Vue 爬坑之旅 -- 用自定义指令解决 IOS 12 中键盘收起后页面底部有留白的问题
在 IOS 12 的系统中，在输入框中输入完内容，当点击键盘上的完成按钮时，会发现页面底部会有一大段区域变成了白色的，高度就是原来弹起的键盘的高度，这时候如果将页面上下滑动下，会发现这块空白区域又会消失，页面也恢复了正常。当初第一次碰到这个问题时，真的是一脸懵逼，这特么是什么情况。多方查找后发现原来这不是个案，很多人都碰到过，而且也有各种各样的解决方案。看了很多文章后发现，解决思路基本都是一样...
2019-04-26 17:21:08
2570
3
原创 Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发，微信授权和微信分享基本是必备功能，昨天将微信分享的相关功能和踩坑过程做了一个总结，今天就来说下微信授权的功能具体到 vue 项目中该要怎么做。Vue 爬坑之旅 – history 路由模式下微信分享爬坑总结准备工作在开始码代码之前需要先做一些准备工作，其实也是做微信分享需要做的准备工作，申请公众号，绑定域名，申请 AppId 等。这些事情做完之后还需要做的事情就是先通读一...
2019-04-12 10:35:32
7782
5
原创 Vue 爬坑之旅 -- history 路由模式下微信分享爬坑总结
不要在路由钩子里面做签名，url 会不对wxShare 封装微信分享JSSDK-invalid signature签名错误的解决方案微信分享链接出现config:invalid signature错误的解决方法...
2019-04-11 17:47:15
3129
4
原创 Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点
要注意页面布局，不要限制页面滚动位置vue中 进入详情页记住滚动位置（keep-alive）vue缓存页面返回到指定滚动位置移动端基于vue-router的滚动位置记录(keep-alive)vue-router在返回时返回到上次滚动位置组件缓存问题另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新...
2019-04-03 11:04:45
8748
4
原创 Vue 爬坑之旅 -- 生成分享二维码和合成分享海报的方法及踩坑历程
最近的项目开发中有这样一个需求：每个用户有一个邀请链接，通过这个邀请链接邀请其他人注册要将邀请链接做成一个二维码，并放到一个海报背景上分享邀请海报给被邀请人，扫描二维码注册需求比较明确，这篇文章就来说下需求里面的第二步是如何实现的以及实现过程中需要注意的一些问题。如何生成二维码如今的社会中，二维码随处可见，其实二维码就是将一段文字信息用特定的算法规则计算之后以图片的形式展示出来。基...
2019-03-06 10:28:51
6163
1
原创 CSS 将文本固定为多行显示，溢出时显示省略号的实现方式及注意要点
平时在开发时，经常会有要求让文字单行或多行显示，多余的文字用省略号代替的需求。文本单行显示很好解决，用如下的 CSS 属性就行了： overflow: hidden; white-space: nowrap; text-overflow: ellipsis;那么多行文本的要怎么处理呢，针对多行文本，有二种处理方式，首先就是对于 webkit 内核的浏览器，处理起来比较简单，使用如...
2019-01-18 15:41:44
2340
原创 Vue 爬坑之旅 -- 解决 IOS 上滚动穿透以及由此引起的坑和爬坑过程
以前做 Android 的时候觉得 Android 适配好烦人，各种厂商，各种版本，各种机型都需要做适配，烦的一笔。现在做 H5 了，也还是要面对适配的问题，不过现在是反过来了，写好的代码在 Android 上跑的好好的，但是到了 IOS 上可能会出现各种问题，现在做适配基本都是针对 iOS 来做的了。IOS 上要做的适配有很多，比如 1px ，图片，fixed布局，点击延迟，滚动穿透等等，各种...
2018-11-29 16:46:35
5301
3
原创 Vue 爬坑之旅 -- Mint-UI 中使用 lazyload 做图片懒加载以及结合 OSS 做图片加载优化
博客已经有段时间没有更新文章了，有点惭愧，，，因为跳到了新公司，接手他们原先的项目，老代码着实是让人不敢恭维，没有开发规范就算了，还到处都是逻辑漏洞，每次我改个什么东西基本都能发现一些其它的问题，简直是无力吐槽了。So，接手了项目之后，要做的事情非常多，也一直没有抽出时间来总结工作中碰到的问题，今天总算是有点空余时间，赶紧撸一篇。现在的互联网产品都离不开图片，几乎每个产品里面，图片都会有一定...
2018-11-16 14:33:39
3811
原创 前端面试总结 -- 网络基础之 HTTP 和 HTTPS
基本概念HTTP：超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议[1]。HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI...
2018-08-10 18:06:10
2588
原创 前端面试总结 -- CSS 中 display 的 block，inline，inline-block 这三个属性有什么区别
这是一个考察 CSS 基础的面试题，话不多说，先上代码<!DOCTYPE html><html lang = "en"><head> <meta charset = "UTF-8"> <title>Title</title></head>&am
2018-08-09 14:39:37
2313
原创 VUE 爬坑之旅 -- vue 项目中将简体转换为繁体
今天接到一个需求说要将现在项目里面的简体文字全部转换为繁体的，这需求手动去干肯定不现实，必须得找一个省时省力的办法。Google 一圈下来，发现大部分解决方案都是好几年前 JQuery 时代的，是不适合现在 vue 项目的。那么有没有 vue 项目中好用的解决方案呢？在又找了一圈之后，终于在 github 的一个角落里面发现这么一个 https://github.com/maoxiaoqu...
2018-07-30 18:41:23
5471
5
原创 ES6 学习 -- Promise
ES6 中新增了很多很好用的新特性，Promise 就是其中之一，现在也得到了广泛的运用，今天就来学习下 Promise 。 在老的 JS 里面，异步函数的处理是一个很麻烦的事情，而且一不小心还会陷入多重回调嵌套的 ‘回调地狱’，Promise 就是为了解决这个问题而诞生的。 这篇文章是我在学习 Promise 时做的笔记，学习资料来源 Promise 入门，这是慕课网的一个视频课程，另外还有...
2018-06-21 18:37:11
402
原创 VUE 爬坑之旅 -- 在 VUE 项目中使用 ECharts 画 K 线图和面积图，并且可切换
现在的项目中需要做一个K线图的功能，花了几天时间查资料，读文档，总算是基本搞定了，下面把这过程中一些需要注意的点记下来，以备不时之需。需要达到的效果如下： 说到做图表，现在的成熟的解决方案就是百度的 ECharts 了，功能强大齐全，文档详细，用的人多，碰到问题也好解决。老规矩，先上文档 ECharts 文档，文档内容很多，全部看一遍得花很多时间，，，看的我头晕，，，上周，饿了么团队...
2018-06-07 11:55:23
11772
6
原创 VUE 爬坑之旅 -- 封装一个简单的获取本地图片并压缩上传的组件
平时项目开发中，获取本地图片并压缩上传是一个很常见的需求，最典型的就是修改用户头像功能，今天就来封装一个可以到处通过的组件。首先分析需求，要达到什么效果呢？点击后打开文件选择器，选择文件对获取的图片文件压缩前端能够预览获取到的图片将压缩后的图片上传给服务器分析下来，大致就是上面的几点，那么再深入分析一下，这个图片预览上传的功能可能很多地方都需要用，并不只限于修改头像这一个地方...
2018-06-01 15:52:13
3480
6
原创 VUE 爬坑之旅 -- axios 封装
网络请求是每个项目都需要具备的功能，现在的 vue 项目中基本都是使用的 axios 作为网络请求库，老规矩，先上一份 axios中文文档 axios 本身已经封装的很好了，直接使用也是没问题的，为了在实际开发中更好更方便的使用，需要对它进行一下二次封装。二次封装要达到的效果： 1. 请求开始时，弹出加载动画，如超时，弹出提示并结束动画 2. 正常拿到请求结果后结束动画， 3. 如请...
2018-05-24 19:11:33
4100
2
原创 VUE 爬坑之旅 -- 全局路由拦截，判断及保存登录状态
在实际的商业项目中，基本都会有登录功能，然后有些页面是登录之后才能查看的，没有登录的话会先跳转到登录页，登录成功再返回并刷新数据，几乎所有的应用都是采用的这一套逻辑，那么这一套逻辑在我们的 vue 项目中要怎么实现呢？vue 项目中，页面之间的跳转是通过路由实现，要想实现上述的逻辑就必须得在路由上面下文章，在官方路由 vue-router 中，有导航守卫这么个东西，还不知道的先看下 官方文档...
2018-05-24 17:53:38
10318
1
原创 VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件，详情见 VUE 爬坑之旅– 如何对公共JS，CSS进行统一管理，全局调用 。这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 JS 代码，这种 JS 文件可以用我上面那篇文章里面的方法引入，使用方法跟以前一样。但是现在是新的时代，还是用以前的老东西未免有点过时了，而且很多以前的那种 JS 文件其实都是要依赖 JQuery...
2018-05-24 12:03:57
11497
原创 H5 布局 -- 让容器充满屏幕高度或自适应剩余高度
在前端页面布局中，经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。一般这时候都会想当然的使用 height:100% 这样的 CSS 来写。这样写的话，当容器内内容很多的时候是没有问题的，可以达到预期的效果，但是如果容器内内容比较少，不足以撑起足够的高度的话，这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢？让容器高度充满这个屏幕在容器内容很少的情况下，要想让这个容器充...
2018-05-15 10:49:12
37678
9
原创 VUE 爬坑之旅-- eventBus 事件总线的基本使用和重复触发事件问题的解决
在单页应用中，在 A 页面中触发事件，然后在 B 页面中对这个事件进行响应是一个很常见的需求，那么当有这种需求的时候要怎么实现呢。有两种方案可以实现： 1. 使用 vuex 状态管理，当触发事件时，改变 vuex 中的状态，然后在需要响应事件的地方用 watch 监听这个状态，当状态改变时，响应事件。 2. 使用 eventBus 事件总线，当触发事件时，发送一个通知出去，在需要响应的地方接收...
2018-05-11 17:53:42
14819
2
原创 VUE 爬坑之旅-- 路由传参的几种方式及注意点
在 VUE 项目中，页面之间跳转都需要使用路由，而路由在跳转的时候需要传递各种参数也是一个很常见的需求，那么 VUE 中路由传参有几种方式呢？方式一：直接调用$router.push 实现携带参数的跳转 showDetail(id) { this.$router.push({ path: `/detail/${id}`, })...
2018-05-09 15:32:23
9395
原创 VUE 爬坑之旅--优雅的使用 keep-alive
vue 项目中，路由缓存是一个常见的需求和功能，官方文档里面有说到，如果要保存某个组件的状态或避免重新渲染，可以使用 keep-alive 组件，文档里面说的比较简单，就只是用 keep-alive 组件包裹某个或几个组件，这样做的话功能是可以实现，但未免不够优雅（如果我有很多组件都需要做缓存处理，或者某个需要缓存的组件在很多地方都要用到，难道需要在每个使用的地方都写上 keep-alive 吗？...
2018-05-02 21:15:18
1215
原创 VUE 爬坑之旅-- 给 v-html 渲染出的内容添加样式
在 vue 中，如果要渲染一段 html 内容，可以使用 v-html 标签，渲染出来的内容会带有原来的页面标签和样式，如果想要修改内容里面的样式要怎么做呢？有的人会说，这还不简单，直接在 style 里面写相应的样式不就完了吗，实际实践过会发现，根本就不行，如果像原来那样直接写的话是根本不起作用的，而且进入调试模式会发现，在每个 class 里面，vue 都给加上了 data-xxxxx 的...
2018-05-02 20:07:07
9257
4
原创 VUE 爬坑之旅--class 动态绑定的几种写法
在 vue 中，class 动态绑定是一个很常见的需求，平时的使用频率也很高，今天就来说说 class 绑定的几种写法。首先，放出镇楼神器：官方文档文档里面第一个说的是对象语法，也就是在 data 对象里面定义一个属性，然后在 :class 中引入这个属性，这样当属性变化的时候，class 就会相应的变化，而且还可以使用计算属性来处理复杂的逻辑。 特性是很好，但是我在实际项目开发的时候基...
2018-05-02 15:31:47
6766
2
原创 VUE 爬坑之旅-- 用 Vuex 状态管理来控制底部导航栏的显示隐藏
在做 APP 类项目开发的时候，有一个很常见的需求就是 APP 通常有一个底部导航，点击导航的不同 tab 要切换到不同的界面，在这些通过导航切过去的界面上是需要显示底部导航来让用户方便操作的。 除了这些带导航的页面之外，还有一些独立的页面是不需要底部导航的，比如说注册，登录等页面。那么怎样能够比较方便的控制底部导航的显示和隐藏呢？这就可以用到 Vue 的状态管理插件 Vuex 了，关于 Vue...
2018-03-29 11:43:37
10423
6
原创 Vue 爬坑之旅--嵌套路由默认选中第一个子路由，并且主路由和子路由都处于激活状态
在实际开发中，嵌套路由经常会用到，基本用法也很简单，今天要说的不是嵌套路由怎么用，而是在用的过程中发现的二点小细节的处理。嵌套路由中默认选中第一个子路由在一个这样的界面中，底部的五个 tab 显然应该是五个路由，现在在首页这个路由下面又有三个 tab，那么这三个 tab 就应该使用子路由来实现，路由代码如下： { path: '/home',...
2018-03-27 17:33:20
20284
6
原创 Vue 爬坑之旅--父组件传入图片路径和路由给子组件
在实际开发中，经常会碰到一种情形：*父组件中有好几个列表形式的子组件，要把这些子组件正确的渲染出来，就必须从父组件中传入数据给子组件，让子组件通过 v-for 去渲染。 有的时候，这些数据里面可能会包含有静态的图片路径，还可能会有路由（最典型的例子就是APP首页里面的导航图标，需要显示出一个图片，点击图片需要跳转到另外的页面）* 比如下面这种 现在的需求是这几个导航图标都是本地的静态...
2018-03-27 14:20:19
15723
1
原创 VUE 爬坑之旅-- Mint-ui 按需引入
今天开项目，决定使用 Vue 来进行开发，遂开始寻找 Vue 相关的 Ui 组件库，找了一圈看下来，Github 上 star 数最高的二个分别为 Mint-ui 和 Vux，分别扫了他们的二维码体验了下，发现 Vux 在界面切换的时候不流畅，所以就剩下 Mint-ui 这一个选择了。下面开始今天的爬坑之旅。坑一：npm 5.8.0在新建项目的时候发现 npm 有新的版本升级，就顺手升级了...
2018-03-26 16:41:45
10023
1
原创 一些比较有用的 Chrome 快捷键
Chrome 天天都在用，但是基本都是用鼠标操作，最近感觉有些操作用鼠标非常不方便，所以就找了下它的快捷键，这些都是在官方文档上面找到的，因为看官方文档是需要翻墙的，大部分时候不太方便，所以就把它记录下来，下次有需要的时候好查。标签页和窗口 操作 快捷键 打开新窗口 Ctrl + n 在无痕模式下打开新窗口 Ctrl + Shift + n 打
2018-01-17 12:10:58
15623
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人