hybridapp开发教程（hybrid app开发教程）

本篇文章给大家谈谈hybridapp开发教程，以及hybrid app开发教程对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、一个完整的App开发需要哪些技术
• 2、Hybrid App开发中，web端与native端几种常见的通信场景
• 3、Hybrid混合开发知识点(一)
• 4、如何开发混合式app
• 5、怎样从iOS开发转型为hybrid App开发

一个完整的App开发需要哪些技术

一个完整的App开发需要哪些技术？在回答这个问题之前，我们首先要了解App都有哪些类型，不同的类型适用于哪些需求，用户可以根据自己的需求选择不同的App开发。

一、 App有哪些形式

WebApp：简单来说，Web App就是针对iOS/Android优化后的web站点，用户不需要下载安装即可访问。一般的web站点测重使用网页技术在移动端做展示，包括文字，视频，图片等，而Web App更侧重“功能”，是基于网页技术开发实现特定功能的应用，必须依赖手机浏览器运行。Web App开发成本低，维护更新简单，支持云修复，用户不用下载更新，但是App的用户体验不足，页面跳转迟钝甚至卡壳，页面交互动态效果不灵活，而且可能上不了AppStore，如果企业的核心功能不多，App需求侧重于信息查询，浏览等基础功能，可以选择Web App。

Native App（原生App）：Native App是基于智能手机操作系统（现在主流的是ios和Android）用原生程序编写运营的App。Native App运行时是基于本地操作系统的，所以它的兼容能力和访问能力更好，拥有最佳的用户体验、最好的交互界面，但也是开发难度最大，开发成本和维护成本最高的App。

Hybrid App（混合App）：是指半原生半web的混合类App，同时采用网页语言和程序语言进行开发，通过不同的应用商店进行打包分发，用户需要下载安装使用。Hybrid App兼具Native App良好的用户交互体验和web App跨平台开发的优势，因在开发过程中使用网页语言，所以开发成本和难度大大降低。Native App是现在的主流应用，大型的App如淘宝／掌上百度／微信都是走的Hybrid App路线。

二、开发不同类型的App需要用到哪些技术？

Web App：iOS/Android的内置浏览器是基于webkit内核的，所以在开发webApp时，多数使用html或html5、CSS3、JavaScript技术做UI布局，使其在网站页面上实现传统的C／S架构软件功能，服务端技术用java、php、ASP。现在也有很多一键生成webApp的平台，如百度siteApp／移动开发平台APICloud，APICloud平台提供基于腾讯x5浏览器引擎生成webApp，因为移动端的超级流量入口微信／手机qq等用的也是腾讯x5内置浏览器，所以用腾讯x5浏览器生成的App在移动页面展示时适配于微信的浏览体验，这样可以帮助webApp引流。

Native App：

开发Native App需要根据运行的手机系统采用不同的开发语言，开发Android App需要的开发语言是java，还需要熟悉Android环境和机制。主要知识点如下：

1. 开发环境，Android Studio、eclipse.如何搭建Android开发环境可以去百度。

2. 数据结构，App的某些功能涉及到做算法，所以要有一定的数学基础

3. Android SDK，会API接口开发，包括自行开发API的能力和调用第三发API的经验。

4. 熟悉tcp、IP，socket等网络协议

5. 如果涉及到服务器，你还需要了解webservice相关知识和相应的开发语言，常用有PHP、JSP、ASP.Net.

6. 除了这些功能基础，App开发还涉及到UI设计、框架、性能优化、调试适配等。

Objective-C是开发iOS系统App的主流编程语言，开发者一般用苹果公司的iOS SDK搭建开发环境，iOS SDK是开发iOS应用程序中不可少的软件开发包，提供了从创建程序，到编译、调试、运行、测试等多种开发过程中需要等工具。学习iOS开发可以去看苹果官方文档，这是最权威的ios教程。

