top100s混合式移动开发应用的设计v2

1、目的：AndroidAPPIOS APP公众帐号公众帐号揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！新的移动客户端应用功能新的应用功能新的应用功能新的应用功能新的应用功能现状与背景揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！两年前的我们132公众帐号AndroidAPPIOS APP公众帐号揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！WAPWEB开发团队Android开发团队IOS 开发团队更新到服务器，并提供公众地址和端口很多个安卓市场App Store新的应用功能新的应用功能新

2、的应用功能新的应用功能做过这样的尝试12公众帐号AndroidAPPIOS APP公众帐号揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！WAP开发团队跨平台开发团队（AppCan,PhoneGap,Titanium,Sencha）发布到服务器，并提供公众访问地址和端口很多个安卓市场App Store新的应用功能新的应用功能新的应用功能新的应用功能我们为什么还要进一步选择（1）不同步：面对两个或以上的团队，在人力时，无法同步开展设计、开发工作（2）发布不同步：新功能、市场机会新活动能在Android、平台上即时发布；而在iOS平台上需要等待苹果公司审核（3）A

3、PP和WAP平台的技术差异，几乎无法做到共享开发和同步上线运营效果揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！痛点：需要解决什么样的具体问题（1）降低成本，合并开发团队（2）发布完全同步（到IOS、Android、Win）（3）在我已有的应用上叠加升级（不希望重构整个应用）（4）我能完全掌控代码揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！选择HTML5的顾虑揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！HTML5原生App大量的页面交互差优硬件调用差优复杂的多页面流程差中动态的内容优

4、中动态的界面优差功能发布时效优差故障修复时效优差HTML5适合我们么揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！要求项适合不适合界面交互页面交互少页面交互多，尤其输入多流程逻辑界面流程简单复杂的弹窗、来回跳转硬件调用少量设备要求大量设备调用加密要求原生的支持不加密算法最有可能的方案选择是揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！NativeWebViewHTML5混合式移动开发设计介绍揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！基于HTML5的混合式移动开发架构和设计/浏览器IO

5、S客户端Android客户端/客户端功能客户端功能HTML5应用框架功能应用话费充值充值转账应用快充应用列表应用列表WebApp Javascript LIB 前端统一接口标准安全校验安全校验前端 LIB(JS APIs) 实现原生 LIB(JS APIs) 接口调用应用加载应用加载应用更新应用更新WebViewUIWebViewWebApp Native LIB 原生统一接口标准内容缓存内容缓存Andriod原生LIB(Native APIs) 实现IOS原生 LIB(Native APIs) 实现客户端前置综合管理平台揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大

6、的推动力！消息管理生命周期管理应用服务器HTML5离线版本HTML5版本服务器端 LIB(Native APIs)实现应用服务器内置浏览器服务器交互Ajax原生交互方法IFRAME/PROMPT原生交互方法IFRAME应用功能持续更新与发布原生APP的离线更新案例验证无需苹果审核（F，V，D，K）揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！压缩包(.zip)代码AndroidiOS客户端(F,D)(V,D,K)启动运行解压与校验应用内检查更新版本管理服务器安全密钥K摘要D版本号V压缩包F应用功能持续更新与发布WAP的更新案例更新自定义菜单揭示研发管理白金定

7、律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！公众账号管理平台压缩包(.zip)代码公众账号自定义菜单通过内置浏览器应用WEB服务器服务器端API实现Web Content（1） HTML5与原生交互同步调用：等待返回值的交互异步调用：回调函数的交互（2） 原生函数调用结合本地JavaScript和原生交互桥梁，提供原生函数调用接口API（3） 界面样式与原生相似CSS3揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！HTML5与原生交互（1）Server Client 模式（通用同步、异步）揭示研发管理白金定律，那些激动人心的创新与，使得团

8、队获得过多源动力与更大的推动力！Server.InetAddress iaddr = .InetAddress.getLocalHost(); serverSocket = new ServerSocket(8888, DEFAULT_MAX_CLIENT, iaddr);while (mRun) Socket socket = serverSocket.accept();HttpRequestHandler requestHandler = new HttpRequestHandlerImp(); requestHandler.setSocket(socket);requestHandler

