唐平海：低成本快速上线的轻量级APP开发实践.pptxVIP

唐平海 研发经理 广东省电信规划设计院有限公司 打造低成本快速上线的轻量级APP开发实践 本次案例--甜橙理财 添益宝 活期宝 定期宝 基金 股票 发现 案例分析：甜橙理财产品多；渠道多；迭代速度快；测试资源宝贵。 APP开发方案 方案一：Native 优点: 1、好的用户体验 2、性能高 3、运行效率快 缺点: 1、维护成本高 2、开发效率低 3、需要通过APP Store或market,审核时间较长 4、必须手动下载更新 方案二：HTML5(WAP) 优点: 1、跨平台 2、开发速度快 3、易于发布更新 缺点: 1、运行效率低 2、体验差 方案三：Hybrid 优点: 1、跨平台 2、开发速度快 3、自主更新 4、体验相对比较好 5、能够使用Native功能 缺点： 1、性能相对Native差些 2、灵活度不够 3、学习成本高 Native+HTML5轻量级解决方法 HTML5 模块一 容器 安全 微服务 模块二 模块三 模块四 解决方法 Angularjs flexible webpack HTML5 方 式 在 线 离 线 Angularjs 使用双大括号{{}}语法进行数据绑定； 使用DOM控制结构来实现迭代或者隐藏DOM片段； 支持表单和表单的验证； 能将逻辑代码关联到相关的DOM元素上； 可自定义的组件。 webpack 模块化的解决方案 实现测试和生产环境使用不同的配置文件 使用npm安装框架依赖，可以方便引入pulgins，方便对CSS、JS合并压缩、图片的压缩集成。 将项目资源大部分输出到一个Bundle.JS文件，减少浏览器首次加载时的资源请求 生成带有项目名称和版本号的文件夹并压缩（用于webapp） 生成带有hash的bundle.js文件，解决浏览器因为缓存不刷新的问题 flexible 动态改写meta标签 给html元素添加data-dpr属性，并且动态改写data-dpr的值 给html元素添加font-size属性，并且动态改写font-size的值 HTML5 Native容器 桥梁 XXXX.html.js 容器 路由器 处理器 Android (WebView) iOS (WKWebView) (UIWebView) 拦截XXXX://COMMON/API/方法/参数 网络请求 文件处理 回退事件 安全机制 缓存机制 更新机制 消息组件 路由处理 应用跳转 （1）HTML5与原生交互 同步调用：等待返回值的交互 异步调用：回调函数的交互 （2）原生函数调用 结合本地JavaScript和原生交互桥梁，提供原生函数调用接口API， 原生实现API接口 主要技术 快速开发:一套应用多渠道同步上线 前端开发 前端技术 ******.js 原生功能(容器) IOS Android WAP 代 码 压缩包 (.zip) 版本管理 服务器 压缩包F Android／ iOS客户端 检查更新 应用内下载 解压与校验 启动运行 （F，V，D，K） 身份验证 （F，D） （V，D，K） 版本号V 摘要D 安全密钥K 快速上线：应用内自动更新，无需等待应用审批 安全 安全键盘 自定义键盘 JNI SO .A 静态库 加密算法 签名 CA 云服务 加固 客户端 加固：通过混淆防止Android程序被反编译。可以使用第三发的混淆工具，如（百度、阿里），也可以自己编写脚本 baksmali jd-gui apktool APK 加固 反编译 反编译 反编译 安全键盘：1、自定义软键盘(随机数据) 2、提供组件对信息进行安全处理。 3、验证调用APP合法性（签名） 自定义软键盘 (随机数据、点击无效果) 注:仅随机数字是考虑用户使用习惯 1 安全键盘：1、自定义软键盘(随机数据) 2、提供组件对信息进行安全处理。 3、验证调用APP合法性（签名） 2 安全键盘：1、自定义软键盘(随机数据) 2、提供组件对信息进行安全处理。 3、验证调用APP合法性（签名） 2 ajax(URL:xxxx//common//api?a=123) Native Request(get/post) 网络传输 AFNetworking Volley 网络安全：数据通过Native进行传递，Native可以通过对称加密与非对称加密对数据行处理。 代 码 压缩包 (.zip) 版本管理 服务