报告预览

如何开发优质Hybrid App.pdf

编号：95489

PDF 37页 4.51MB 下载积分：VIP专享

下载报告请您先登录！

如何开发优质Hybrid App.pdf

1、如何开发优质Hybrid AppHybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据安全Hybrid App技术展望Hybrid App的性能体验分析Native AppWeb AppHybrid App开发速度快开发成本低性能体验差?开发速度慢开发成本性能体验好性能体验？开发成本低开发速度快开发速度快HyBrid AppHybrid App开发模式和技术语言Hybrid App 架构Hybrid应用程序系统API系统调用应用层中间层系统层开放服务扩展功能功能模块API使用Web技术开发UI使用Native技术开发逻辑UI逻

2、辑HTML、CSS、JavaScriptNative开发语言JavaScript调用回调函数APICloud Deep Engine 架构影响Hybrid App性能体验的主要因素33%33%33%混合开发技术框架/技术平台业务逻辑实现的技术契合度混合开发工程师的技术能力选择优秀的开发团队选择契合度高的应用场景选择合适的混合开发技术中间层应用层Hybrid App行业应用场景契合度分析页面主要以静态方式展示轻量级的用户交互对实时、性能要求不高复杂的页面渲染高频次的用户交互对实时、性能有较高求页面展示用户交互原生依赖性能负荷契合度电商静态低低低高资讯静态低低低高图书静态低低低高o2o静态

3、中低低高社交静态+动态中低低高影音静态+动态低中中中地图静态+动态中高中中IoT静态中高低中直播动态中高中中休闲手游动态中中中中动作手游动态高高高低高契合度应用低契合度应用APICloud平台能力支撑600多模块上万个APIHybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据安全Hybrid App技术展望开发层面优质App的构成要素20%20%30%30%程序运行性能用户交互体验逻辑异常处理应用数据安全Hybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据

4、安全Hybrid App技术展望程序运行性能优化加载合理尺寸的图片避免短时间的集中重复请求使用WebWorker降低主线程负载减少页面Dom操作灵活运用Native 和Web技术应用数据安全逻辑异常处理用户交互体验程序运行性能加载合理尺寸的图片合理尺寸指图片页面约束尺寸的2倍或3倍图尺寸App图片来源本地3x切图应用服务器OSS网络资源本地资源加载合理尺寸的图片名称描述取值范围m指定缩略的模式：lfit：等缩放，限制在设定在指定w与h的矩形内的最图。mfit：等缩放，延伸出指定w与h的矩形框外的最图。fill：固定宽，将延伸出指定w与h的矩形框外的最图进居中裁剪。pad：固定宽，缩略填

5、充。fixed：固定宽，强制缩略。lfit,mfit,fill,pad,fixed，默认为lfit。w指定标缩略图的宽度。1-4096h指定标缩略图的度。1-4096l指定标缩略图的最长边。1-4096s指定标缩略图的最短边。1-4096limit指定当标缩略图于原图时是否处理。值是 1 表不处理；值是 0 表处理。0/1,默认是 1color当缩放模式选择为pad（缩略填充）时，可以选择填充的颜(默认是)参数的填写式：采16进制颜码表，如00FF00（绿）。000000-FFFFFF图缩放将图按照要求成缩略图，或者进特定的缩放。参数操作名称：resize指定宽缩放按例缩放注意事项对于原图：图

6、格式只能是：jpg、png、bmp、gif、webp、tiff。件不能超过20 MB。使图旋转时图的宽或者不能超过4096。对于缩略图：对缩略后的图有限制，标缩略图宽与的乘积不能超过 4096 x 4096，且单边长度不能超过 4096 x 4。当只指定宽度或者度时，在等缩放的情况下，都会默认进单边的缩放。在固定宽的模式下，会默认宽样的情况下进缩略。如果只指定宽度或者度，原图按原图格式返回。如果想保存成其他格式，详细可以查看质量变换及格式转换。调resize，默认是不允许放。即如果请求的图原图，那么返回的仍然是原图。如果想取到放的图，即增加参数调limit,0（如：https:/image-d

