开发移动端项目问题总结

2019-08-15  本文已影响0人  Rose_yang

一、

1、在用jsbridge与客户端进行数据交互的时候 注意ios不识别null

2、批量选择实现:

if (this.checkedLists.indexOf(index) > -1) {
    this.checkedLists.splice(this.checkedLists.indexOf(index), 1);
} else {
    this.checkedLists.push(index);
}

3、关于提交类型的按钮,要做好重复点击提交处理

4、多个tab键点击时请求到的数据 渲染同一个列表组件, 快速点击会出现前面点击返回的数据覆盖最后一次点击的数据,因为把获取的数据放到了同一个数组变量中,

5、touchstart touchmove touchend 实现左滑事件 在android低版本不兼容:

if (X - x > 10) {   // 右滑
 event.preventDefault();
}
if (x - X > 10) {   // 左滑
    event.preventDefault();
}

判断滑动距离 阻止默认事件 直接阻止默认事件会禁止掉列表的scroll

6、border-radius 实现圆圈 在不同手机显示不一样 且不是正圆。解决方法使用切图

7、css3实现按钮的开关效果 在Android低版本不兼容 解决:静态样式改变

8、掉起数字键盘 input type=tel

9、物理返回键 当点击物理返回键时 客户端通知H5, H5去触发左上角自定义的返回按钮的事件

10、使用jsbridge 在初始化完jsbridge的回调函数中 去初始化vue实例

11、keyup键入时计算输入的字数 在ios不兼容 使用input事件

12、safari new Date() 中不转换 2017-06-19格式 可以识别 2017/06/19


二、

1、高德地图定位升级站点到HTTPS

描述:

(1)对于需要使用定位接口的开发者,请升级站点到HTTPS(IOS10、CHROME新版浏览器等环境已禁用非安全页面的浏览器定位)
(2)HTTPS站点在引用JAVASCRIPT API的时候需要修改引用地址的协议为HTTPS:

2、vue全局配置对象Vue.http.options.emulateJSON = true;

描述:

VUE-RESOURCE中POST请求,这里的POST的DATA默认不是以FORM DATA的形式,而是REQUEST PAYLOAD,解决方式是添加全局配置VUE.HTTP.OPTIONS.EMULATEJSON = TRUE

3、使用eventBus负责组件之间的数据传递

描述:

使用BUS传值,在跳转路由后负责接收数据的组件会接收到多次消息(解决:在路由组件的BEFOREDESTROY钩子函数中取消消息的监听)

4、对js文件使用babel-loader转码,该插件是用来解析es6等代码

描述:

在WEBPACK.BASE.CONF.JS文件中MODULE下面的RULES下配置指明哪些目录下的JS文件要使用该LOADER

5、关于Vue背景图打包之后访问路径错误问题

描述:

出错点在WEBPACK.BASE.CONF.JS文件的URL-LOADER上面,

解决:

(1)使用小图片作为背景图片: 将小于10KB的图片作为背景图片,如果有大于10KB的图片作为IMG图片。
(2)修改URL-LOADER的LIMIT值

三、

1、移动端双击事件

描述:

在移动端原生没有类似(DBLCLICK)事件。第一次方案为用时间戳模拟双击,即判断两次双击事件的时间戳差值。后来发现在IOS能回偶尔失效。故最后引用三方库(HAMMER.JS)

2、下拉刷新

描述:

在给一个UL加下拉刷新效果,初期是直接加在此UL上,后来因为UL的高度小于屏幕高度。所以点击空白处不会触发。改善利用导航钩子函数BEFOREROUTEENTER、BEFOREROUTELEAVE进行处理。这里需要注意的一点就是BEFOREROUTEENTER中的THIS无效。

3、滚动行为scrollBehavior

描述:

SCROLLBEHAVIOR在移动端有的设备,SAVEDPOSITION的Y轴滚动距离适中为0。解决就是自己把滚动距离存起来存起来。注意存的时候的SCROLLTOP要处理兼容性。

4、css样式

描述:

-WEBKIT-BOX-ORIENT:VERTICAL,在CSS样式中不生效,解决方案改加到行间样式STYLE内。

5、IOS下事件穿透

描述:

在FIX下有ROUTER-LINK。在滑动滚动条过程中会触发事件穿透,进而会触发路由跳转。未解决,但尝试了几种解决方案,其一是FASTCLICK.JS;其二是POINT-EVENTS;其三是进行遮罩处理。

6、路由跳转

描述:

点击ROUTER-LINK进行路由跳转过程中,或是未进行跳转时,再用WINDOW.HISTORY.GO(-1) 或 THIS.$ROUTER.GO(-1)会出现问题。

7、 emit和on

描述:

进行父子传递事件时没有问题,但是兄弟之间进行传值就会有多次触发$ON。

8、路由跳转前和后

描述:

BEFOREROUTEENTER 和 BEFOREROUTELEAVE进行相关操作。

9、keep-alive使用

描述:

需要对数据进行缓存。

其他:

1、安卓手机调试

描述:

数据线连接,开启USB调试。在CHROME中输入 CHROME://INSPECT/#DEVICES。找到设备并打开(第一次需要翻墙)。IOS调试暂时没啥好的方案在WINDOW下

2、对一个数组进行遍历时,并在循环内进行其他复制操作。

描述:

数组A包含N个小JSON,在循环过程中,再去判断(IF)每项小JSON里的键。然后进行相关操作。解决:将数组LENGTH赋值给一个变量,循环的时候讲每个小JSON也赋值一个变量。
上一篇下一篇

猜你喜欢

热点阅读