Vue--移动端开发
移动端开发
我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站。
app:application应用程序。
手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。
移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开发完美适配的app
开发移动端应用我们需要学习的知识点可以分成如下几个:
移动端布局适配
移动端事件
移动端交互效果
移动端前端框架
移动端调试
移动端布局适配
从屏幕尺寸、屏幕类型等方面来看的话,移动设备和PC设备大有不同,所以从布局、适配等方面都需要我们考虑到
Viewport视口的作用 (在移动端浏览器上面用来显示网页的那一块区域)
在很久以前,我们的设备还不是智能设备的时候,设备访问智能访问到网页的左上角(当时都是pc网站),查看全部内容需要通过滚动条
慢慢的我们发现,我们的一个页面放到移动端中访问的时候,没有滚动条了,但是内容都缩小了
这是因为我们有了一个叫做viewport的一个东西
网页不是直接放入浏览器中的,而是先放入到viewport中,然后viewport在等比缩放到浏览器的宽度,放入浏览器,viewport在缩放的过程中,网页内容也被缩小了
网页访问到的clientWidth其实是viewport的宽度
这样的话我们需要做一些处理,其实问题的根源在于viewport的宽度和浏览器宽度不一样,如果我们能将其设置为一样的话,不会出现这样的问题了
我们可以通过meta标签来设置viewport将其设置为浏览器的宽度,也就是设备的宽度,这样的话布局就会简单多了
viewport的宽度
当浏览器宽度小于980的时候,宽度就是980,当浏览器尺寸宽度大于980的时候,宽度和浏览器宽度一致
通过meta标签来设置viewport
标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
meta标签大全
meta viewport 的6个属性:
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
---|---|
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 设置页面的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
移动端布局方式与设计图
现有的布局方式:
固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间
内容区域的尺寸:980,1000,1100,1200
响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配
一般会有三张设计图,PC,平板,手机
自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现
设计图一般只有一张,640、750居多
移动端布局
移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)
retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素
例如,iphone 6手机商宣传手机的尺寸是:750宽,这个值就是物理像素,而从开发者眼里我们所指的其实是375px(逻辑像素)
在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染
如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的
设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片,如果图片的尺寸也是一个像素宽高的话,因为其实在移动端渲染的时候是用四个像素来渲染,图片会失真,但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话,就不会失真
布局单位
因为我们的移动设备有很多种,所以我们的布局不可能是固定布局,所以我们要使用自适应布局
我们在开发中可以选用很多自适应布局单位,这些单位必须满足一个条件
%
优点:简单,无需设置,兼容性好
缺点:基于父元素的属性来设置,如果父元素没有宽高,设置无效vwvh
一个vw等于viewport宽度的百分之一,一个vh等于viewport高度的百分之一
vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个优点:简单,无需设置
缺点:兼容性不好rem
一个rem等于根元素(html)的字体大小,兼容性很好
优点:兼容好,使用简单
缺点:需要设置
rem与适配
当我们想使用一个自适应单位的时候,发现%有缺陷,vwvh兼容性差,弹性盒所针对的是元素排列的问题,只适用于某种情况,所以我们就想,能给我一个没啥上面的缺陷的单位,想到了rem
rem的兼容性好一点,它也确实是一个布局单位,不受父子元素的影响,设置了rem之后,也不会对px、em等单位造成影响,它是一个理想的单位
rem也有一个致命的问题,就是它不是一个自适应的单位,不会跟着设备尺寸不同而不同,但是没有关系,我们有万能的js,可以去动态的设置它
方法1:
我们可以将1rem设置成屏幕的某一个比例,比如将1rem设置成屏幕的十分之一
假设我们的设计图是640宽的,我们拿到之后量了一下a的宽度为480px,得到比例a所占屏幕3/4,根据rem与屏幕的关系,最后设置成7.5rem
就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算
方法2:
如果设计图是640的图,这个时候我们知道它是照着i5来的,我们现在假设世界上所有的手机都是320的,也就是每一个人用的都是i5,在这个理想的情况下,因为手机都一样,尺寸都一样,和pc端的固定布局也就一样了
假设有一个在640的图上我们量得的宽度是320,因为是二倍图,所以我们知道,它的实际宽度是160px,这样的话,我们直接给这个设置设置width:160px就可以了,这个时候,我们玩个花子,不要单纯的使用px来设置,用rem来设置,例如,我可以将rem设置为100px,这样的,刚才的盒子设置为width:1.6rem,算法就是 量的宽度/(dpr*100) = 要设置的rem值
这样我们就可以开心的开发,量一个尺寸,除个2,再小数点推两位,设置就行了,但是我们也知道,手机的尺寸并不可能都是320,这样的话,没有关系,我们可以根据一个比例来算rem到底设置为多少
在手机宽度为320的时候,我们设置的1rem=100px,所以有一个比例 b = 100/320
那么在W宽度的手机上,1rem应该是多少呢?设为x 那么x/w = b
得到x = w/3.2
那么就不要写死html的fontsize为100了。而是用js去设置:
document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px’
这样,我们就可以得到一个自适应的rem
常见的需要注意的问题
1px边框
在移动端中,如果给元素设置一个像素的边框的话,那么在手机上看起来是会比一个像素粗的。
解决方法:使用伪类元素模拟边框,使用transform缩放
响应式图片
在移动端中,图片的处理应该是很谨慎的,假设有一张图片本身的尺寸是X宽,设置和包裹它的div一样宽,如果是div宽度小于图片宽度没有问题,但是如果div宽度大于图片的宽度,图片被拉伸失真
解决方法:让图片最大只能是自己的宽度
img{max-width: 100%;display: block;margin: 0 auto;}
移动端事件
移动端中的事件和PC的事件有一些是不同的,例如,mouse部分事件在移动端里没有了
取而代之的是touch事件:
touchstart/touchmove/touchend/touchcancel(玩游戏 忽然来电话)
添加事件的时候可以用ontouchstart,但是有的时候很可能失效,建议使用addEventListener的方式
touchcancel比较少见,在系统取消触摸的时候触发
touch事件对象里面的属性和mouse的略有不同,例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX
touch事件对象里有touches,changedTouches,targetTouches三个属性,上面保存着关键的位置信息
它们里面保存的是触发事件的手指的信息,但是要注意,虽然三个里面保存的信息看似都一样,但是在touchend事件里,只能使用changedTouches
click的300ms延迟问题
在移动端中,click事件是生效的,但是它有一个问题,点击之后会有300ms的延迟响应
原因:safari是最早做出这个机制的,因为在移动端里,浏览器需要等待一段事件来判断此次用户操作是单击还是双击,所以就有click300ms的延迟机制,Android也很快就有了
不用click,用自定义事件tap
tap是需要自定义的:如果用户执行了touchstart在很短的时间又触发了touchend,且两次的距离很小,而且不能触发touchmove
使用zepto类库的时候,里面自带tap事件,,但是需要在zepto.js后面加上一段js
zepto官网;Touch模块
百度有一款touch.js的插件教程
hammer.js也是一个手势事件库文档
引入fastclick库来解决
点透bug的产生
点透bug有一个特定的产生情况:
当上层元素是tap事件,且tap后消失,下层元素是click事件。这个时候,tap上层元素的时候就会触发下层元素的click事件
解决方式:
上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难
缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了
使用中间层,添加一个透明的中间元素,给它添加click事件并消失,这个时候接收点透的是透明的中间层
使用fastclick
移动端测试
使用chrome浏览器有移动设备模拟功能,在这里可以做一些模拟测试,但是要注意的是,毕竟不是真机,会有一些测试不到的问题
手机连接上电脑的无线,总之使其在同一个网络里,然后就可以通过ip访问
需要测试的浏览器:
chrome,firefox,UC,百度,QQ,微信,Android,safari
移动端交互
动画效果全部使用css3
JQ生成二维码
可以使用jquery.qrcode.js插件,可以快速的生成基于canvas绘制的二维码
兼容查阅网站
can i use ,在这里可以查看很多属性、api的兼容性
Vue--移动端开发相关推荐
- 记 vue 移动端开发 中的经验
项目背景 手上的 vue移动端 项目已经开发了大几个月了,遇到了一些很有意思的坑,也让自己学习了很多:写此文主要目的是记下一些我遇到的坑,以及自己的解决方案,分享的同时也方便以后复习. 项目的底层是上 ...
- 用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发
文章目录 发送验证码 登录 退出登录 界面控件 获取用户信息功能 项目地址 前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读. 首 ...
- Vue移动端开发IOS浏览器回退时页面不刷新或未正常发起请求
移动端微信公众号项目进行UAT测试时遇到一个问题,ios微信浏览器访问项目时回退上一级页面异常,未刷新.网上看的是由于ios回退是从缓存中读取数据的,由于开发环境不方便测试,找到如下解决方法 经测试是 ...
- Vue 移动端开发实现微信登录
1 打包app,需要去微信开放者平台申请(https://open.weixin.qq.com/) appid 和 appsecret // 跳转到微信into_weixin (headImage) ...
- Kbone踩坑记录(VUE多端开发不得不做的吃螃蟹尝试)
Kbone踩坑记录 tabbar kbone-ui使用 自定义导航 页面跳转 扩展API 环境判断 swiper 图片资源 wx-web-view Kbone踩坑记录 tabbar 所有 tabbar ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录 前言完 效果图 : 登录含签权 注册带正则 个人中心 下拉加载更多主页 修改个人中心 视频播放加关注+收藏 评论盖楼A回复B B回复C C回复A类似 项目开始 封装登录.注册 封装登录 从零到一 ...
- 网易云音乐接口+vue全家桶开发一款移动端音乐webApp
网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我 效果图: 骨架屏 首页 侧边栏 每日推荐 歌单 播放器(小) 播放器(大) 详细信 ...
- vue仿小红书移动端开发
vue仿小红书移动端开发 这是在项目实训中所作的界面功能展示 技术部分: 前端网页使用的是vue3和vant框架 后端使用的是Tomcat.javaweb servlet 数据库使用的是mysql8 ...
- vue 移动端签字_Vue 移动端
一.vant vant vant 应该是 vantage (优势的简写) 快速上手: Vue 官方提供的脚手架 Vue Cli 3 创建项目 # 安装 Vue Cli npm install -g @ ...
- 手把手教你 Vue 服务端渲染
写在前面 在写这篇文章之前,我有写一篇 Vue 预渲染的教程 以及 在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
最新文章
- Jzoj4747 被粉碎的线段树
- mysql性能优化之sql语句优化最强合集
- python朋友圈为什么这么火-利用Python让你的微信朋友圈与众不同,更加高大上
- 使用xmanager连接centos5.5
- mozjpeg:JPEG图片压缩5%,获Facebook支持
- python中小数_比较python中的小数
- feign返回结果统一处理_在.net core中对接口返回属性名称做统一处理
- andriod socket开发问题小结
- 最保值电子产品绝对是它:后悔没多收几台
- java面经_字节跳动 暑期实习 广告部 后台开发 java 一二面经
- 大麦盒子 Android4.4,大麦盒子DM4036机顶盒刷安卓系统教程
- vue实现pdf预览
- zemax中非序列添加相位面_zemax非序列照明技巧汇编
- 人大金仓助力广东融合创新智慧校园建设与网络安全交流会成功举办
- svg之defs以及use的使用
- python中search函数用法_查找匹配函数FIND和SEARCH的基本用法
- css绝对定位如何居中?css绝对定位居中的四种实现方法-web前端教程
- C++(11):多线程同步packaged_task
- Zoning Houses Kattis 多组记录线段树/ST表
- sql语句case when常用查询总结