- 博客(62)
- 收藏
- 关注
RSS订阅原创 web前端常用调试工具
当我们写 webapp 或者 移动端H5网页时，要在手机上调试并不容易。alert：很早之前的调试办法（已被抛弃）vconsole：是2016年由微信公众平台前端团队推出（目前大量使用）eruda：2017年推出（目前大量使用）
2023-07-30 15:55:51
459
原创 vscode实用配置、常用插件
在Files: Auto Save Delay中配置延迟保存的时间。在Files:Auto Save中 选择afterDelay。文件--首选项--设置--输入“自动保存”-
2023-07-09 11:33:08
6357
原创 vue-router实现history模式配置
一：概述vue-router可以设置两种模式：hash和historyconst router = new VueRouter({ mode: "hash", // mode: "history", routes});如果使用hash模式，一般无需特殊配置；但如果要使用history模式，则前端和服务端要做一定的设置；使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务
2022-02-09 16:11:46
17071
3
原创 手机端兼容性总结
一、iphone手机上keyup事件时灵时不灵问题描述：手机端页面有个input输入框，获取焦点时软键盘弹起，此时点击【搜索】按钮，时而有效时而无效，出现该问题的机型：iphone8、11、xr、se等版本。原因分析：......解决方案：使用keydown或者keypress事件代替即可。二：iphone手机慎用固定定位（position:fixed）问题描述：比如一个搜索页面要在顶部固定搜索框，通常想法是把input框用固定定位将其布局到页面顶部，但是此时会出现个现象，当手指下拉页面
2020-08-18 22:41:48
337
原创 vue路由系统mode的hash和history的区别及用法
环境：vue2 + vue-cli3;目标：实现用node后台部署history路由模式的vue项目；一：vue路由模式vue的路由有两种模式--hash和history，二者该如何选择，对比如下:二：hash模式......待完善三：history模式后台：node + express建一个文件夹，例如：demo，进入demo文件夹中，创建一个server.js文...
2020-05-03 23:03:54
1122
原创 浏览器存储方案
一：概述在前端开发中，经常要用到浏览器存储，浏览器存储有如下作用： 1.可有效减少前后端交互； 2.可以实现跨页面传值；二：浏览器端存储方案1.cookie Cookie 是服务器保存在浏览器的一小段文本信息。浏览器每次向服务器发出请求，就会自动附上这段信息。有些开发者使用 Cookie 作为客户端储存。这样做虽然可行，但是并不推荐，因为 Cookie 的...
2020-04-06 10:56:40
431
原创 vue项目使用mock数据的几种方式
以下讲解基于vuecli3.0创建的项目首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。 3.0 移除了 config、build 等配置目录，如果需...
2020-02-22 18:34:12
2371
原创 实现手机端调试页面
1、在vscode中安装 Live Server 插件2、安装成功后，vscode右下角会有 Go Live 标识点击3、cmd ipconfig 查询自己电脑的ip地址4、复制地址替换端口前的地址5、把地址发送到手机端，手机端点开即可预览...
2019-12-24 16:33:46
11996
原创 微信小程序开发坑总结
1、background图片url不能为本地图片；2、wx.request()请求，当methods:''POST时，需要同步设置header的"content-type"为"application/x-www-form-urlencoded"；3、canvas 绘图在安卓手机出现绘图，但并没有按照原设定参数绘制，这种现象时有时无，这种问题出现的概率在安卓设备上很大；解决方法：使用惰性...
2019-09-26 16:35:31
441
原创 有关页面跳转
实现跳转的方式大概有如下几种：<body> <div>...b页面...</div> <input type="text" placeholder="请输入..."> <div> <a href="/a.html">[a标签]跳转到a页</a> </div...
2019-08-21 10:23:19
213
原创 css相关
一、单位css可用单位可分为绝对单位和相对单位。1.1---绝对单位绝对单位：px，pt，pc，cm，mm，in；css中的绝对单位大小固定，显示效果不受到外界因素影响，但这种单位多不适用于前端开发，因为现在的web页面显示设备尺寸五花八门。绝对单位，前端常用的是px，其它的绝对单位基本用不到。px：像素，全称pixel，指的是一张图片中最小的点，或者是计算机屏幕中最小的点...
2019-07-19 16:19:08
162
原创 实现textarea标签高度随内容自动变化
默认情况，textarea标签的高度是不会随文本内容自动撑开的，即其高度固定，高度过多时会使textarea标签出现滚动条；但是有时候会有需求：实现textarea标签高度随内容自动变化，那么可以利用scrollHeight属性实现，如下：// html部分<textarea id="textarea"></textarea>// js部分function ...
2019-06-19 10:08:28
1662
原创 怎么使浏览器兼容ES6语法
随着前端技术的发现，es6语法在被更大范围的使用。浏览器支持情况：支持度比较好的是Chrome和Firefox浏览器，支持度最差的是IE（即便是IE11，支持度也很差）。哪里有灾难，哪里就有勇士和救兵，针对ES6的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的ES6语法转换成ES5，相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel，jsx，trac...
2019-05-08 11:07:23
3736
原创 HTML5的离线检测
// HTML5定义了检测设备是否网络连接的 “属性” : navigator.onLine ; // 该属性为一布尔值，为true时表示设备在线，为false时表示设备连线 ; console.log(navigator.onLine); // 除了onLine之外，HTML5还定义了实时检测网络是否连接的两个 “事件” ： online 和 ...
2019-01-01 11:25:18
554
原创 ios手机使用new Date('2018-11-30 23:55:00').getTime()出错
页面使用倒计时时发现：ios手机使用new Date('2018-11-30 23:55:00').getTime()出错，打印一直是NaN;但是安卓手机是好的；最终发现问题症结：是日期格式（2018-11-30 23:55:00）不兼容IOS系统，需要转化成（2018/11/30 23:55:00）；举例如下：var timeChose = that.data.pleaseCh...
2018-11-30 13:48:12
632
原创 vue-cli项目构建目录介绍
一：用vue-cli正确构建一个项目的目录如下：二：目录介绍如下：2.1：一级目录/文件介绍如下：build文件夹: 用于存放 webpack 相关配置文件config文件夹: 用于存放 vue基本配置文件node_modules文件夹: 用于存放 npm install 安装的依赖代码库src文件夹: 主要用于存放 我们开发的代码。staic文件夹: ...
2018-11-09 11:58:39
316
原创 vue-cli多页面实现
概述：vue-cli主要是用于构建单页应用的脚手架，但是实际开发的项目中，很多项目都是多页的，所以才有对基于vue-cli生成的单页应用的改造需求，以实现多页应用。本例基于的vue版本为："vue": "^2.5.2"；一：基于vue-cli创建一个项目命令1：vue init webpack；命令2：npm install;命令执行完成后的默认项目结构如下：这样，一个...
2018-11-08 14:36:46
832
原创 node.js常见配置概念解释
__dirname 表示当前文件所在的目录的绝对路径__filename 表示当前文件的绝对路径例子，文件路径有如下结构：newapp > demo > hello.js在hello.js文件中编写如下代码：console.log(__dirname); 打印结果： /Users/jerry/51talk/newapp/democonsole.l...
2018-09-17 11:34:25
198
原创 前端优化页面性能小结
一：减少页面加载时的请求数量1：使用雪碧图；2：按需加载；3：延迟加载；4：合并css和js；5：提示产品（需求），不要在单个页面处理过多复杂流程，建议：单个页面流程过于复杂时可以考虑在该页面提供链接，交互时跳转到另一个页面处理逻辑，以分解单个页面的负载；二：压缩资源文件1：压缩图片（单张图片不能过大，最好不要超过50k）、css、js等资源文件； ...
2018-09-06 10:26:41
196
原创 通过原生js完成ajax请求
首先要知道，ajax的核心是>>>XMLHttpRequest对象；XMLHttpRequest对象有许多方法，最有用的当属open方法，它用于指定服务器上将要访问的文件，例如：open("GET", "test.txt", true )；指定了请求目标后，就可以用send方法发送请求啦；下面看一个实例：<body> <button...
2018-08-19 17:56:54
347
原创 css弹性布局（flex）
1：概念解读：传统的布局解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。但对于一些特殊的布局方式（如垂直居中），传统盒模型显得有点力不从心，而对弹性布局（flex）来说却很容易实现。2009年，W3C 提出了一种新的方案 ---- flex 布局flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供...
2018-08-19 16:47:40
1101
原创 vue2.0生命周期解读
首先看下官方概念解释：1.beforeCreate创建前的状态(创建实例前，vue实例的属性值为undefined)。2.created实例创建完成后(data被定义了，但el属性为undefined)。然而，挂载阶段还没开始，$el属性目前不可见。3.beforeMount挂钩前(DOM渲染前)，el属性已经拿到对应的DOM元素。4.mounted挂载结束(Dom...
2018-08-15 15:52:30
342
原创 由于touchend事件在滑动时也会被触发，引起了误操作
问题：在列表里运用touchend事件，当手指在列表上滑动时，也会触发列表元素上的touchend事件方案一：/*仅适用于内容中点击元素。对于拖动等元素，需要自行在页面处理。* 主要是绑定touchstart和touchmove事件，并判断用户按下之后手指移动了多少像素。* 如果手指移动距离小于10像素，则还是认为用户在做点击操作。如果移动距离超过了10像素，则取消后续事件监听函数的执...
2018-08-14 11:30:53
1820
原创 vue碎片
1：有关过滤器的使用地点过滤器 filters 不能和 v-model 一起用，只能和 v-bind 或者 {{}} 中使用，如下图：
2018-08-07 14:35:23
263
原创 有关npm的常见用法
简介：NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：1.查询npm版本：命令：npm -v2.查看某个包的所有版本号的方法：命令：npm view 包名称 versions例如：npm view jquery versions3.安装某个包的方法：命令：npm install 包名称 例如：npm i...
2018-08-01 10:17:23
218
原创 再谈定时器
setTimeout 和 setInterval两个定时器都是接收两个参数；第一个参数可以是字符串或函数；第二个参数是时间（单位是毫秒）；如下图：重点关注第一个参数用法，如下所示：// 测试setTimeout定时器 var test1 = function () { console.log("执行了一次t1") };...
2018-07-31 11:20:59
214
原创 vue父子组件通信
vue父子组件通信的几种情况：1、父组件传递自己的data值给子组件； 2、父组件调用子组件的事件；3、子组件调用父组件的事件；一：父组件传递自己的data值给子组件父组件可以使用 props 把data数据传给子组件。实现方式：使用 vue 的 props// 关于 props 的官方介绍// 子组件A.vue配置如下：// 如下为...
2018-07-27 14:34:34
334
原创 vue项目中如何全局引入jquery
说明：在index.html直接用<script>标签引入，不会生效的，正确引入姿势如下：1：打开package.json文件，手动在dependencies中加入如下代码；2：运行cnpm install，这样就会引入版本为2.1.1的jquery作为依赖；3：打开webpack.base.conf.js文件，对该文件进行两处修改，如下图：4：在需要的页面...
2018-07-20 16:08:32
7074
原创 vue-cli构建手机端项目如何手机上测试
1：找到config文件夹下的index.js文件，打开2：将host值设置成本机ip3：重新启动项目即可
2018-07-19 14:09:29
1144
原创 移动端安卓和ios兼容性汇总
问题1：iphoneX适配方法。首先了解一下iphoneX设备基础信息，如下：iphoneX屏幕组成：上部齐刘海（44px）+ 安全区域（safe area）+ 底部手势区域（34px）。默认，页面只显示在“安全区域”中，导致屏幕顶部和底部看起来很别扭，此时可以通过如下几种方式进行适配：1）：设置viewport-fitviewport-fit可以取两个值contain（默...
2018-06-01 16:51:06
5552
原创 网页从输入url到完整呈现出来都经历了哪几个过程
大致可以分为如下7步：1：输入网址；2：发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；3：与web服务器建立TCP连接；4：浏览器向web服务器发送http请求；5：web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；6：浏览器下载web服务器返回的数据及解析html源文件；7：生成DOM树，解析css和js，渲染页面，直至显示完成；...
2018-05-18 15:15:00
2765
原创 前端实现跨页面传值的几种方式
一：利用url参数传递//1：A页面设置url参数$('#go_url').on('touchend',function () { var sss = "中国"; window.location.href = encodeURI("demo2.html?name=" + sss + "&age=5000");});//2：B页面获取url参数var url = windo...
2018-05-18 10:42:00
8780
1
原创 html5本地存储localStorage
作用： 1--当前页面存储/读取缓存信息； 2--跨页面传值；容量：5M;浏览器支持情况：对于不支持的浏览器，可以用cookie进行替代支持(但是cookie只支持4K大小)。1.当前页面存储/读取缓存信息：var arrDisplay = [];arrDisplay.push(userNameVal);//存储，IE6~7 cookie 其他浏览器HTML5本地存储if (w...
2018-05-17 17:55:23
210
原创 Ajax完整写法（含加载进度方法）
$.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步，默认为异步，这也是ajax重要特性 data: { "id": "value" }, //参数值 type: "GET", //请求方式 ...
2018-05-16 15:34:14
4690
原创 jquery的 $().each 与 $.each 的区别
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的。一：$().each这个方法，在dom处理上面用的较多。$(“input[name=’ch’]”).each(function(index){if($(this).attr(‘checked’)==true){ //一些操作代码}回调函数是可以传递参数，index 就为遍历的索引。说...
2018-05-16 13:49:36
374
原创 手机端安卓系统网页input获取焦点被键盘遮挡分析
当 css里设置html,body{ height:100%; }会造成标题所述现象，这里把body的height值设置成autoj即可消除上述现象。
2018-05-09 16:52:54
1564
原创 proxyTable配置接口地址代理
在项目开发的时候，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们现在使用vue-cli进行项目打包的时候，我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问页面，但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址，我们这样直接使用会存在跨域的请求，导致接口请求不成功，因此我们需要...
2018-04-16 16:37:09
3152
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人