移动端知识梳理

Posted 2020-10-10 Scar007

• 插件：

  • swiper
  • iscroll
  • ejs(主要应用于node.js)
  • zepto(同jq用法一样，更适合于移动端)
  • less

• H5:

  • 新增标签
    • header
    • footer
    • section
    • time
    • main
    • nav
    • ...
  • 对于input新增表单元素属性，以及新增类型的优势
    • email
    • tel
    • url
    • search
    • date
    • time
    • number
    • color
    • week
    • month
    • range(音量)
  • ->在移动端表单元素中没有keydown/keyup事件(移动端的见怕是虚拟键盘)，这两个事件(输入内容事件)统一使用input事件代替:[ELEMENT].oninput=function(){}
  • ->placeholder:在IE(10以下，10兼容，但是不是很好，可以理解为不兼容)下不兼容，如何使用JS来模拟。

• audio/video:移动端音频/视频(公认为本次升级最伟大之处)

  • ->在真实项目中应用audio都是做背景音乐播放(专门做音乐播放器的很少，基本上就是做音乐的公司)：src、preload、autoplay、loop、controls、play()、pause()、paused...
  • ->真实项目中的video不是直接使用最简单的内置播放器(用到的属性和方法和audio差不多)，就是直接使用别人封装好的播放器插件：tvplayer、腾讯视频插件...

• 新增加的一些JS的API

  • ->本地存储:webStorage(localStorage/sessionStorage)
  • ->离线缓存(不是很稳定):xxx.manifest(手机断网情况下依然可以观看网页中的内容，就是应用离线缓存技术事先把内容存储到本地)
  • ->webSocket/socket.io
  • ->获取地理位置的方法:真实项目中获取到经纬度、精准度后，会把这些信息发送给第三方地图接口，从而获取到我们需要的一些信息

• CSS3

  • 选择器
  • 倒入字体图标
  • 常用属性:border-radius/box-shadow/text-shadow...
  • 背景变革:background-image/-color/-position(雪碧图、图片精灵、)CSS-Sprite/-attachment
  • background-size/-clip/-origin
  • 背景颜色的线性和放射性渐变
  • filter的高级应用：反色、灰度
  • 盒子模型：
    • box-sizing：border-box/content-box(默认)
    • columns：多列布局
    • flex：弹性伸缩盒子模型
    • 变形：transform
    • 动画：transition animation

• 响应式布局： + ->PC和移动端用一套的使用(外层盒子宽度百分比，其余都是写死的，拿@media(国际通用规范)在不同设备中一点点的调整样式) + ->REM(懒人做法)，一般应用于当卡项目仅仅是在移动端设备上访问的(在PC端部兼容) + ->flex不是响应式布局方案，仅仅是某些特殊的效果用这个来做而已

• webApp/Hybrid模式： 把我们做的H5页面运行在浏览器中或者其他App的webView中就是基于Hybrid混合模式开发的webApp项目 微信二次开发仅仅是在我们写好的H5页面基础上调取微信提供的接口(调取接口的时候需要配合后台使用)： https://mp.weixin.qq.com/wiki

• 兼容：

  • 兼容ios和安卓
    • -webkit-transfrom：
    • transfrom：