7、emo.oss-cn- 正在请求中？修改队列中本请求状态为“请求中”获取请求回调组数执行参数回调方法将请求回调注入该请求对应的回调数组是否重复请求？查询请求队列中该Ajax请求的状态清空请求对应回调数组重置请求状态发送请求取消返回YYNN使用WebWorkers降低主线程负载什么是 Web Worker？web worker 是运行在后台的 JavaScript，Web Worker创建的线程是受限的子线程独立于其他脚本，不会影响页面的性能。Web Worker一些使用限制：Web Worker无法访问DOM节点；Web Worker无法访问全局变量或是全局函数；Web Worker无法

8、调用alert()或者confirm之类的函数；Web Worker无法访问window、document之类的浏览器全局变量；减少页面Dom操作缓存Dom元素对象，减少获取dom元素次数/修改数量 function fnChangeNum(order)var value=document.getElementById(price).value;if(add=order)value+;else value-;if(value0)value=0;document.getElementById(price).value=value;var ePrice=document.getElementByI

9、d(price);function fnChangeNum(order)var value=ePrice.value;f(add=order)value+;else value-;if(value0)value=0;ePrice.value=value;灵活运用Native和Web技术searchBusRoute根据关键字搜索公交、地铁线路，无需调用 open 接口即可搜索searchBusRoute(params,callback(ret,err)params city：类型：字符串描述：城市line：类型：字符串描述：公交、地铁线路号（例如：1路，1号线）方法参数返回值说明setAdcod

10、e(adcode)adcode:城市编码设置adcode（城市编码）如不设置，则默认为北京。getLineList(callback)callback:回调函数线路列表获得当前城市所有线路（已排序）getCityList（callback）callback：回调函数城市列表获取当前开通地铁线路的城市列表对象。该对象的key为每个城市的adcode，value为城市的中文名和英文名。Hybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据安全Hybrid App技术展望用户交互体验优化使用数据缓存技术加快页面内容呈现设置默认占位

11、图动态适配屏幕变化按钮的优化处理加入状态信息提示应用数据安全逻辑异常处理用户交互体验程序运行性能使用数据缓存技术加快页面内容呈现加载图片的缓存处理浏览器的图片缓存获取图片地址网络请求获取图片资源浏览器页面缓存图片数据APICloud的图片缓存 api.imageCacheimageCache 图片缓存imageCache(params,callback(ret,err)params url：类型：字符串默认值：无描述：图片远程地址encode：类型：布尔默认值：true描述：（可选项）是否对url进行编码。传false时底层将不会对url进行编码policy：类型：字符串默认值：defa

12、ult描述：（可选项）缓存策略取值范围：default /默认为 cache_else_network cache_else_network /若服务器上没有更新，则使用缓存 no_cache /不使用缓存，始终从服务器获取 cache_only /当缓存存在时，只从缓存中读取 thumbnail：类型：布尔类型默认值：true描述：（可选项）使用缩略图，底层将根据当前系统及设备性能，返回最优的缩略图，有利于提高应用运行及渲染效率callback(ret,err)ret：类型：JSON 对象内部字段：status:true,/是否成功，布尔类型 url:/图片本地存储路径，若下载失败，则返回传

13、入的url，字符串类型本地化缓存图片数据请求数据的缓存应用网络请求数据页面初始化数据处理页面加载数据本地缓存数据是否存在？Y读取缓存数据本地缓存数据是否存在？Y数据本地缓存Y数据对比判断是否存在更新？N使用数据缓存技术加快页面内容呈现设置默认占位图动态适配屏幕变化拥有虚拟按键的手机iPhone的热点共享rect：类型：JSON 对象默认值：充满整个父页面描述：（可选项）frame 的位置和大小，设置 margin 后，在不同手机上面会保持与父页面的各方向边距一致，而中间区域会自动扩充。内部字段：x:0,/左上角x坐标 y:0,/左上角y坐标 w:320,/宽度，若传auto，页面从x位

14、置开始自动充满父页面宽度 h:480 /高度，若传auto，页面从y位置开始自动充满父页面高度 marginLeft:0,/相对父 window 左外边距的距离 marginTop:0,/相对父 window 上外边距的距离 marginBottom:0,/相对父 window 下外边距的距离 marginRight:0 /相对父 window 右外边距的距离按钮的优化处理减少300ms的点击延迟加入双击或多击判定，方式出现重复请求保证合理的点击区域空间，提高用户体验加入按钮点击等交互特效，给用户感官上的交互反馈加入状态信息提示网络加载进度提示空数据提示异常错误提示业务逻辑必要提

15、示Hybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据安全Hybrid App技术展望逻辑异常处理Ajax请求的错误处理列表请求非空判断及相应的处理逻辑加入函数参数校验，避免产生逻辑异常考虑应用生命周期对业务逻辑的影响应用数据安全逻辑异常处理用户交互体验程序运行性能Hybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据安全Hybrid App技术展望应用数据安全底层的代码加密重要的数据信息放在服务端保存使用加密技术保存前端数据重视网络数据交互的数

16、据安全应用数据安全逻辑异常处理用户交互体验程序运行性能底层的代码加密重要的数据信息放在服务端保存方案一：开发者通过 getOrderId、payOrder 自己处理签名过程（微信开放平台建议把 getOrderId 放在服务器端执行）；方案二：通过 config 接口和 pay 接口把签名过程交予模块内部处理。config 接口的参数可通过 key.xml 文件配置。字段名变量名描述公众账号IDappid微信支付分配的公众账号ID（企业号corpid即为此appId）商户号mch_id微信支付分配的商户号设备号device_info自定义参数，可以为终端设备号(门店号或收银设备ID)，PC网页

17、或公众号内支付可以传WEB随机字符串nonce_str随机字符串，长度要求在32位以内。推荐随机数生成算法签名sign通过签名算法计算得出的签名值，详见签名生成算法签名类型sign_type签名类型，默认为MD5，支持HMAC-SHA256和MD5。商品描述body商品简单描述，该字段请按照规范传递，具体请见参数规定商品详情detail使用加密技术保存前端数据key.xml文件配置说明如上，您可以在res/key.xml中配置多个键值对，然后编译时，云服务器会自动加密 key.xml文件。在应用内，您可以通过api.loadSecureValue方法，获取指定的 key 对应的值。对于模块开

18、发者，也可以在模块内通过iOS/Andorid相应方法获取。loadSecureValue 从加密的key.xml文件中读取指定数据，key.xml文件放置于网页包里面的res目录，配置方式：loadSecureValue(params,callback(ret,err)params sync：类型：布尔默认值：false描述：执行结果的返回方式。为false时通过callback返回，为true时直接返回。key：类型：字符串默认值：无描述：键callback(ret,err)ret：类型：JSON 对象内部字段：value:/值重视网络数据交互的数据安全优先使用Https进行安全的HTTP数据传输对于重要数据进行加密传输使用MD5、SHA1、SHA256等摘要算法校验数据的完整性，防止数据被篡改使用AES等可逆加密方式对传输数据进行加密，防止重要数据被破译对于获取验证码等调用第三方收费接口的业务逻辑中，加入图形校验码，防止被恶意脚本利用产生恶意透支消费Hybrid App的性能体验分析Hybrid App开发优化技巧分享程序运行性能优化用户交互体验优化逻辑异常处理应用数据安全Hybrid App技术展望Hybrid App技术展望性能技术跨平台

友情提示

1、下载报告失败解决办法
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站报告下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

本文（如何开发优质Hybrid App.pdf）为本站（云闲）主动上传，三个皮匠报告文库仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三个皮匠报告文库（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。

上海品茶

如何开发优质Hybrid App.pdf

如何开发优质Hybrid App.pdf