复习笔记之API(18) 移动端常用的插件和框架

click延时问题

移动端click事件会有300毫秒延时问题，原因是移动端屏幕双击会缩放(double tap to zoom)页面。

• 解决方案：

1. 禁用缩放，浏览器禁用默认的双击缩放行为并且去掉300毫秒的点击延迟

• <meta name="viewport" content="user-scalable=no">

2. 利用touch事件自己封装这个事件解决300毫秒延迟

• 原理：当我们手指触摸屏幕，记录当前触摸时间，当我们手指离开屏幕，用离开时间减去触摸的时间，如果小于120毫秒，并且没有滑动屏幕，那我们就定义为点击(代码如下)

// 封装tap，解决300ms延时
function tap(obj, callback) {
    var isMove = false;
    var startTime = 0; // 记录触摸时候的时间变量
    obj.addEventListener('touchstart', function (e) {
        startTime = Data.now(); // 记录触摸时间
    });
    obj.addEventListener('touchmove', function (e) {
        isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
    });
    obj.addEventListener('touchend', function (e) {
        if (!isMove && (Data.now() - startTime) < 150) { // 如果手指触摸时间小于150毫秒算点击
            callback && callback(); // 执行回调函数
        }
        isMove = false; // 取反  重置
        startTime = 0;
    });
}
// 调用函数
tap(div, function() {
    // 执行代码
});

3. 使用插件。fastclick插件解决300ms延迟

• 移动端要求的是快速开发，所以我们经常借用一些插件来帮助我们完成操作(JS插件是JS文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用，如轮播图和瀑布流插件)
• 插件的特点：它是为解决某个问题而专门存在，其功能单一，并且比较小

移动端常用开发插件

插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

• Swiper插件的使用(中文官网地址：https://www.swiper.com.cn/)

1. 引入插件相关文件
2. 按照规定语法使用

• superslide:http://www.superslide2.com/
• iscroll:https://github.com/cubiq/iscroll

插件使用总结

1. 确认插件实现的功能
2. 去官网查看使用说明
3. 下载插件
4. 打开demo实例文件，查看需要引入的相关文件
5. 复制demo实例文件中的结构html、样式css以及js代码

============

练习：移动端视频插件zy.media.js

• H5给我们提供了video标签，但是浏览器的支持情况不同
• 不同的视频格式文件，我们可以通过source解决
• 但是外观样式，还有暂停、播放、全屏等功能我们只能自己写代码解决，这个时候我们可以用插件来操作

<!-- 想玩自己玩去吧，在这我就不写了，有种自己坑自己的感觉 -->
<video src="move.mp4" controls></video>

移动端常用的开发框架

框架概述：框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

• 常用的前端框架有Bootstrap、Vue、Angular、React等，既能开发PC端，也能开发移动端

• 框架：大而全，一整套解决方案
• 插件：小而专一，某个功能的解决方案

Bootstrap

Bootstrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅捷、简单。它能开发PC端，也能开发移动端

• Bootstrap JS插件使用步骤
  1. 引入相关JS文件
  2. 复制HTML结构
  3. 修改对应样式
  4. 修改相应JS参数