Hybrid App：混合开发中主流的是以web为主体型的开发，即以网页语言编写，穿插Native功能的hybrid App开发类型，网页语言主要有html5、CSS3、JavaScript。Web主体型的App用户体验好坏，取决于底层中间件的交互与跨平台的能力。国内外有很多优秀的开发工具，如国外的AppmAkr、Appmobi，国内的APICloud，APICloud的底层引擎用Deep Engine，使用半翻译式原理，将运行中的web翻译成Native API，并且支持扩展API，开发时可调用用原生语言开发的功能模块，以此达到媲美原生App的用户体验，同时节省开发时间。

对企业来说，可以根据自己的需求选择不同的开发类型和开发工具，目前来看，Hybrid App已经成为移动开发趋势，一方面Hybrid App开发时不采用或者大部分不采用原生语言，却能拥有原生应用的特性，一方面随着web技术的发展，Hybrid App技术已经成熟，很多大型App淘宝、微信、携程都属于这种开发模式，Hybrid App给企业移动应用的开发、维护、更新都带来了极高的便捷性，从成本投入用户体验考虑，Hybrid App都是首选。

Hybrid App开发中，web端与native端几种常见的通信场景

       本篇文章，我们主要叙述一下Hybrid App中常见的几种通讯场景，包括 注册 、 登录 、 支付 、 登录状态的保持 以及 退出 。由于我在前面的文章中已经有过对web端和native之间通信方式的讲解，所以本篇文章主要是以使用为主。如果您还不了解web端和原生端的通信方式，请查看我的这篇文章 《Hybird App中 Android 和 IOS 与网页之间的通信》 进行学习，了解基础非常重要。

Register.vue

   1、注册按钮点击事件，针对不同的平台使用不同的逻辑。

   2、调用android注册方法。需要在android端注册 register 方法，并返回是否通过校验的值（boolean）。

   3、调用IOS注册方法。当然也需要在IOS原生端定义 register 方法，由于IOS中不能直接返回结果给web端，所以需要在web端的 window 对象中挂载一个回调方法 onRegisterCallback ,等IOS端完成处理后，执行该方法。

       一定要注意，要在执行 window.webkit.messageHandlers.register.postMessage(userJson) 执行前将 注册回调方法onRegisterCallback 进行挂载。

   4、注册回调方法

       当我们完成了注册功能，其他的功能其实就是简单复制的过程了。话不多说，咱们码上见真情。

Login.vue

   1、登录按钮点击事件

   3、调用 android 登录验证

   4、调用 ios 登录验证

   5、接收登录验证结果

       当然，在登录成功后，我们需要将用户通过 vuex 进行保存，这里就不细讲了。同时，在原生端也会将用户名进行保存。

       在原生端启用webview加载完web端页面的后回去执行，我们挂载在web端 window 下面的方法 nativeFunctionUserLogin 方法，并将原生端保存的用户名发送给web端。web端再将用户保存在vuex中，如此，就实现了登录状态的保持。

App.vue

       首先看一下支付页面。

   1、支付点击事件

   2、支付方式点击事件

   1、退出登录按钮点击事件

   2、调用 android 退出登录的方法

   3、调用 android 退出登录的方法

   4、退出登录的回调方法

Hybrid混合开发知识点(一)

Hybrid是半Native半Web开发模式，充分利用H5的跨平台、快速迭代能力以及Native的流畅性、系统API调用能力，具有可复用性高、开发成本低、跨平台开发的特点。

在阐述Hybrid混合开发知识点之前，我们先梳理下WebView加载H5页面及H5与Android的交互等方面的知识点。

WebViewClient类 ：处理各种通知请求事件。常用方法如下：

WebChromeClient类 ：辅助webview处理javaScript对话框，加载进度，网站图标，网站标题等。

WebSettings常用属性：

WebView常用API调用：

WebView需要设置setJavaScriptEnabled(true);使WebView支持执行JavaScript脚本。

