top100s混合式移動(dòng)開發(fā)應(yīng)用的設(shè)計(jì)v2

1、目的：AndroidAPPIOS APP公眾帳號公眾帳號揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！新的移動(dòng)客戶端應(yīng)用功能新的應(yīng)用功能新的應(yīng)用功能新的應(yīng)用功能新的應(yīng)用功能現(xiàn)狀與背景揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！兩年前的我們132公眾帳號AndroidAPPIOS APP公眾帳號揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！WAPWEB開發(fā)團(tuán)隊(duì)Android開發(fā)團(tuán)隊(duì)IOS 開發(fā)團(tuán)隊(duì)更新到服務(wù)器，并提供公眾地址和端口很多個(gè)安卓市場App Store新的應(yīng)用功能新的應(yīng)用功能新

2、的應(yīng)用功能新的應(yīng)用功能做過這樣的嘗試12公眾帳號AndroidAPPIOS APP公眾帳號揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！WAP開發(fā)團(tuán)隊(duì)跨平臺開發(fā)團(tuán)隊(duì)（AppCan,PhoneGap,Titanium,Sencha）發(fā)布到服務(wù)器，并提供公眾訪問地址和端口很多個(gè)安卓市場App Store新的應(yīng)用功能新的應(yīng)用功能新的應(yīng)用功能新的應(yīng)用功能我們?yōu)槭裁催€要進(jìn)一步選擇（1）不同步：面對兩個(gè)或以上的團(tuán)隊(duì)，在人力時(shí)，無法同步開展設(shè)計(jì)、開發(fā)工作（2）發(fā)布不同步：新功能、市場機(jī)會新活動(dòng)能在Android、平臺上即時(shí)發(fā)布；而在iOS平臺上需要等待蘋果公司審核（3）A

3、PP和WAP平臺的技術(shù)差異，幾乎無法做到共享開發(fā)和同步上線運(yùn)營效果揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！痛點(diǎn)：需要解決什么樣的具體問題（1）降低成本，合并開發(fā)團(tuán)隊(duì)（2）發(fā)布完全同步（到IOS、Android、Win）（3）在我已有的應(yīng)用上疊加升級（不希望重構(gòu)整個(gè)應(yīng)用）（4）我能完全掌控代碼揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！選擇HTML5的顧慮揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！HTML5原生App大量的頁面交互差優(yōu)硬件調(diào)用差優(yōu)復(fù)雜的多頁面流程差中動(dòng)態(tài)的內(nèi)容優(yōu)

4、中動(dòng)態(tài)的界面優(yōu)差功能發(fā)布時(shí)效優(yōu)差故障修復(fù)時(shí)效優(yōu)差HTML5適合我們么揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！要求項(xiàng)適合不適合界面交互頁面交互少頁面交互多，尤其輸入多流程邏輯界面流程簡單復(fù)雜的彈窗、來回跳轉(zhuǎn)硬件調(diào)用少量設(shè)備要求大量設(shè)備調(diào)用加密要求原生的支持不加密算法最有可能的方案選擇是揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！NativeWebViewHTML5混合式移動(dòng)開發(fā)設(shè)計(jì)介紹揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！基于HTML5的混合式移動(dòng)開發(fā)架構(gòu)和設(shè)計(jì)/瀏覽器IO

5、S客戶端Android客戶端/客戶端功能客戶端功能HTML5應(yīng)用框架功能應(yīng)用話費(fèi)充值充值轉(zhuǎn)賬應(yīng)用快充應(yīng)用列表應(yīng)用列表WebApp Javascript LIB 前端統(tǒng)一接口標(biāo)準(zhǔn)安全校驗(yàn)安全校驗(yàn)前端 LIB(JS APIs) 實(shí)現(xiàn)原生 LIB(JS APIs) 接口調(diào)用應(yīng)用加載應(yīng)用加載應(yīng)用更新應(yīng)用更新WebViewUIWebViewWebApp Native LIB 原生統(tǒng)一接口標(biāo)準(zhǔn)內(nèi)容緩存內(nèi)容緩存Andriod原生LIB(Native APIs) 實(shí)現(xiàn)IOS原生 LIB(Native APIs) 實(shí)現(xiàn)客戶端前置綜合管理平臺揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大

6、的推動(dòng)力！消息管理生命周期管理應(yīng)用服務(wù)器HTML5離線版本HTML5版本服務(wù)器端 LIB(Native APIs)實(shí)現(xiàn)應(yīng)用服務(wù)器內(nèi)置瀏覽器服務(wù)器交互Ajax原生交互方法IFRAME/PROMPT原生交互方法IFRAME應(yīng)用功能持續(xù)更新與發(fā)布原生APP的離線更新案例驗(yàn)證無需蘋果審核（F，V，D，K）揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！壓縮包(.zip)代碼AndroidiOS客戶端(F,D)(V,D,K)啟動(dòng)運(yùn)行解壓與校驗(yàn)應(yīng)用內(nèi)檢查更新版本管理服務(wù)器安全密鑰K摘要D版本號V壓縮包F應(yīng)用功能持續(xù)更新與發(fā)布WAP的更新案例更新自定義菜單揭示研發(fā)管理白金定

