ApiCloud开发经验总结

1、前端框架

尽量不要使用jQuery、AngularJS、BootStrap等重型的框架,摆脱对$的依赖,培养自己动手的习惯,但是可以根据功能需求在特定页面中使用功能独立的Mobile First框架

默认样式设置、DOM操作和字符串处理推荐使用APICloud前端框架(api.js和api.css)
移动端UI框架推荐使用AUI

2、前端框架:

尽量不要使用jQuery、AngularJS、BootStrap等重型的框架,摆脱对$的依赖,培养自己动手的习惯,但是可以根据功能需求在特定页面中使用功能独立的Mobile First框架

默认样式设置、DOM操作和字符串处理推荐使用APICloud前端框架(api.js和api.css)
移动端UI框架推荐使用AUI

3、 屏幕适配:要正确设置viewport,建议使用720*1280尺寸的UI图,

优先考虑绝对计量类的单位 px,应先在UI效果图中(如720x1280尺寸图)量出元素的宽或高对应的 px 值,再除以屏幕倍率(如分辨率为720x1280设备的屏幕倍率通常为 2) 来得到书写样式时的确切数值。

!!!注意!!!: APICloud项目验收时会根据设计提供的UI图尺寸(如720x1280),在对应屏幕分辨率的手机设备(如720x1280)中安装运行,
将运行后的页面与UI效果图一一进行对比。
!!!注意!!!: H5界面的实现要与UI设计完全一致,精细到0.5px。 !!!注意!!!: openFrame/FrameGroup等时,应使用auto结合margin布局,以动态适应变化无常的android设备屏幕。 推荐文档:屏幕适配原理及实现
https://docs.apicloud.com/Dev-Guide/screen-adapt-guide

4、窗口关闭处理:开发过程中根据需要处理Android的keyback事件和iOS的回滑手势。

!!!注意!!!:Android上要在Window中才能监听到keyback事件,Frame中无法监听到keyback事件;
在iOS7以上的系统上可以在openWin的时候通过设置slidBackEnabled参数来实现是否支持回滑手势关闭窗口的功能。
!!!注意!!!:在后台关闭页面时,应注意在关闭方法中添加animation:{type:"none"},来防止切换动画的出现影响用户体验;

5、窗体背景图片:避免使用H5来实现body级别的背景图片,可以使用Window或Frame的bgColor参数以原生的方式来高效实现

!!!注意!!!: 不建议通过给body元素指定background的方式来实现body级别的背景图片,特别是高清的大背景图片用H5方式实现会严重影响渲染性能。

6、导航切换:切换底部导航或顶部分类菜单的时候,要求切换体验平滑,切换过程不能出现白屏、闪屏等现象

!!!注意!!!:建议使用FrameGroup来实现Frame的切换,要按需合理配置预加载的Frame数量,每个Frame要有明显的刷新机制,不能每次切换都进行刷新和重绘。
!!!注意!!!:如果使用模块来实现底部导航栏推荐使用NVTabBar模块。

7、列表滚动:滚动效果要平滑流畅,不能使用iscroll等JS的方式来实现滚动

!!!注意!!!:建议使用Window+Frame的UI结构,以Native的方式来实现列表页面的滚动。
!!!注意!!!:在iOS上要支持点击状态栏能自动回到顶部的效果,可以通过在openWin或openFrame的时候配置scrollToTop参数来实现;
此效果在FrameGroup中使用的时候要注意确保只有当前显示的Frame的scrollToTop属性为true,其它Frame的scrollToTop属性为false。

8、交互响应:点击事件必须处理click事件的300ms延迟问题,优化点击响应速度,建议通过为可点击的元素增加tapmode属性来优化点击速度。

!!!注意!!!:引擎对具有tapmode属性的元素点击事件的优化处理会在apiready事件触发之前,根据当前的dom树自动进行优化。
在apiready之后加载的数据使用要显式的调用api.parseTapmode方法来进行主动的tapmode处理,例如在上拉加载更多数据后,要调用一下api.parseTapmode方法.
!!!注意!!!:要按UE设计确定可点击区域的大小,可以适当扩大点击区域来保障点击反应的灵敏。 !!!注意!!!:api.parseTapmode调用会有性能成本,不需要的情况下不要随便调用。 !!!注意!!!:要按照需求明确所有按钮点击时的交互效果,为tapmode属性设置正确的样式值,对于没有交互效果的点击实现,可以不为tapmode属性指定任何样式,
但是为了优化点击速度,必须要给元素增加tapmode属性。

9、网络请求状态处理:APP要判断当前的网络状态,请求过程要按UI设计有明显的状态提示;网络超时或网络请求失败的时候要进行相关处理并有错误提示。

api对象和dialogBox模块下面封装了常用的提示对话框方法。
https://docs.apicloud.com/Client-API/UI-Layout/dialogBox

10、数据缓存:要对GET请求进行数据的缓存处理,在用户没用网络的情况下,仍然能够看到APP的静态界面布局以及上次已经缓存的服务器端数据。

!!!注意!!!:可以在api.ajax方法中设置cache参数为true来开启缓存;也可以使用api.writeFile和api.readFile方法,在获取数据后自己实现简单的数据缓存,
或使用fs和db模块来缓存数据。 https:
//docs.apicloud.com/Client-API/api#3

11、 图片缓存:必须手动进行图片的缓存处理,需要调用api.imageCache方法实现。

!!注意!!!:Webview默认的缓存机制存在缺陷,在跨窗口时表现不好,并且存在对所缓存图片的尺寸限制等问题,
所有APICloud应用的图片缓存不能依赖Webview默认的缓存机制,必须手动实现。

12、图片处理:要减少由图片造成的内存占用,减少图片缩放等耗性能的操作,服务器端要根据产品设计提供合适尺寸的大图、小图、缩略图等

!!!注意!!!:APICloud应用所占用的内存大小由所加载的网页大小决定,通常图片过多过大会造成整个应用的内存占用过大,另外在浏览器中进行图片的缩放处理成本也很高。
!!!注意!!!:列表中的头像等缩略图,宽高应控制在250-300px之间,小于这个范围大屏手机容易失真,大于这个范围消耗更多内存和性能。

13、配置外部字体:可以根据项目的需要引入外部字体,但是要控制外部字体文件的大小,字体文件不宜过大。

!!!注意!!!:Android上默认有3种字体:sans, serif, monospace,在开发人员不指定的情况下,默认为sans,这3种字体在开发过程中都是通过字体名进行引用,
系统会自动对应到内置字体文件。但是,对于外部的字体文件,Android上无法实现通过引擎配置后成为内置的字体文件,只能通过@font-face的方式在每个页面中重复加载,
每一个要使用外部字体的Window或Frame都要引入一遍,如果字体体积过大会占用大量内存,并且影响页面的加载速度。
!!!注意!!!:iOS可以在config.xml文件中进行外部字体文件的配置,配置完成后就可以像系统内置字体一样在页面中指定了,
无需在每个Window或Frame中通过@font-face的方式引入。 https://docs.apicloud.com/Dev-Guide/app-config-manual#14-1

14、JavaScript模版:建议使用doT模版等轻量级的模版。

!!!注意!!!:要优先选择使用Mobile First的模版,体量小,生成的文本效率高。https://github.com/apicloudcom/APICloud-JS-Modules

 

猜你喜欢

转载自www.cnblogs.com/haonanZhang/p/9023234.html