混合app_混合app开发 - CSDN
精华内容
参与话题
  • 如何开发混合app

    千次阅读 2018-12-20 14:42:13
    HybridApp混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 汽车有混合动力Hybrid,移动应用同样也有混合模式。Hybrid ...

    HybridApp(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

    汽车有混合动力Hybrid,移动应用同样也有混合模式。Hybrid App(混合模式移动应用)兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。很多人不知道市场上一些主流移动应用都是基于Hybrid App的方式开发,比如百度搜索等。但究竟什么是Hybrid App?如何定义?

    HybridApp:HybridApp is a mobile application that is coded in both browser-supported languageand computer language.

    They are available through application distributionplatforms such as the Apple App Store, Google Play etc. Usually, they aredownloaded from the platform to a target device, such as iPhone, Android phoneor Windows Phone. The subscribers need to install to run them.

    我们来拆解一下里面的含义:

    1、mobile application:Hybrid App就是一个移动应用

    2、bothbrowser-supported language and computer language:同时使用网页语言与程序语言编写

    3、available throughapplication distribution platforms:通过应用商店进行分发

    4、a target device:区分目标平台

    5、install to run:用户需要安装使用

    综合一下就是:

    “Hybrid App同时使用网页语言与程序语言开发,通过应用商店区分移动操作系统分发,用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native App要小很多。因此说,Hybrid App兼具了Native App的所有优势,也兼具了Web App使用HTML5跨平台开发低成本的优势

    在这里插入图片描述

    “云”时代的来临正在改变App和运营团队之间的关系,一场不能避免的变革正在进行。鉴于移动终端的局限性,移动终端上的APP由本地化应用(Native App),到基于WEB的应用Web App,再到混合型应用(Hybrid APP),这一连串的变化都源于技术的更新和市场的需要。

    Hybrid App按网页语言与程序语言的混合,通常分为三种类型:多View混合型,单View混合型,Web主体型。

    【多View混合型】

    即Native View和Web View独立展示,交替出现。

    2012年常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候,将WebView当成一个独立的View(Activity)运行起来,在WebView内完成相关的展示操作。这种移动应用主体通常是Native App,Web技术只是起到补充作用。开发难度和Native App基本相当。

    【单View混合型】

    即在同一个View内,同时包括Native View和Web View。

    互相之间是覆盖(层叠)的关系。这种Hybrid App的开发成本较高,开发难度较大,但是体验较好。如百度搜索为代表的单View混合型移动应用,既可以实现充分的灵活性,又能实现较好的用户体验。

    【Web主体型】

    即移动应用的主体是Web View,主要以网页语言编写,穿插Native功能的Hybrid
    App开发类型。

    这种类型开发的移动应用体验相对而言存在缺陷,但整体开发难度大幅降低,并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏,主要取决于底层中间件的交互与跨平台的能力。国外的appMobi、PhoneGap(cordova)和国内的WeX5、AppCan和Rexsee都属于Web主体型移动应用中间件。

    其中Rexsee不支持跨平台开发。appMobi和PhoneGap(cordova)除基础的底层能力更多是通过插件(Plugins)扩展的机制实现Hybrid。AppCan除了插件机制,还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题,接近Native App的体验。

    而WeX5则在揉合PhoneGap(cordova)和Bootstrap等主流技术的基础上,对性能进一步做了深度优化,不但完全具备Native App对本地资源的调用能力,性能体验也不输原生;WeX5所开发出来的app具备完全的跨端运行能力,可以无需任何修改直接运行在各种前端环境上。

    【多主体共存型——灵活型】

    这是一种新型的开发模式,即支持Web主体型的应用,又支持以Native主体的应用,也支持两者混合的开发模式。

    比如kerkee框架,它具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、具有Debug环境、彻底解决跨域问题等特点。用户体验与Native App媲美。功能方面,开发者可随意扩展接口。

    从分析可见,HybridApp中的Web主体型只要能够解决用户体验差的问题,就可以变成最佳Hybrid App解决方案类型。

    出品丨蓝海汇(ID:lanhaihui2015)
    转载请联系授权

    展开全文
  • 混合app

    2019-12-14 16:14:07
    混合app什么是混合app? 让我们这样理解,你出生在一个国家,你是该国/城市/州的本地人。你搬到一个新的城市/国家去找工作,你会成为那个地方的外国人,也就是说他的根本还是土生土长的。原生APP是那些默认使用单个...

    混合app什么是混合app?

    让我们这样理解,你出生在一个国家,你是该国/城市/州的本地人。你搬到一个新的城市/国家去找工作,你会成为那个地方的外国人,也就是说他的根本还是土生土长的。原生APP是那些默认使用单个框架构建的设备的APP,并根据操作系统指南,功能和布局进行设计,从而使APP内交互更加便捷。用户可以更快地导航和使用APP。原生移动APP基本上是手机上的默认APP,例如相机,音乐播放器,消息等,原生APP通常需要较长时间才能构建。

    混合移动APP是必须在设备上下载的APP。使用包含在本机代码中的各种框架(如HTML,CSS和JavaScript)的组合。混合APP开发在单个源代码上,但可以在各种平台上使用。对于那些希望在有限的时间内构建APP的人来说,这是更好的选择。更重要的是,混合APP是便携式的,这意味着它可以在各种平台上使用。混合APP的例子有Facebook,Twitter和Instagram等。任何移动APP开发公司都将帮助您为您构建您所需的APP。

    混合APP开发可以使用混合APP框架来完成

    Phone Gap

    大多数混合APP都使用Apache Cordova,这是Phone Gap的核心。Phone Gap基本上是Apache Cordova,其中包含可访问设备功能的扩展本地插件,如联系人,相机等。它重用了现有的Web开发技能,如HTML,CSS和JavaScript,以构建可用于多个APP的混合APP平台。

    Ionic

    Ionic框架是构建混合APP的免费开源框架。它使用诸如HTML,CSS和SASS之类的网络技术提供服务。SASS是与所有版本的CSS兼容的最稳定和专业级的CSS扩展。它拥有超过120种原生功能,如蓝牙,指纹认证等,IONIC Framework将始终保持免费使用。

    英特尔XDK

    英特尔XDK允许用户为任何类型的商店构建跨平台的APP。它包含用于交互式和响应式APP的服务和插件。人们可以使用拖放方式轻松创建APP。英特尔XDK最突出的特性之一是它提供了连接设备的实时预览。

     

    Xamarin形象

    Xamarin是微软拥有的加州公司。最常用的混合APP框架之一,它可以在使用C#的各种平台上实现。使用C#作为代码库,可以创建原生的Android和iOS APP。

    Framework7

    Frame work7是一款免费且开源的移动HTML框架。它支持开发具有原生iOS和Android触控功能的APP,并且感受到。该框架的一个主要特点是它提供了应用原型的实时预览。使用HTML,CSS和JavaScript等网络技术可以帮助构建主要用于iOS和Android的APP。

     

    Appcelerator Titanium

    Titanium是混合APP开发的最佳选择之一。它混合了Xamarin和Phone Gap提供的开发环境。它有助于使用JavaScript和Appcelerator API构建跨平台APP,以获得原生触摸和感觉,而不包含HTML和CSS。

    Mobile Angular UI

    Mobile Angular UI使用Bootstrap和Angular JS创建HTML5移动APP。始终可以作为开源并免费使用。媒体查询不在引导之列,但可以作为单独的文件包含在内。它有各种UI组件,如侧边栏,覆盖层等,

    Onsen UI

    Onsen UI是新的,但仍然给Ionic一个艰难的竞争。Onsen UI非常灵活,允许用户在Angular,Angular 2,React等框架之间切换,甚至允许用户使用纯JavaScript来构建APP。它还允许使用HTML5和JavaScript编写APP,并通过PhoneGap和Cordova推送它们来构建APP。

    Sencha Touch

    Sencha基本上是一款企业级产品,它允许用户使用HTML5和JavaScript构建端到端的移动APP。这是为商业空间主要是企业。也被称为移动APP开发空间的大爸爸。它有助于创建具有本地触摸和感觉的高性能APP。

    Kendo UI

    Kendo UI利用HTML5框架构建Telerik支持的跨平台APP。主要取决于jQuery,因此使用了许多jQuery小部件。它可能是开源的,但它在小部件方面有限,因为它们中的大部分都是商业许可证。Kendo UI可让用户与Angular和Bootstrap框架集成。

    appcan

    AppCan Hybrid混合应用开发、企业移动应用管理平台、移动服务云平台等企业移动门户的领导者,提供移动应用开发及移动跨平台开发技术等服务

    最后将学习混合app开发和框架教程的可以

    获取方式

    微信搜索关注“城市一猿”或者“cityapes”,后台回复Vue.js项目实战,即可免费获得永久下载链接。(回复教程参考下图,可复制关键词哟)

    展开全文
  • 混合app的介绍

    2019-06-14 17:43:04
    之前一直听别人说混合app开发,但对混合这个词不是很了解,无意发现一篇博客,感觉解释的还是挺详细的 https://blog.csdn.net/qq_29412527/article/details/80796893 ...

    之前一直听别人说混合app开发,但对混合这个词不是很了解,无意发现一篇博客,感觉解释的还是挺详细的
    https://blog.csdn.net/qq_29412527/article/details/80796893

    展开全文
  • 混合开发(APP

    2019-03-04 00:30:35
    1.由于混合开发,(登录app负责),那么在页面完成后对接接口的时候需要传一个token值,都知道token是登录时生成的,此时就需要APP将该值传给我,app大佬表示在url中有给传,截取token传值后token为null,绑到input...

    最近在开发一款APP,在app中嵌入H5,在配合过程中踩了两个小坑。

    1.由于混合开发,(登录app负责),那么在页面完成后对接接口的时候需要传一个token值,都知道token是登录时生成的,此时就需要APP将该值传给我,app大佬表示在url中有给传,截取token传值后token为null,绑到input中显示token有值,那么这是怎么回事。仔细对比发现截取的toke和url中的token有出入,就是因为该token中有特殊字符如:加减乘除等被编码了,获取后没有解码导致。最后还是写了个方法给APP,让其调用该方法时将token值传过来。(当然也可以解码来解决)。

    2.写方法给APP调用,这里必须将该方法挂载到window下APP才能调用。

    如:

    window['getLocationJson']=(jsonData)=>{//用于接收APP传回来的json字符串,然后将其解析为json对象(给APP调用**********需要挂载到window下APP才能调用的到)
      let self=this;
      self.fromApp=JSON.parse(jsonData);
      self.getAppArea=JSON.parse(jsonData).Location;
    }

    3.调用APP的方法(判断安卓和ios)

    if( /(Android)/i.test(navigator.userAgent) ){
      window.android.goLocation('1');    //安卓
    }else{
      window.webkit.messageHandlers.goLocation.postMessage('1');  //Ios
    }

    4.在H5中用a标签或router-link做跳转时安卓不能触发,后面改为点击事件跳转(其实是安卓大佬禁用了重定向)

     

    展开全文
  • 谈谈App混合开发

    千次阅读 2019-05-24 10:56:07
    混合开发的App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更...
  • 混合app开发学习笔记

    千次阅读 2018-09-09 21:15:11
    什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的:使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 苹果和安卓平台上...
  • 移动开发-混合App介绍

    万次阅读 2018-06-25 08:56:38
    什么是混合App(Hybrid App) Hybrid App是指介于web-app(网页APP,如京东web)、native-app(原生应用,如手机上面的APP应用)这两者之间的app,它虽然看上去是一个Native App,但只有一个WebView ( WebView,可以...
  • Hybrid App 开发快速指南

    万次阅读 2018-08-14 00:42:57
    关于混合应用是什么、为什么使用的问题,相信大家都有自己的答案,但如何开发混合应用,从现有资料中却很难找到一个系统、全面的回答。 刚上手或准备上手混合应用的开发者,经常苦于没有一套经过验证的最佳实践来...
  • 混合 APP 开发(Hybrid App)

    千次阅读 2019-04-20 21:18:37
    混合 App Html5简介 UIWebView 和 WKWebView UIWebView 和 JS 交互 WKWebView 和 JS 交互 JS 调用 Native 相机 一. 混合 APP Hybrid Mobile App 可以理解为通过 Web 网络技术(如 HTML,CSS 和 JavaScript)...
  • A: chrome://inspect/ 这个只能调试手机浏览器的页面吗,可以调试混合app和原生app的页面吗? B: 混合的webview 可以 原生的不支持 A: cordova打包混合app,咋没有显示出来 B: 不知道你打的是release包还是debug包...
  • 混合app--Hybrid App定位

    2020-06-07 21:38:17
    混合app–Hybrid App定位 检查网页是不是H5页面 使用uiautomatorviewer 只能定位到一个框 Hybrid App 指的就是原生界面和H5 界面交织在一起组合成一个app,那么对于移动端自动化来说,原生界面获取元素信息比较简单...
  • 移动端原生app、混合app、webapp 区别

    千次阅读 2018-09-30 21:40:53
    原生app:  安卓操作系统:java语言是安卓系统开发...混合app:  控件:UI webview 可以假装网页,加载网址,直接有原生打包生成app  遇到设备端的拍照、音频处理、视频录制等等操作,需要使用原生方式调取,H...
  • 混合App开发原理

    千次阅读 2020-02-26 14:22:45
    前言 Hybrid App Hybrid App是指介于web-app(网页APP,如京东web)、native-app(原生应用,如手机上面的APP应用)这两者之间的app,它虽然看上去是一个Native App,但只有一个WebView ( WebView,...混合APP就是在...
  • 混合app开发介绍

    千次阅读 2018-06-02 18:59:24
    混合app开发介绍application(应用)用前端的知识(html,css,js)开发出来手机App的方式就叫做混合App开发App开发的三种类型WebApp:跑在手机浏览器中运行的web应用(微信公众号,微信小程序)NativeApp:用android和...
  • 原生app和混合app、webapp有哪些区别?优略势对比 开发制作一款APP费用多少?不同APP功能价格各不同,而且和APP的开发方式密切相关。APP功能的差异很容易理解,那么APP的开发方式如何划分呢? 目前市场主流的...
  • 混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互;  混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行...
  • 这几天有空闲时间去网上找了找vue的相关的ui框架,看到有网友推荐quasar-framework,去它官网看了下,然后看到了Hybrid Mobile Apps (that look native,意思就是混合移动应用程序,这不就是混合app吗,还是基于Vue的...
  • 什么是混合app开发

    千次阅读 2017-02-28 19:06:03
    到目前为止,比较流行的混合app开发主要有以下三种: 1、WebApp:就是在浏览器中运行的web应用 2、NativeApp:用android和Object-C等原生语言开发的应用 3、HybridApp:就是外面是原生的壳,里面是webapp应用,兼具2...
  • 本文会详细的讲解什么是混合App开发、混合App开发概念、原理、区别、为什么要学习混合App混合App开发的几种方式以及具体的环境配置和踩坑指南等干货十足。 1-什么是混合移动App开发 苹果上的软件是如何开发出来...
  • 3.什么是混合app? 就是我们前端跟安卓混合,既有安卓的页面,也有前端的页面.性能好,快 现在webapp是主流了,开发快,成本低,版本迭代快,比如页面需要换个样式,native app需要重新打包,重新用户重新下载...
1 2 3 4 5 ... 20
收藏数 70,126
精华内容 28,050
关键字:

混合app