理解click的300ms的延迟响应
Click事件在移动手机开发中有300ms的延迟,因为在手机早期,浏览器系统有放大和缩放功能,用户在屏幕上点击两次之后,系统会触发放大或者缩放功能,因此系统做了一个处理,当触摸一次后,在300ms这段时间内有没有触摸第二次,如果触摸了第二次的话,说明是触发放大或缩放功能,否则的话是click事件。
因此当click时候,所有用户必须等待于300ms后才会触发click事件。所以当在移动端使用click事件的时候,会感觉到有300ms的迟钝。
如何解决移动端Click事件300ms延迟的问题?
禁止用户缩放
通过完全禁用缩放来达到去掉点击延迟的目的
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
优点:高效,简洁
缺点:通常情况下,我们还是希望页面能通过双指缩放来进行缩放操作,比如放大一张图片,放大一段很小的文字。
判断是否设置了上述meta标签,来处理缩放功能
双击缩放主要是用来改善桌面站点在移动端浏览体验的,而随着响应式设计的普及,很多站点都已经对移动端坐过适配和优化了,这个时候就不需要双击缩放了,如果能够识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="width=device-width">
使用zepto.js的tap事件
tap事件可以理解为在移动端的click事件,而zepto.js因为几乎完全复制jQuery的api,因此常常被用在h5的开发上用来取代jquery
缺陷: 点击穿透:如果一个绝对定位或者固定定位元素处于页面最顶层,对这个元素绑定一个点击事件,那么你点击这个点对应的下面凡是有点击事件或者a标签都会被触发执行.
FastClick.js
FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。
- npm install fastclick -S
- //引入
import fastClick from ‘fastclick’
//初始化FastClick实例。在页面的DOM文档加载完成后
fastClick.attach(document.body)
使用fastClick使得ios唤启软键盘,触点不是很灵敏
解决方法:重写fastClick 设置焦点targetElement.focus();
import FastClick from 'fastclick'
FastClick.attach(document.body)
FastClick.prototype.focus = function(targetElement) {
var length;
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
length = targetElement.value.length;
targetElement.focus();
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
};
em/rem/meta
em:相对于父元素,相对于当前元素的font-size。
rem:相对于根元素,跟整个body的font-size有关系。
meta:指定浏览器的适口,适口就是可以看见的区域。
layout viewport :默认适口
visual viewport:可视区域
ideal viewport:理想化的适口
vm / vh 与 rem
rem:
需要动态设置根尺寸font-size。
用户无法设置更大字体(因为有一个动态指定字体的过程,所以用户很难再去处理这个字体)。
vw / vh:
自动缩放/不影响字体
兼容性差
uniapp
uni-app是一套可以适用多端的开源框架。
uni-app是基于vue.js的。
封装的组件和微信小程序的组件一模一样。
uni-app使用HBX进行开发,HBX对于vue语法等支持可以说是比较完备了。
uin-app的开发流程
- 安装HBX
- 下载完成后直接解压,通过工具栏,创建uni-app
- common-common 存放一些公共css及js文件
- component-component 存放我们自己封装的一些组件
- static-static 放我们的静态文件
- hybrid 本地html文件
- platforms 存放各平台专用页面的目录
- pages 存放业务文件的文件夹
- main.js vue.js 初始化入口文件
- App.vue 全局样式以及监听应用的生命周期
- manifest.json 应用的各种信息
- pages.json 路由、导航条、选项卡等
- 可以在HBX运行,也可以在指定的小程序开发者工具运行。
- 开发过程中要注意uni-app得兼容性。
- 打包上线,manifest.json目录的配置选项
生命周期
应用的生命周期:
onLaunch:应用初始化完成时触发,全局只触发一次。区分开发环境然后调用不同服务器的接口。
onShow:从后台进入前台时触发。
onHide:从前台进入后台时触发。
onUniNViewMessage:页面发送的数据进行监听。
页面的生命周期:
onLoad:页面加载得时候触发
onShow:页面显示触发
onReady:页面初次渲染完成触发
onHide:页面隐藏时候触发
onPullDownRefresh:用户下拉时触发
onReachBottom:页面上拉触底时触发
nNavigationBarButtonTap:原生标题栏点击时触发,可以用于分享app等功能
onBackPress:页面返回时触发
微信小程序
基础知识
目录和文件
project.config.json 项目配置文件,用得最多的就是配置是否开启https校验;
App.js 设置一些全局的基础数据等;
App.json 底部tab, 标题栏和路由等设置;
App.wxss 公共样式,引入iconfont等;
pages 里面包含一个个具体的页面;
index.json (配置当前页面标题和引入组件等);
index.wxml (页面结构);
index.wxss (页面样式表);
index.js (页面的逻辑,请求和数据处理等);
获取用户信息
wx.getUserInfo(Object object)
常用标签
<div></div> == <view></view>
<h1></h1>...<h6></h6> == <view></view>
<p></p><span></span>
<i class="icon"> == <icon></icon>
<