移动端知识

理解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的开发流程

1. 安装HBX
2. 下载完成后直接解压，通过工具栏，创建uni-app

• common-common 存放一些公共css及js文件
• component-component 存放我们自己封装的一些组件
• static-static 放我们的静态文件
• hybrid 本地html文件
• platforms 存放各平台专用页面的目录
• pages 存放业务文件的文件夹
• main.js vue.js 初始化入口文件
• App.vue 全局样式以及监听应用的生命周期
• manifest.json 应用的各种信息
• pages.json 路由、导航条、选项卡等

3. 可以在HBX运行，也可以在指定的小程序开发者工具运行。
4. 开发过程中要注意uni-app得兼容性。
5. 打包上线，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>

<