ApiCloud开发经验总结
2021-04-11 16:31
标签：交互效果 图片缓存 文件的 family col viewport doc manual 使用 1、前端框架： 尽量不要使用jQuery、AngularJS、BootStrap等重型的框架，摆脱对$的依赖，培养自己动手的习惯，但是可以根据功能需求在特定页面中使用功能独立的Mobile First框架 2、前端框架： 尽量不要使用jQuery、AngularJS、BootStrap等重型的框架，摆脱对$的依赖，培养自己动手的习惯，但是可以根据功能需求在特定页面中使用功能独立的Mobile First框架 3、 屏幕适配：要正确设置viewport，建议使用720*1280尺寸的UI图， 优先考虑绝对计量类的单位 px，应先在UI效果图中（如720x1280尺寸图）量出元素的宽或高对应的 px 值，再除以屏幕倍率（如分辨率为720x1280设备的屏幕倍率通常为 2) 来得到书写样式时的确切数值。 4、窗口关闭处理：开发过程中根据需要处理Android的keyback事件和iOS的回滑手势。 5、窗体背景图片：避免使用H5来实现body级别的背景图片，可以使用Window或Frame的bgColor参数以原生的方式来高效实现 6、导航切换：切换底部导航或顶部分类菜单的时候，要求切换体验平滑，切换过程不能出现白屏、闪屏等现象 7、列表滚动：滚动效果要平滑流畅，不能使用iscroll等JS的方式来实现滚动 8、交互响应：点击事件必须处理click事件的300ms延迟问题，优化点击响应速度，建议通过为可点击的元素增加tapmode属性来优化点击速度。默认样式设置、DOM操作和字符串处理推荐使用APICloud前端框架(api.js和api.css)
移动端UI框架推荐使用AUI
默认样式设置、DOM操作和字符串处理推荐使用APICloud前端框架(api.js和api.css)
移动端UI框架推荐使用AUI
!!!注意!!!： APICloud项目验收时会根据设计提供的UI图尺寸（如720x1280），在对应屏幕分辨率的手机设备(如720x1280）中安装运行，
将运行后的页面与UI效果图一一进行对比。
!!!注意!!!： H5界面的实现要与UI设计完全一致，精细到0.5px。
!!!注意!!!： openFrame/FrameGroup等时，应使用auto结合margin布局，以动态适应变化无常的android设备屏幕。
推荐文档：屏幕适配原理及实现
https://docs.apicloud.com/Dev-Guide/screen-adapt-guide!!!注意!!!：Android上要在Window中才能监听到keyback事件，Frame中无法监听到keyback事件；
在iOS7以上的系统上可以在openWin的时候通过设置slidBackEnabled参数来实现是否支持回滑手势关闭窗口的功能。
!!!注意!!!：在后台关闭页面时，应注意在关闭方法中添加animation:{type:"none"}，来防止切换动画的出现影响用户体验；!!!注意!!!： 不建议通过给body元素指定background的方式来实现body级别的背景图片，特别是高清的大背景图片用H5方式实现会严重影响渲染性能。
!!!注意!!!：建议使用FrameGroup来实现Frame的切换，要按需合理配置预加载的Frame数量，每个Frame要有明显的刷新机制，不能每次切换都进行刷新和重绘。
!!!注意!!!：如果使用模块来实现底部导航栏推荐使用NVTabBar模块。
!!!注意!!!：建议使用Window+Frame的UI结构，以Native的方式来实现列表页面的滚动。
!!!注意!!!：在iOS上要支持点击状态栏能自动回到顶部的效果，可以通过在openWin或openFrame的时候配置scrollToTop参数来实现；
此效果在FrameGroup中使用的时候要注意确保只有当前显示的Frame的scrollToTop属性为true，其它Frame的scrollToTop属性为false。!!!注意!!!：引擎对具有tapmode属性的元素点击事件的优化处理会在apiready事件触发之前，根据当前的dom树自动进行优化。
在apiready之后加载的数据使用要显式的调用api.parseTapmode方法来进行主动的tapmode处理，例如在上拉加载更多数据后，要调用一下api.parseTapmode方法.
!!!注意!!!：要按UE设计确定可点击区域的大小，可以适当扩大点击区域来保障点击反应的