7、律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！公眾賬號管理平臺壓縮包(.zip)代碼公眾賬號自定義菜單通過內(nèi)置瀏覽器應(yīng)用WEB服務(wù)器服務(wù)器端API實(shí)現(xiàn)Web Content（1） HTML5與原生交互同步調(diào)用：等待返回值的交互異步調(diào)用：回調(diào)函數(shù)的交互（2） 原生函數(shù)調(diào)用結(jié)合本地JavaScript和原生交互橋梁，提供原生函數(shù)調(diào)用接口API（3） 界面樣式與原生相似CSS3揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！HTML5與原生交互（1）Server Client 模式（通用同步、異步）揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)

8、隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！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異步）揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！Native以下代碼僅作流程示意! mWebView.addJavascriptInterface(new AppJavaInterface(), “intf);public boolean shouldOverrideUrlLoading(WebView view, String url) if (url != null & url.startsWith(mytag) /在這里處理請求UR

12、L及其參數(shù)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()/其結(jié)果由線程回調(diào)Message Handler再回調(diào)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同步）揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！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);揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！Native- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType NSURL* url = request URL;if (url scheme isEqualToString:mytag) /識別消息隊(duì)列IDNSMuta

20、bleString *_keyStr =NSMutableString stringWithString: url query;/獲取消息隊(duì)列參數(shù)NSDictionary *jsons = self getMyAppHtmlCallings:_keyStr;/這里會調(diào)用getInputCmdgetInputArgs等取得API命令和參數(shù)/分解出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) /根據(jù)Action,Service,Args啟動(dòng)線程執(zhí)行異步調(diào)用函數(shù)，線程內(nèi)回調(diào)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同步）揭示研發(fā)管理白

25、金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！Native- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType NSURL* url = request URL;if (url scheme isEqualToString:mytag) /識別消息隊(duì)列IDNSMutableString *_keyStr =NSMutableString str

26、ingWithString: url query;/獲取消息隊(duì)列參數(shù)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/根據(jù)Action,Service,Args執(zhí)行同步調(diào)用函數(shù)（代碼略） 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; /同步調(diào)用時(shí)返回值,getInputCmd:function(

29、key) return this.INPUT_CMDSkey;,getInputArgs:function(key) return this.INPUT_ARGSkey;,callBackJs:function(result,key) this.OUTPUT_RESULTSkey = result;原生函數(shù)調(diào)用Webview/Servlet揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！API Manager/Reflector API InterfaceAPI Implementations原生實(shí)現(xiàn)原生接口接口管理器HTML5與原生交互橋梁myhtml5ap

30、p.js html5.js前端接口HTML5 Web 應(yīng)用界面CSS3 是 CS如：盒子模文更加豐富且實(shí)用的規(guī)范，言模塊、背景和邊框、邊框、塊。ox、將會顯提高程總而言之，體驗(yàn)。媲美的界面樣式和用戶揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！字特效框模型背景和Can I use?C待改進(jìn)的問題揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！HTML5實(shí)踐的經(jīng)驗(yàn)教訓(xùn)適配問題中的碎片化程度降低仍然未真正實(shí)現(xiàn)；解決思路：的適配測試與修復(fù) HTML5 國產(chǎn)（山寨）機(jī)尤其是篡改過操作系統(tǒng)的，適配問題尤其嚴(yán)重；解決思路：更多的適配測試

31、與修復(fù)；拿WebView源代碼來做適配修改，做的HTML5容器體驗(yàn)問題 流暢性常常比不上原生應(yīng)用；解決思路：不斷嘗試，選擇最合適的UI實(shí)現(xiàn)樣式，放棄 花哨無用的設(shè)計(jì)；著重從渲染優(yōu)化性能版對依賴硬件的功能難以實(shí)現(xiàn)；解決思路：平臺選擇合適的功能，。提升最有價(jià)值的功能點(diǎn)，刪減可能出現(xiàn)負(fù)擔(dān)點(diǎn)功能點(diǎn)，引導(dǎo)用戶選擇適用的揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！HTML5實(shí)踐的改進(jìn)移動(dòng)場景優(yōu)化性能 高成本的調(diào)試設(shè)備投入 優(yōu)秀的專業(yè)優(yōu)化性能：從前端渲染、網(wǎng)絡(luò)傳輸、后端邏輯各方面移動(dòng) 犧牲的設(shè)計(jì)的功能：降低交互的復(fù)雜度，削減可有可無的功能 更加優(yōu)秀的UE/UI專業(yè)揭示研

32、發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！效益分析揭示研發(fā)管理白金定律，那些激動(dòng)人心的創(chuàng)新與，使得團(tuán)隊(duì)獲得過多源動(dòng)力與更大的推動(dòng)力！這個(gè)方案使得團(tuán)隊(duì)發(fā)生了變化微運(yùn)營規(guī)客戶端運(yùn)營運(yùn)營劃微需求設(shè)計(jì)IOS需求設(shè)計(jì)Android需求設(shè)計(jì)需求設(shè)計(jì)1.降低團(tuán)隊(duì)成本 2.同步發(fā)布應(yīng)用3.減少開發(fā)IOS客戶端開發(fā)Android客戶端開發(fā)微客戶HTML5應(yīng)用開發(fā)原生APP框架適配端WAP開發(fā)各Android市場發(fā)布HTML5應(yīng)用本地服務(wù)器發(fā)布按需到應(yīng)用商店發(fā)布AppStore上架部署WAP用戶自動(dòng)戶實(shí)時(shí)用戶按需更新H5應(yīng)用用H5應(yīng)用 更新主APP用戶主動(dòng)更新用戶主動(dòng)更新用戶實(shí)時(shí)更新揭示研發(fā)