以上两种Android调用H5方法，均在onPageFinished()方法回调后执行，即页面加载完毕后。

js通过脚本映射addJavascriptInterface()中的Object对象，实现H5调用Android方法。前提须设置settings.setJavaScriptEnabled(true)。

Android中的Scheme是一种页面跳转协议，常处理以下场景交互：

在使用Scheme前，须在AndroidManifest.xml中对Activity添加 intent-filter/过滤器注册。

常规的URL Scheme格式为：[scheme]://[host]/[path]?[query]，如 app://book:8888/bookDetail?bookId=10011002

App内页面跳转，示例1：

通过debug模式，可获得从Scheme中解析出的参数值，如下：

H5页面跳转App页面，示例2：

若要跳转AndroidManifest.xml中定义Scheme的Activity，H5端配置如下：

在App内点击该WebView页面链接会触发WebViewClient#shouldOverrideUrlLoading()方法，解析如下：

如上所示，和常规的URL Scheme解析同理，注意shouldOverrideUrlLoading()的版本兼容。

重定向问题的处理方案 ：WebView的getHitTestResult()的函数可以获取点击页面元素的类型，若获取的HitTestResult为null或UNKNOWN_TYPE，则认定为重定向URL，对此情况直接return false。

shouldOverrideUrlLoading()处理H5与Android交互的存在的问题：

硬编码问题虽然借鉴了ARouter路由跳转思想能缓解页面跳转，但是在交互方面addJavascriptInterface映射对象的方案更优。

如何开发混合式app

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web 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和国内的WeX5、AppCan和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发。appMobi和PhoneGap除基础的底层能力更多是通过插件（Plugins）扩展的机制实现Hybrid。AppCan除了插件机制，还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题，接近Native App的体验。而WeX5则在揉合PhoneGap和Bootstrap等主流技术的基础上，对性能进一步做了深度优化，不但完全具备Native

App对本地资源的调用能力，性能体验也不输原生；WeX5所开发出来的app具备完全的跨端运行能力，可以无需任何修改直接运行在各种前端环境上。

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

怎样从iOS开发转型为hybrid App开发

Hybrid APP是混合型的APP应用开发。是相对于Native APP（原生APP）、WEB APP（Web APP）而言的。

Native APP、WEB APP与Hybrid APP的区别：

1）Native APP：Native Code编程，代码编译之后以2进制或者字节码的形式运行在OS上，直接调用OS的Device API。所谓的iOS开发和Android开发就是这种；

2）Web APP，以HTML+JS+CSS等WEB技术编程，代码运行在浏览器中，通过浏览器来调用Device API（取决于HTML5未来的支持能力）；

3）Hybrid APP，部分代码以WEB技术编程，部分代码由某些Native Container承担（如PhonGAP、AppCan、Titanium），其目的是在Html5尚未完全支持Device API和Network API的目前阶段，承担这部分职责。

很多开发者在跨入移动应用开发领域都会选择Hybrid App为切入点，因为它介于web-app、native-app这两者之间，兼具“Native App良好用户交互体验的优势”和“Web App跨开发的优势”。这样的模式可以降低开发门槛，用较少的成本达到跨开发移动应用的目的。总所周知，web的生态已经是相当发达的了。

在移动应用开发盛行的今天，HTML5的问世让更多的人寄予厚望，这也就催生了PhoneGap这类移动Hybrid应用开发框架，它完全采用HTML5的界面布局，而本地能力通过Native桥接为JS函数在HTML5页面中调用，达到Hybrid App的效果。很多开发者在跨入移动应用开发领域都会选择Hybrid App为切入点，因为它介于web-app、native-app这两者之间，兼具“Native App良好用户交互体验的优势”和“Web App跨开发的优势”。这样的模式可以降低开发门槛，用较少的成本达到跨开发移动应用的目的。总所周知，web的生态已经是相当发达的了。

关于hybridapp开发教程和hybrid app开发教程的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。