公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

总结下移动端调试的一些方法

前言

说起网站调试,pc页面和h5页面,假如电脑上能够重现的,都不在话下,调试起来都蛮简单。仅仅需要fiddler一个抓包工具,把线上压缩代码替换成本地无压缩代码就可以了。具体步骤我后面可以详细介绍。但是,仅仅是某款手机重现,其他手机没有问题的情况下如何调试?hybrid页面如何调试呢?这篇文章简单总结下我常用的调试方法。

一、chrome的inspect调试方法

这个调试仅仅是针对安卓系统,可以调试hybrid,也可以调试h5,但是IOS系统就无能为力了。我很喜欢用这种方式调试android手机。用inspect可以在chrome中模拟一个手机中的webview,你可以在chrome中调试你手机中的代码。

步骤如下:

1、android手机通过数据线连接pc,打开android手机的“允许调试”功能(usb调试)

一般是在手机的开发者工具里面,有的手机连续点击几次版本号可以出现,具体可以网上搜索一下。 如下图:

常用唤醒APP的方式

前言

开工大吉,祝大家2019诸事顺利! 当我们用微信或者浏览器打开一个html5页面的时候,有时候会有浮层,提示要不要打开相关APP,当然也有的会自动唤醒到app中。这种唤醒是如何做到的呢?

今天简单的写下浏览器是如何唤醒APP的。当然,关于唤醒,涉及的东西蛮多,例如地址加参数唤醒,设置唤醒白名单,唤醒黑名单等等。h5地址和Scheme地址的转换等等。本文简单写下唤醒的相关原理。

如下图:

vue封装一个简单的div框选时间的组件

前言

新年第一篇文章,记录一下我前段时间封装的一个vue组件吧。技术需要积累,有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。

div框选实现

div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div。【注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位。不然,鼠标框选区域和被框选区域很难保持一致。】

css中的visibility和position新属性sticky

前言

今天介绍的css的visibility和position新属性sticky,之前的文章中并没有提及。关于css文章,前面写了不少。但是这2个的介绍真没有,今天简单介绍一下,就当是补充和积累了吧。

visibility

关于visibility,我们平时用的蛮多,大家知道的是,他和display:none的区别。visibility:hidden是占空间的,渲染的时候会渲染,但是display:none是不占空间的,具体渲染和加载,请看我之前的文章:https://www.haorooms.com/post/web_http_request

但是:把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面,会发生什么?

关于css中的那些scroll

一、滚动轴scrollbar

说到css中的scroll,我们最先想到的应该是overflow:scroll。想到这个scroll之后,自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴,mac和window显示各异,不同浏览器也显示不同。早起也有一些js的解决方案。例如:jScrollPanetinyscrollbar等等。后来,谷歌浏览器支持滚动轴的修改,我之前也有文章:https://www.haorooms.com/post/CSS_selections

控制滚动轴的7个伪元素分别是:

::-webkit-scrollbar:整个滚动条
::-webkit-scrollbar-button:滚动条上的按钮(下下箭头)
::-webkit-scrollbar-thumb:滚动条上的滚动滑块
::-webkit-scrollbar-track:滚动条轨道
::-webkit-scrollbar-track-piece:滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner:当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer:某些元素的交汇部分的部分样式(类似textarea的可拖动按钮)