移动端开发常见的坑
一、移动端开发通用坑
1、click300ms延迟?
讲道理,现在开发移动端基本是不会有这么一个问题的。但作为移动端以前的经典坑,我这里也拿出来说上一说吧。
移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的。但在2014年的Chrome 32版本已经把这个延迟去掉了,so you know。但如果你还是出现了300ms的延迟问题,也是有路子搞定的。
解决方案如下:
1.fastclick可以解决在手机上点击事件的300ms延迟
2.zepto的touch模块,tap事件也是为了解决在click的延迟问题
3.触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件,加快对事件的响应,解决300ms延迟问题
4.若移动设备兼容性正常的话(IE/Firefox/Safari(IOS 9.3)及以上),只需加上一个meta标签
<meta name="viewport" content="width=device-width">
即把viewport设置成设备的实际像素,那么就不会有这300ms的延迟。
2、移动端样式兼容处理
当今的手机端,各式各样的手机,屏幕分辨率也是各有不同,为了让页面可以可以兼容各大手机,解决方案如下
1.设置meta标签viewport属性,使其无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,从而达到能有统一的分辨率的效果。并且禁止掉用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
2.使用rem进行屏幕适配,设置好root元素的font-size大小,然后在开发的时候,所有与像素有关的布局统一换成rem单位。针对不同的手机,使用媒体查询对root元素font-size进行调整
3、阻止旋转屏幕时自动调整字体大小
移动端开发时,屏幕有竖屏和横屏模式,当屏幕进行旋转时,字体大小则有可能会发生变化,从而影响页面布局的整体样式,为避免此类情况发生,只需设置如下样式即可
* { -webkit-text-size-adjust: none; }
4、修改移动端难看的点击的高亮效果,iOS和安卓下都有效
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
不过这个方法在现在的安卓浏览器下,只能去掉那个橙色的背景色,点击产生的高亮边框还是没有去掉,有待解决!
一个CSS3的属性,加上后,所关联的元素的事件监听都会失效,等于让元素变得“看得见,点不着”。IE到11才开始支持,其他浏览器的当前版本基本都支持。详细介绍见这
pointer-events: none;
5、iOS下取消input在输入的时候英文首字母的默认大写
<input type="text" autocapitalize="none">
6、禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
7、禁止 iOS 弹出各种操作窗口
-webkit-touch-callout: none;
8、禁止ios和android用户选中文字
-webkit-user-select: none;
9、calc的兼容处理
CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc,所以要在之前增加一个保守尺寸:
div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }
10、fixed定位缺陷
iOS下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位,android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位 。iOS4下不支持position:fixed 解决方案: 可用iScroll插件解决这个问题
11、一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发
针对此种情况只需要对不触发click事件的那些元素添加一行css代码即可
cursor: pointer;
12、消除transition闪屏问题
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-transform-style: preserve-3d; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ -webkit-backface-visibility: hidden;
13、CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
14、iOS系统中文输入法输入英文时,字母之间可能会出现一个六分之一的空格
解决方法:通过正则去除
this.value = this.value.replace(/\u2006/g, ‘‘);
15、input的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css
line-height:normal;
16、浮动子元素撑开父元素盒子高度
解决方法如下:
- 父元素设置为 overflow: hidden;
- 父元素设置为 display: inline-block; 等
这里两种方法都是通过设置css属性将浮动元素的父元素变成间接变成BFC元素,然后使得子元素高度可以撑开父元素。这里需要注意的时,最好使用方法1, 因为inline-block元素本身会自带一些宽高度撑开其本身。
17、往返缓存问题
点击浏览器的回退,有时候不会自动执行js,特别是在mobilesafari中。这与往返缓存(bfcache)有关系。 解决方法 :
window.onunload = function () {};
18、overflow-x: auto在iOS有兼容问题
解决方法:
-webkit-overflow-scrolling: touch;
二、vue移动开发特有坑以及小技巧分享
1、iOS原始输入法问题
iOS原始输入法,中文输入时,无法触发keyup事件,且keyup.enter事件无论中英文,都无法触发
解决方法:
- 改用input事件进行监听
- 将keyup监听替换成值的watch
- 让使用者安装三方输入法,比如搜狗输入法(不太现实)
2、input元素失焦问题
业务场景重现: 项目中需要写一个搜索组件,相关代码如下
<template> <div class="y-search" :style="styles" :clear="clear"> <form action="#" onsubmit="return false;"> <input type="search" class="y-search-input" ref="search" v-model=‘model‘ :placeholder="placeholder" @input="searchInputFn" @keyup.enter="searchEnterFn" @foucs="searchFocusFn" @blur="searchBlurFn" /> <y-icons class="search-icon" name="search" size="14"></y-icons> </form> <div v-if="showClose" @click="closeFn"> <y-icons class="close-icon" name=‘close‘ size=‘12‘></y-icons> </div> </div> </template>
其中我需要在enter的时候进行对应的搜索操作并实现失焦,解决方法其实很简单,在enter时进行DOM操作即可
searchEnterFn (e) { document.getElementsByClassName(‘y-search-input‘)[0].blur() // dosomething yourself }
对了,这里还有一个坑,就是在移动端使用input类型为search的时候,必须使用form标签包裹起来,这样在移动端呼出键盘的enter才会是搜索按钮,否则只是默认的enter按钮。
3、vue组件开发
这个点不能算坑,只能算是小技巧分享吧。
业务场景重现:很多时候,在开发项目的时候是需要抽离公共组件和业务组件的。而有些公共组件在全局注册的同时可能还需要拓展成vue的实例方法,通过把它们添加到 Vue.prototype 上实现,方便直接使用js全局调用。拿一个Message组件做例子吧,代码比较简单,就直接上代码了。
1.首先开发好Message.vue文件。
<template> <div class=‘y-mask-white-dialog‘ v-show=‘show‘> <div class=‘y-message animated zoomIn‘ > <span v-html="msg"></span> </div> </div> </template> <script> export default { name: ‘yMessage‘, props: { msg: String, timeout: Number, callback: Function, icon: String, }, data() { return { show: true, }; } }; </script> <style lang="stylus" scoped> .y-mask-white-dialog { background-color: rgba(0, 0, 0, .4); position: fixed; z-index: 999; bottom: 0; right: 0; left: 0; top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .y-message { min-width: 2.9rem; max-width: 5.5rem; width:100%; padding: 0.32rem; font-size: 14px; text-align: center; border-radius: 4px; background :rgba(0,0,0,0.8); color: #fff; animation: zoomIn .15s ease forwards; } </style>
2.构建Message的Constructor
import Vue from ‘vue‘; const MsgConstructor = Vue.extend(require(‘./Message.vue‘)); const instance = new MsgConstructor({ // el: document.createElement(‘div‘), }).$mount(document.createElement(‘div‘)); MsgConstructor.prototype.closeMsg = function () { const el = instance.$el; el.parentNode && el.parentNode.removeChild(el); typeof this.callback === ‘function‘ && this.callback(); }; const Message = (options = {}) => { instance.msg = options.msg; instance.timeout = options.timeout || 2000; instance.icon = options.icon; instance.callback = options.callback; document.body.appendChild(instance.$el); const timer = setTimeout(() => { clearTimeout(timer); instance.closeMsg(); }, instance.timeout + 100); }; export default Message;
3.在main.js里面进行组件注册
import Message from ‘./components/Message‘; Vue.component(Message.name, Message) Vue.prototype.$message = Message
然后你就可以尽情使用Message组件了.
this.$message({ msg: ‘test message‘ // ... })
4、巧用flex布局让图片等比缩放
这也是一个小技巧!项目中需要开发swiper轮播图,那么你懂的,图片肯定是需要保证等比缩放展示。
<div class="parent"> <img :src="imgSrc" > </div> <style lang="stylus" scoped> .parent { width: 100px; height: 100px; display: flex; align-items: center; img { width :100%; height: auto; } } </style>
是不是贼简单,是的,贼简单。这个样式同时适应手机全屏预览竖屏的情况,当手机横屏的时候,加一个媒体查询即可搞定
@media (orientation: landscape) { img { width auto height 100% margin auto } }
5、枚举值过滤处理
业务重现:考虑到项目后期会做国际化,前端需要对项目中几乎所有的枚举值进行过滤处理,从而进行展示
接下来就直接讲讲这块吧。既然要过滤,那么首选肯定是vue提供的filter指令。这里我举一个支付方式的枚举值处理的例子。首先配置代码如下
// 配置文件 export default { env: (process.env.NODE_ENV === ‘development‘ ? require(‘./env/dev‘) : require(‘./env/pro‘)), headShow: false, lng: ‘zh‘, };
枚举代码如下
// 获取语言环境 import config from ‘../config/index‘; const {lng} = config; // 账户类型 const type = { zh: { 1: ‘银行‘, 2: ‘支付宝‘, 3: ‘微信支付‘, }, en: { 1: ‘bank_type‘, 2: ‘alipay_type‘, 3: ‘wxpay_type‘, } } export default type[lng];
枚举注册代码分别如下
import accountType from ‘./accountType‘; // 账户类型 const factory = { accountType(value) { if (value === -1) { return ‘请选择账户类型‘; } return accountType[value] ? accountType[value] : ‘请选择账户类型‘; } } const filter = [ { name: ‘formatEnum‘, // 过滤类型 filter: function(value, type, status) { return factory[type](value, status); } } ]; export default { filter }; // filter import baseFilter from ‘./filter/index‘; const filters = [ ...baseFilter.filter ]; filters.map(f => { Vue.filter(f.name, f.filter); return ‘‘; });
接下来就可以轻松使用啦
<li> <label支付类型</label> <span> {{info.account_type | formatEnum(‘accountType‘)}} </span> </li>
6、时间过滤处理
currentValue = _this.currentValue = _this.value ? _this.value.replace(/-/g, ‘/‘) : ‘‘;
时间过滤代码如下
const filter = [ { name: ‘formatEnum‘, // 过滤类型 filter: function(value, type, status) { return factory[type](value, status); } }, { name: ‘formatDate‘, // 日期 filter: function(value, format = ‘yyyy-MM-dd‘) { if (!value || value === ‘‘) return ‘‘; let v = value; if (!isNaN(value)) { v = +value * 1000; } const newDate = new Date(v); return newDate.Format(format); }, } ];
7、路由权限判定
业务重现:由于不同的用户,可能拥有不同权限,而目前我们的项目是基于微信公众号进行开发的,页面权限这边也是交给了我们前端处理。既然要前端配置权限,那么我们能想到的比较好的方式就是通过配置路由文件,完成权限判定。下面我会列举一小部分代码(以我们的工单列表)进行演示,路由配置代码如下
const getWorkOrder = pageName => resolve => require([‘../pages/WorkOrder‘], pages => resolve(pages[pageName])) let routers = []; routers = [ { path: ‘/workorder‘, name: ‘workorder‘, component: room, children: [ { path: ‘list‘, // 管家端工单列表 name: ‘list‘, rule: 3, component: getWorkOrder(‘WorkOrderList‘) //WorkOrder, }, { path: ‘managerList‘, // 店长端工单列表 name: ‘managerList‘, rule: 6, component: getWorkOrder(‘ManagerWorkOrder‘) // WorkOrder, }, ] } ]
然后进行路由统一过滤处理
import Vue from ‘vue‘; import Store from ‘store‘; import Router from ‘vue-router‘; import routers from ‘./router.config‘; Vue.use(Router); // 遍历路由名称以及权限 let arr = {}; const routeName = function (router) { if (!router) return false; router.forEach((v) => { arr[v.name] = v.rule; routeName(v.children); }) } routeName(routers); const RouterModel = new Router({ mode: ‘history‘, routes: routers, }); // 路由钩子,进入路由之前判断 RouterModel.beforeEach((to, from, next) => { // 处理query 参数,传入到 jumpUrl,便于登录后跳转到对应页面 let qu = Object.entries(to.query); if (qu.length > 0) { qu = qu.map((item, index) => { return item.join(‘=‘); }) } if (arr[to.name]) { // 如果有权限需要 const userInfo = Store.get(‘yu_info‘); const cookie = Vue.prototype.$util.getCookie(‘X-Auth-Token‘); const userId = Vue.prototype.$util.getCookie(‘userid‘); if (userInfo && cookie && +userId > 0) { next(); } else { // 未登录,跳转登录 let param = `jumpUrl=${to.path}`; if (qu.length > 0) { param += `&${qu.join("&")}`; } if (arr[to.name] && !to.query.rule) { param += `&rule=${arr[to.name]}`; } window.location.href = `/login?${param}`; } } else { // 如果不需要权限放行 next(); } }) export default RouterModel;
然后在登陆界面定位到微信授权
getCode() { // 定位到微信授权,若是不需要授权可以在此处处理 let query = this.$route.query; let param = `jumpUrl=${query.jumpUrl || ‘/home‘}`; let path = window.location.origin; // 登录角色处理 let cfg = api[query.rule ? query.rule : 1]; if (query.rule) { param += `&rule=${query.rule}`; } let redirect_url = encodeURIComponent(`${path}/login?${param}`); let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${cfg.tempApp}&redirect_uri=${redirect_url}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`; if (query.rule === 3) { url += ‘&agentid=1000004‘; } location.replace = url; }
如果不是微信端,访问到到rule规则的界面时,则会如下
而当微信授权通过的时候,rule权限不足的情况则会如下
8、使用vue-cli proxyTable进行反向代理,解决跨域问题
开发项目,在前后端联调的时候肯定是会遇上跨域的问题的。很简单,做个反向代理呗,对于想了解正向代理和反向代理的,请点击这里
vue-cli脚手架搭建的工程中,在config/index.js文件中可以利用预留的proxyTable一项,设置地址映射表,如下
proxyTable: { ‘/api‘: { target: ‘http://www.example.com‘, // your target host changeOrigin: true, // needed for virtual hosted sites pathRewrite: { ‘^/api‘: ‘‘ // rewrite path } } }
然后使用http-proxy-middleware插件对api请求地址进行代理
// proxy api requests Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === ‘string‘) { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options)) })
三、移动端开发性能优化
1、首屏渲染优化
决定用户体验最重要的一个点之一,这个点的重要性,相信不用我说了。下面直接谈实战。
- 减少资源请求次数
- 加载时使用过渡样式,防止用户网络太差影响对首页的体验
- 图片使用懒加载,这一part,我们目前项目中使用的vue的三方插件vue-lazyload,大致使用方法如下
// 全局注册 import VueLazyload from ‘vue-lazyload‘; Vue.use(VueLazyload, { error: require(‘./assets/close.svg‘), loading: require(‘./assets/loading.svg‘), attempt: 1, }); // 使用 <img v-lazy="room.img" :alt="room.community_name" width="100%">
- HTML使用Viewport,Viewport可以加速页面的渲染。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
除此之外,还有很多点可做优化,进而提升首屏加载速度。
2、雪碧图
这个老生常谈了,为了减少图片请求次数,加快页面加载,当然会考虑使用雪碧图。尽量使用::before或::after伪类,Sprites中的图片排版可以更紧 ,图片体积更小, HTML更简洁。
<style lang="stylus" scoped> .chose-house { height: 86px; width: 64px; margin 0 auto position relative &::before { content: ‘\20‘; height: 100%; width: 100%; position: absolute; left: 0; top: 0; background: url(‘../../assets/sprite-min.png‘) 0px 0px no-repeat; } } </style>
3、路由懒加载
关于路由懒加载这一部分,尤大在vue-router文档中也有所提及,链接点击这里。
其实在vue项目中使用路由懒加载非常简单,我们要做的就是把路由对应的组件定义成异步组件,代码如下
//在router/index.js中引入组件时可使用如下异步方式引入 const Foo = resolve => { // require.ensure 是 Webpack 的特殊语法,用来设置 code-split point // (代码分块) require.ensure([‘./Foo.vue‘], () => { resolve(require(‘./Foo.vue‘)) }) } // or const Foo = resolve => require([‘./Foo.vue‘], resolve)
再将组件按组分块,如
const Foo = r => require.ensure([], () => r(require(‘./Foo.vue‘)), ‘group-foo‘)
实际项目中的代码则如同我在章节《路由权限判定》提及到的一样
const getWorkOrder = pageName => resolve => require([‘../pages/WorkOrder‘], pages => resolve(pages[pageName])) let routers = []; routers = [ { path: ‘/workorder‘, name: ‘workorder‘, component: room, children: [ { path: ‘list‘, // 管家端工单列表 name: ‘list‘, rule: 3, component: getWorkOrder(‘WorkOrderList‘) //WorkOrder, }, { path: ‘managerList‘, // 店长端工单列表 name: ‘managerList‘, rule: 6, component: getWorkOrder(‘ManagerWorkOrder‘) // WorkOrder, }, ] } ]
如上将组件通过传递pageName参数分别打包到了各个chunk中,这样每个组件加载时都只会加载自己对应的代码,从而加快渲染速度!
4、全局组件按需注册
当时我们为了优化首屏渲染速度,也是考虑到这一点,项目的src/main.js文件主要负责注册全局组件,插件,路由,以及实例化Vue等。在webpack的配置里面也是当成entry入口进行了配置,如果我在main.js里面讲每个组件都进行import的话,那么它将会全部一起注册打包,页面加载也会将每个组件文件都加载下来,这样对渲染速度还是有一定影响的。
解决方法就是:按需注册,这样在打包的时候,会按需加载首页(其他界面也同样适用)使用到的全局组件。基本步骤如下:
将需要注册的组件写进components/base.js文件中,然后exports出来
exports.Foo = require(‘./Foo.vue‘); exports.Bar = require(‘./Bar.vue‘); exports.Baz = require(‘./Baz.vue‘);
在main.js中进行注册
const components = [ require(‘./components/base‘).Foo, require(‘./components/base‘).Bar, require(‘./components/base‘).Baz, ]; components.map(component => { Vue.component(component.name, component); });
hybird应用开发的坑:
1:ios状态栏与页面内容重叠(webview中),如果是在微信端的网页,可以忽略这个坑。
解决方法:判断设备类型,如果是ios则加入独有的样式:一般状态栏的高度是20px
var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isiOS){ $("body").addClass("uh_ios7"); }
样式文件下加这段:
.uh_ios7 .uh,.uh_ios7{ padding: 20px 0 0; }
3:当页面输入框获取焦点的时候,ios页面滚动导致头部与状态栏重叠:
首先我们下载插件: 传送门
cordova plugin add ionic-plugin-keyboard.
然后在app.js中加入代码:
$ionicPlatform.ready(function () { if (window.cordova && window.cordova.plugins.Keyboard) { window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); if (window.ionic.Platform.isIOS()) { window.cordova.plugins.Keyboard.disableScroll(true); } } });
注意:在ios上$ionicPlatform.ready可能进不去————解决办法就是:
将cordova.js放在页面最底部引入!!!!fuck!!
4:ios上如何让绝对定位在页面底部的输入框,随键盘的出现而上移(仅限网页)?
利用dom方法:scrollintoView()。
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平.
例子:document.querySelector(".pinlun_input").scrollIntoView(false) //这是js方法,不要用jquery选择器执行此方法
5、安卓浏览器看背景图片,有些设备会模糊。
用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960*640分辨率,在网页里只显示了480*320,这样devicePixelRatio=2。现在android比较乱,有1.5的,有2的也有3的。
想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100*100,背景图必须得200*200,然后background-size:contain;,这样显示出来的图片就比较清晰了。
代码可以如下:
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;都可以,大家试试!
6、图片加载
若您遇到图片加载很慢的问题,对这种情况,手机开发一般用canvas方法加载:
下面举例说明一个canvas的例子:
<li><canvas></canvas></li>
js动态加载图片和li 总共举例17张图片!
vartotal=17;
varzWin=$(window);
varrender=function(){
varpadding=2;
varwinWidth=zWin.width();
varpicWidth=Math.floor((winWidth-padding*3)/4);
vartmpl ='';
for(vari=1;i<=totla;i++){
varp=padding;
varimgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
varimageObj = newImage();
imageObj.index = i;
imageObj.onload = function(){
varcvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();
3、假如手机网站不用兼容IE浏览器,一般我们会使用zeptojs。