《APP 跨平台开发技术分析.docx》由会员分享，可在线阅读，更多相关《APP 跨平台开发技术分析.docx（17页珍藏版）》请在三一办公上搜索。
1、APP跨平台开发技术分析大纲1. 技术背景2. 技术简介3. 行业内技术统计4. 公司案例与行业采用5. 技术积累与沉淀技术背景APP跨平台开发是目前比较热门的方向，采用Web框架开发，以Web的开发体验快速构建应用，提高了迭代的效率。同时 Web开发方式大多使用动态 语言，能够绕过原生开发限制动态加载，因此具备热加载、热更新的能力。技术简介Cordova/WebView利用Android和iOS上的WebView容器，使APP能够执行html、css和 js脚本，展示Web页面。如果需要原生功能就添加bridge供JavaScript调用。 具有开发效率高、跨平台、支持动态发布等特点。架构图
2、:Cordova ApplicationMobile OSdering bView)lw-工CordobaNative APIsServicesCord ova PluginsGeolocationMediaNetworkStorageCustom PluginsInputGraphics加载流程：假设HTML界面以及JS/CSS等资源已下载.1. Cordova （WebView）解析HTML文档，异步下载外链资源，开始构建DOM树.（下载JS会阻塞后续DOM的解析以及其它资源的加载（如CSS/JS/图 片资源等），下载CSS文件，不会阻塞解析，但会阻塞渲染）2. 根据CSS资源生成CSSO
3、M,并结合DOM树开始构建渲染树，并进行渲染：1. 计算CSS样式.2. 构建渲染树.3. 对元素进行布局.主要定位坐标和大小.4. 绘制.将图像绘制出来.插件调用当用户点击或程序调用插件时:1. 从Cordova_plugins.js中获取插件文件名称和地址.2. 通过调用Cordova的exec模块将API的参数保存在CommandQueue 的队列中，Callback 保存在 JS 侧的 callbacks map 里面.3. 添加一 空的 iframe,并且 src 指向 gap:/ready .4. 原生部分 UIWebviewDelegate shouldStartLoadWith
4、Request 方法被调用.5. WebviewDelegate 判断 src 指向 gap:/ready 时，执行commandDelegate 的处理.6. commandDelegate从JS侧取出API参数.（内部实现则是通过UIWebview stringByEvaluatingJavaScriptFromString 的返回值 取得 CommandQueue里面的参数转换成JSON数据）7. 执行原生功能.8.执行结果通过 UlWebview stringByEvaluatingJavaScriptFromString 执行JS , JS端则根据传过来的CallBackId，从ca
5、llbacks map取出回调 函数并执行.React NativeReact Native这类方案，使用JavaScript来构建界面，在运行时翻译成原生组 件展示出来，实际上所有界面都是用原生组件。支持跨平台，热加载，性能和用 户体验高于WebView，更接近原生应用，是当前热门的跨平台开发技术。架构图:核心概念:JavaScript Core 是一个 JavaScript 解释器，它在 React Native 中主要有两个 作用：1.为JavaScript提供运行环境.2.是JavaScript与原生应用之间通信的桥梁.React Native中将虚拟DOM映射为原生控件的过程中分两步
6、：1. 布局消息传递，将虚拟DOM布局信息传递给原生.2. 原生根据布局信息通过对应的原生控件渲染控件树.至此，React Native便实现了跨平台。相对于混合应用，由于React Native是 原生控件渲染，所以性能会比混合应用中H5好很多，同时React Native是 Web开发技术栈，也只需维护一份代码.插件通信流程:当用户点击或程序调用插件时:1. JSModule把调用的方法放入MessageQueue队列中.2. MessageQueue 通过 JSCExecutor 调用 JsToNativeBridge 桥接到Java 层.3. JsToNativeBridge 调用 C
7、atalystinstance 中的 ModuleRegistry 注册器,访问NativeModule,进而执行JavaModule插件方法.4. 插件执行结果，通过NativeToJsBridge进行反向传递，最终返回到JavaScriptModule 中.社区活跃程度Cordova:Cordova官方库以及相关插件主要项目截图:cordova-androidApache Cordova Androidjavascripteordava librarymobilesharp Java作.Apache-2.0V ir349 izo (6 issues need help) Hv updat&
8、d yesterdaycordova-corn monApache cordova.ccrdovaHiibrarymobile c sharpJavaScript 芋 30Updated 7 days agocord ova-io sApache Cordova iOSnodejs javascriptjavacardo vblibraryiTioblle c&harpJavaScript 如 Apache-2.0 2019814 1.639 72(1 issue needs help I n3 Updated Jul 29,React Native:react-native 官方库主要项目截
9、图：reactA deGlaratlvgr efficientr and flexible JavaScript library fur building userfnterfaces 、卜frontend declarative ui library javascriptreactJavaScript 企 MIT V 25.276 W 135r116 661 |4 issues 曲M help) 0 202 Updated 7 minutes agoreact-nativeA framework for building native apps with React.JavaScript 曾
10、 17,966 80,417 621 (23 gu研 need 膈 1田H 51 Updated Aug 28, 2019React Native社区维护以及相关插件行业内技术统计全球JS技术框架调查Electron React Nativ& Native AppsCardQvaNativeSc zipt百蛙比移动说与桌面喘撕贤从来没所说过听盗过.伯不感样编 所说过且打W学习 使用过以拓不屈障用 使用迁以后也行业内评价Cordova炊Cordova的原因选降了”使用过，以后也履意用Cordovs的开发者，喜眺这项技术的原因.日国 1明 龄 域 岫湫I6的g 睥 9BQSI完羸冉深良好fr幸前生
11、衣瞟尊平缱的学习在线良好的文档功能完苦目强大、氓大的开发工且*简单且辂&背后有坚实的团叭/位司支持-.-曳定且向后荚舂9仇胞前综程范式+理度快，性靛好*映高的君错性S日趋火热不喜欢Cordova的原因选择了“使用过，以后不愿意用丁 CoidOva的I开裁者.不喜欢这项挟术的原因。0.0 200 400 6&0 009 l.flk l-2k 1-k 1.6k 1.8k 3.Ck 2.2k+性能差-透低的容在怪代斧娼度日渐衰重整K(Ji卷的事程范式*复杂1有限或映少盹瑛差的文档、血乏开发二具陡峭的学习有蜷*齿后的团队，公司不祖定.更新太快旦向后兼晋世差亍有阴的lisrasl不完娉喜玖React N
12、ative的原因送择了”使用过，以后也愿意用React Native的开发者.喜欢这耳技术的原因。划享富的生治圉辱忧推成埠程盘瓦整首后毛坚宝的团队公司更特良好的文档、强大的开股工具血宅暮，枸浅良郊日乜蜘平绒的学习曲线+速度快，性能好1功能充番且强大校蜀此君宙性龄甲且轻昼.特定且向后莱容不容虫React Native的原因0-Q选捧了“使用过，既后硒益用” React Nativs的开发者，不喜双这项授术的原因,疑惟的等职+性成差e不代雅的密程范式有限或缺伊功能-.-更斯太快且向后柴驾悭差* w婕峭的学习曲绿*较差的文档缺乏开是工耳F背后的团航独司冲定巾有限的生态圈相火礴度日渐装讴不完善小结Co
13、rdovaReact Native开发成本低社区活跃度较低活抵维护更新简单简单用户体验差好内存消抚高中内存泄漏存在无硬件访问能力好忧公司案例与行业采用案例1移动营销服务平台-上海银行案例2建启善源-建设银行同行业相关案例1. 智能风控项目（风险助手）-中国银行2. 上海银行手机银行-上海银行3. 信用卡营销-上海银行4. CRM -上海银行5. 移动营销-百信银行互联网公司采用情况1. 手机百度2. 手机QQ , QQ空间，QQ音乐3. 京东商城，京东金融4. 携程App5. 爱奇艺6. 美团7. 抖音8. 58同城9. 去哪儿.技术积累与沉淀应用主要技术栈(REACT NATIVE)1. J
14、S 层：typescript 自定义数据流(redux + redux-observable + rxjs + reselector)自定义框架typescript 自定义数据流(react-bloc)2. 原生层：只提供基础服务(拍照，百度地图，定位，轮询，外设调用等)第三方库与工具XZ MARIO node_modulesv o packages mario-architecture-components mario-extension mario-functicnal mario-meditation mario-navigation-extension mario-predicate
15、mario-pure mario-screen-adapter mario-typography mario-ui mario-utilities react-native-template-mario react-native-template-mariojs,gitignorep ,prettierrc轸.travis.yml目 lerna-debug.log lerna.json package-lock.jsanpackage.json tslint.json自定义插件与代码模板VS Code:MeePiVnReact Snippets for Mano爪如哪氏皿曲的心血姑口由srea
16、ct snippets for manoReact Snippets m eepwn .react- snippetsMeePwn G 379 存储库react snippets耕用 v 卸献 This extension is enabled globaiXy.React Bloc Snippets m eepwn. react-bloc-s ni ppetsMeePwn 92* * 存储库react bloc snippets累用r 却靠 This归x姑Ji知加 诂g/Obatfy.交互式命令行工具mathematicalgenenatofiinewnewpage.module.vendor.project.1. 新建业务模块二级界面2. 新建业务模块3. 新建项目(react/react native/koa)4. 新建第三方工具
