您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 营销创新 > 融入原生能力到-WebApp
Blend:融⼊入原⽣生能⼒力到WebAppWebApp.Blend.设计思路.WebApp.为什么选择WebApp作为应⽤用开发⽅方案?Blend设计思路WebApp.Blend.什么是Blend?她能解决什么问题?设计思路WebApp.Blend设计思路.如何减⼩小开发迁移成本?WebApp“天下武功唯快不破”Blend设计思路WebAppBlend设计思路迭代速度/开发成本/性能/APIWebAppWebApp可以随时更新,⽽而NativeApp平均迭代周期为14天。NO!Blend设计思路迭代速度/开发成本/性能/APIWebAppWebApp开发成本远低于NativeApp。30天精通Web编程Blend设计思路迭代速度/开发成本/性能/APIWebAppWebApp性能低下,⽆无法实现流畅的转场动画。Blend设计思路迭代速度/开发成本/性能/APIWebAppWebApp缺乏端能⼒力,不能适⽤用于复杂应⽤用场景。Blend设计思路WebAppWeb的灵活性+Native的能⼒力HybridAppBlend设计思路WebAppPhonegap•平台⽀支持全⾯面•API数量不⾜足•性能低下Blend设计思路WebAppTitanium•学习成本⾼高•系统复杂•使⽤用⼈人数少Blend“⼀一个不⼀一样的轮⼦子”易⽤用性•渐进增强•Meta配置•前端框架能⼒力•端能⼒力•云能⼒力•UI能⼒力性能•转场动画•离线缓存•Native组件设计思路WebApp设计⽬目标Blend易⽤用性•渐进增强•Meta配置•前端框架性能•转场动画•离线缓存•Native组件能⼒力•端能⼒力•云能⼒力•UI能⼒力设计思路WebApp设计⽬目标Blend能⼒力•端能⼒力•云能⼒力•UI能⼒力性能•转场动画•离线缓存•Native组件易⽤用性•渐进增强•Meta配置•前端框架设计思路WebApp设计⽬目标Blend设计思路WebAppBlend设计思路WebAppBlendnewWebView设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlendnewWebViewnewWebView设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路WebAppBlend设计思路“⽤用户就是上帝”BlendWebApp设计思路“优雅降级”vs“渐进增强”BlendWebApp设计思路rank.htmlindex.htmlcat.htmlheader.htmlBlendWebApp设计思路rank.htmlindex.htmlcat.htmlheader.html 1 ul 2 lia href=# onclick='active(index)'⾸首⻚页/a/li 3 lia href=# onclick='active(rank.html)'排⾏行/a/li 4 lia href=# onclick='active(cat.html)'分类/a/li 5 /ul 6 script 7 var group = new Blend.ui.LayerGroup({ 8 layers:[{ 9 id:index, 10 url:index.html 11 },{ 12 id:rank, 13 url:rank.html 14 },{ 15 id:index, 16 url:cat.html 17 }] 18 }); 19 function active(id){ 20 group.active(id); 21 } 22 /scriptBlendWebApp设计思路改变开发⽅方式,挑战⽤用户习惯。BlendWebApp设计思路rank.htmlindex.htmlcat.html⾃自动甄别组件创建导航页⾯面BlendWebApp设计思路简单就是美BlendWebApp设计思路 1 !DOCTYPE html 2 html lang=zh-‐CN 3 head 4 meta charset=UTF-‐8 5 title测试⻚页⾯面/title 6 meta name=blend-‐layer-‐trigger content=.layer-‐link 7 /head 8 body 9 a class=layer-‐link href=百度/a 10 /body 11 /htmlBlendWebApp设计思路 1 !DOCTYPE html 2 html lang=zh-‐CN 3 head 4 meta charset=UTF-‐8 5 title测试⻚页⾯面/title 6 meta name=blend-‐layer-‐trigger content=.layer-‐link 7 /head 8 body 9 a class=layer-‐link href=百度/a 10 /body 11 /htmlBlendWebApp设计思路壹站式服务BlendWebApp设计思路BlendWebApp设计思路{navbar data=$navBarData}BlendWebApp设计思路 1 div data-‐blend-‐widget=navbar class=blend-‐navbar blend-‐navbar-‐default 2 ul class=blend-‐navbar-‐nav 3 li 4 a href=tel:123456789 5 span class=blend-‐icon-‐phone/span 6 span class=blend-‐navbar-‐label呼叫/span 7 /a 8 /li 9 li data-‐blend-‐navbar=share 10 a href=### 11 span class=blend-‐icon-‐share-‐square-‐o/span 12 span class=blend-‐navbar-‐label分享/span 13 /a 14 /li 15 ... 16 li 17 a href= 18 span class=blend-‐icon-‐location-‐arrow/span 19 span class=blend-‐navbar-‐labelBug 反馈/span 20 /a 21 /li 22 /ul 23 /divBlendWebApp设计思路架构设计BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPIBlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPIWeb组件Native加速BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI转场动画离线缓存BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI原⽣生浏览器渐进增强BlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPIBlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI端能⼒力•应⽤用调起(Activity)•⽹网络(Connection)•⽂文件(FileSystem)•位置(Geolocation)•本地媒体(Media)•⼆二维码(QRCode)云能⼒力•帐号(Account)•轻⽀支付(Pay)•分享(Socialshare)•推送(PushUI能⼒力•转场动画(Layer)•⼿手势跟随(LayerGroup)•Native组件(FootbarBlendAPIBlendWebApp设计思路IOSRuntimeJsToNativeBridgeAndroidRuntimeIOSAndroidBlendAPILayerLayerGroupdeviceMbaasHTMLcomponentMetaAPIBrowserNativeAPIJsAPIHTMLAPI端•应⽤用调起•⽹网络•⽂文件(FileSystem)•位置(Geolocation)•本地媒体(Media)•⼆二维码(QRCode云能⼒力•帐号(Account)•轻⽀支付(Pay)•分享(Socialshare)•推送(Push)UI能⼒力
本文标题:融入原生能力到-WebApp
链接地址:https://www.777doc.com/doc-5449934 .html