hybird -(02:Cordova生命周期,等)
2016-12-17 本文已影响99人
廖马儿
1.页面生命周期
都是在javascript中
onLoad() // 页面加载后
onDeviceReady() // Cordova加载完成 onDeviceReady 之后所有插件才能使用。
onPause() // 进入后台
onResume() // 应用回到前台运行
2.console插件
cordova-plugin-console
终端安装,需要进入项目文件夹:
$ cordova plugin add cordova-plugin-console
3.注意事项:
1)页面要加utf-8编码
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
2)修改了代码需要在terminal 编译,在修改了代码发现没有改变之后要注意这一点,加了资源也要corvoda:
cordova build
3)在 plist 文件里面 Localization native
development region设置为 China
4.插件:
查看插件:
cordova plugin ls
安装插件:
cordova plugin add xxx
删除插件:
cordova plugin rm
更新插件:
cordova plugin update
常用插件集合:
cordova-plugin-network-information // 判断网络连接信息,网络类型等。
cordova-plugin-device // 获取设备信息
cordova-plugin-dialogs // dialog, 有异步的优点
cordova-plugin-geolocation // 设备物理位置
cordova-plugin-camera // 相机
cordova-plugin-contacts // 联系人
cordova-plugin-splashscreen // 自定义闪屏
cordova-plugin-barcodescanner // 识别,生成二维码或者条形码
5.h5在移动开发中需要遵守的规则:
hybird开发 大部分技术是:h5+js
- 使用单页开发
切换页面,生命周期重新执行一次。onDeviceReady之后事件和插件才是准备好的效果。
2)前段UI框架选择要确定长久,考虑好。
前端的UI框架很多,要选择实用于手机端的。
3)动画,特效要先试一试在手机上的效果,有的前端很好看的动画在手机端会很卡。
4)css这些要考虑手机端的性能,采用消耗cpu等较小的属性
浏览器消耗比较小的css属性:
位置-transform:translate(x,y,z)
大小-transform:scale(n)
旋转-transform:rotate(ndeg)
透明度-opacity:0..1
5)度量单位使用rem
6.页面布局
1)流式布局
像word
2)绝对定位布局
3)flexbox布局
7.手机点击事件
屏幕按下:touchstart
触碰离开:touchend
触碰移动:touchmove
一次完整的点击事件是由:touchstart+touchend