9、.setToken(token);Thread thread = new Thread(requestHandler,Request+id+); thread.start();HttpRequestHandlerImp：String token = params.getString(token); if (verifyRequest(token) responseBody = HTML5APIManager.getInstance().exec( params.getString(service), params.getString(action),new JSONObject(params.

10、getString(“args”);Clientvar url = ;var data = service:service, action:action, args:args, token:token;$.ajax (type: GET, url: url,async:true, /异步true，同步false data: data,contentType: application/json; charset=utf-8, dataType: json,success: function (data) success(message);elsefail(message);,error: fun

11、ction (msg) alert(msg););HTML5与原生交互（2）WebView URL模式（Android异步）揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！Native以下代码仅作流程示意! mWebView.addJavascriptInterface(new AppJavaInterface(), “intf);public boolean shouldOverrideUrlLoading(WebView view, String url) if (url != null & url.startsWith(mytag) /在这里处理请求UR

12、L及其参数key = getKeyFromURL(url);cmd = new JSONObject(AppJavaInterface.getCmdOnce(key); arg = new JSONObject(AppJavaInterface.getArgOnce(key);/交给线程去处理。AsynServiceHandler asyn = new AsynServiceHandlerImpl();Thread thread = new Thread(asyn, asyn_ + (threadIdCounter+); thread.start();return true;elseview.

13、loadUrl(url); return true;AsynServiceHandler：final String responseBody = Html5APIManager.getInstance().exec( service,action,args);handler.post(new Runnable() public void run()/其结果由线程回调Message Handler再回调WebView对象的JS交互webView.loadUrl(javascript:Html5Bridge.callBackJs(+responseBody+,+key+););Browservar

14、 Html5Bridge = call_Android_Native:function(cmd, args, success, fail) var key = ID_+(+this.idCounter);f.setCmds(cmd,key); f.setArgs(args,key); this.CALLBACK_SUCCESSkey=success; this.CALLBACK_FAILkey=fail;var iframe = document.createElement(IFRAME); iframe.setAttribute(src, mytag:

15、/request?key=+key); document.documentElement.appendChild(iframe); iframe.parentNode.removeChild(iframe);iframe = null;,callBackJs:function(result,key) var obj = JSON.parse(result); var message = obj.message; var status = obj.status; if(status=0)setTimeout(Html5Bridge.CALLBACK_SUCCESS+key+(+message+)

16、,0);elsesetTimeout(Html5Bridge.CALLBACK_FAIL+key+(+message+),0);HTML5与原生交互（3）WebView JSPrompt模式（Android同步）揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！Native以下代码仅作流程示意public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) JSONObject args = null; J

17、SONObject head = null; try head = new JSONObject(message);if (defaultValue != null & !defaultValue.equals() try args = new JSONObject(defaultValue); catch (Exception e) e.printStackTrace();String execResult = HTML5APIManager.exec(head.getString(IHTML5API.SERVICE), head.getString(IHTML5API.ACTION), a

18、rgs);result.confirm(execResult); return true; catch (JSONException e) catch (APINotFoundException e) Browservar exec = function(service,action,args) var json = service:service, action:action;var result_str = prompt(JSON.stringify(json),args);.HTML5与原生交互（4）WebView URL模式（IOS异步）setTimeout(Html5Bridge.C

19、ALLBACK_FAIL+key+(+message+),0);揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！Native- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType NSURL* url = request URL;if (url scheme isEqualToString:mytag) /识别消息队列IDNSMuta

20、bleString *_keyStr =NSMutableString stringWithString: url query;/获取消息队列参数NSDictionary *jsons = self getMyAppHtmlCallings:_keyStr;/这里会调用getInputCmdgetInputArgs等取得API命令和参数/分解出Action， Service， ArgsNSString *_responseService = jsons objectForKey:serviceretain; NSString *_responseAction = jsons objectFor

21、Key:actionretain; NSDictionary *_responseArgs = jsons objectForKey:paramsretain; NSString *asyn= jsons objectForKey:”asynretain;if (asyn) /根据Action,Service,Args启动线程执行异步调用函数，线程内回调callBackJavascriptInterface（代码略）else/同步（略）return YES;-(void)callBackJavascriptInterface:(NSString*)message key:(NSString*)

22、keyStr self.webView stringByEvaluatingJavaScriptFromString: NSStringallocinitWithFormat:”Html5Bridge.callBackJs(%,%);,message,keyStr;Browser以下代码仅作流程示意var Html5Bridge = call_IOS_asyn_Native:function(cmd, args, success, fail) var key = ID_+(+this.idCounter); this.INPUT_CMDSkey = cmd;this.INPUT_ARGSkey

23、 = args this.CALLBACK_SUCCESSkey=success; this.CALLBACK_FAILkey=fail;var iframe = document.createElement(IFRAME); iframe.setAttribute(src, mytag:/request?key=+key); document.documentElement.appendChild(iframe); iframe.parentNode.removeChild(iframe);iframe = null;,getInputCmd:function(key) return thi

24、s.INPUT_CMDSkey;,getInputArgs:function(key) return this.INPUT_ARGSkey;,callBackJs:function(result,key) var obj = JSON.parse(result); var message = obj.message; var status = obj.status; if(status=0)setTimeout(Html5Bridge.CALLBACK_SUCCESS+key+(+message+),0);elseHTML5与原生交互（5）WebView URL模式（IOS同步）揭示研发管理白

25、金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！Native- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType NSURL* url = request URL;if (url scheme isEqualToString:mytag) /识别消息队列IDNSMutableString *_keyStr =NSMutableString str

26、ingWithString: url query;/获取消息队列参数NSDictionary *jsons = self getMyAppHtmlCallings:_keyStr;/分解出Action， Service， ArgsNSString *_responseService = jsons objectForKey:serviceretain; NSString *_responseAction = jsons objectForKey:actionretain; NSDictionary *_responseArgs = jsons objectForKey:paramsretain

27、; NSString *asyn= jsons objectForKey:”asynretain;if (asyn)/异步（略）else/根据Action,Service,Args执行同步调用函数（代码略） self callBackJavascriptInterface:message key:_keyStr;return YES;return YES;Browservar Html5Bridge = call_IOS_sync)Native:function(cmd, args, success, fail) var key = ID_+(+this.idCounter); this.IN

28、PUT_CMDSkey = cmd;this.INPUT_ARGSkey = args;var iframe = document.createElement(IFRAME); iframe.setAttribute(src, mytag:/request?key=+key); document.documentElement.appendChild(iframe); iframe.parentNode.removeChild(iframe);iframe = null;return this.OUTPUT_RESULTSkey; /同步调用时返回值,getInputCmd:function(

29、key) return this.INPUT_CMDSkey;,getInputArgs:function(key) return this.INPUT_ARGSkey;,callBackJs:function(result,key) this.OUTPUT_RESULTSkey = result;原生函数调用Webview/Servlet揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！API Manager/Reflector API InterfaceAPI Implementations原生实现原生接口接口管理器HTML5与原生交互桥梁myhtml5ap

30、p.js html5.js前端接口HTML5 Web 应用界面CSS3 是 CS如：盒子模文更加丰富且实用的规范，言模块、背景和边框、边框、块。ox、将会显提高程总而言之，体验。媲美的界面样式和用户揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！字特效框模型背景和Can I use?C待改进的问题揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！HTML5实践的经验教训适配问题中的碎片化程度降低仍然未真正实现；解决思路：的适配测试与修复 HTML5 国产（山寨）机尤其是篡改过操作系统的，适配问题尤其严重；解决思路：更多的适配测试

31、与修复；拿WebView源代码来做适配修改，做的HTML5容器体验问题 流畅性常常比不上原生应用；解决思路：不断尝试，选择最合适的UI实现样式，放弃 花哨无用的设计；着重从渲染优化性能版对依赖硬件的功能难以实现；解决思路：平台选择合适的功能，。提升最有价值的功能点，删减可能出现负担点功能点，引导用户选择适用的揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！HTML5实践的改进移动场景优化性能 高成本的调试设备投入 优秀的专业优化性能：从前端渲染、网络传输、后端逻辑各方面移动 牺牲的设计的功能：降低交互的复杂度，削减可有可无的功能 更加优秀的UE/UI专业揭示研

32、发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！效益分析揭示研发管理白金定律，那些激动人心的创新与，使得团队获得过多源动力与更大的推动力！这个方案使得团队发生了变化微运营规客户端运营运营划微需求设计IOS需求设计Android需求设计需求设计1.降低团队成本 2.同步发布应用3.减少开发IOS客户端开发Android客户端开发微客户HTML5应用开发原生APP框架适配端WAP开发各Android市场发布HTML5应用本地服务器发布按需到应用商店发布AppStore上架部署WAP用户自动户实时用户按需更新H5应用用H5应用 更新主APP用户主动更新用户主动更新用户实时更新揭示研发