混合开发

三大分类

• 1、Native App （原生App）
• 2、Web App
• 3、Hybrid App（自己做过）

一、 NativeApp(原生APP)

纯工具类APP

开发：Android、IOS工程师开发，
	        Android：java，xml  配置 java jdk  ， Android sdk   Android Studio
	        IOS：xml，Objective-C/swift，  mac，Imac机上    XCODE

​			更新维护：版本更新、打补丁包   都得需要用户从app store里面进行下载

使用：必须去app-store里面进行下载更新才能使用软件

特点和优势：
	 1、流畅度较高
	 2、对网络的依赖性不强，在没有网络的情况下也可能使用部分功能
	 3、可以调用设备的原生功能
	 
缺点：不能跨平台开发   必须开发两套代码（Android+IOS）

开发成本
	 开发成本较高，因为需要分开开发，不能跨平台开发，而且开发周期长，
	 使用成本较高，因为需要下载安装，话费流量，并长期占用手机的内存
	 更新维护成本高		

​

二、 WebApp

凡是可以在移动端浏览器里面打开的网站都称之为WebApp

使用：无需下载  直接通过用户的手机浏览器打开使用即可

更新维护：直接无痕更新（需要注意浏览器缓存问题   缓存的产生是基于文件的路径）

开发： web前端开发工程师
      使用HTML5+CSS3+js，mac、pc上开发
      更新维护成本低

开发成本：
        开发成本较低，可以实现跨域平台，开发周期短（比较于原生）
        使用成本低，不需要下载安装，通过浏览器空间

特点和优势
        1、用户粘度低
        2、流畅度较低
        3、对网络的依赖性强
        4、不能访问设备的原生功能！因为浏览器的安装级别限制
        （同源策略、不能调用设备的原生功能及文件系统）
        
缺点：不稳定 流畅度低  用户体验差   不能调用原生设备 

三. Hybrid App(混合App)

混合开发app：其实从根本上的技术就是在原生的壳子、界面里嵌入H5页面来实现功能

先决技术：H5页面是可以嵌入到原生的webview中的

开发模式

1、原生主导

这是最主流的一种方式，也就是说其实现在市场上的应用已经很少有纯原生的了，而是大多采用了混合开发的模式，一般都是原生主导的，也就是在某个界面中去嵌入h5页面

区分方式

• 一、长按文字看是否被选中，如果能选中肯定是嵌入的H5页面
  二、安卓打开开发模式，手机上就会出现很多的线条，线条包裹起来的就是原生的元素

为什么要这么做
借助H5页面的跨平台属性来降低开发成本。而且，因为内嵌应用电影、外卖，他们的webapp已经存在了，所以可以直接将webapp的页面嵌入进来

什么样的页面适合去嵌入H5页面
布局复杂，逻辑简单，经常更新卫华的，比如详情、部分列表等等都适合嵌入H5页面的方式(例如：信用卡表单申请页)

    1.js判断操作系统
         html中的window.navigator.userAng   
            
            
    2.js与native通信
           native与js交互
                1.ios可以调用window下面的方法
                        当跳转详情的时候，详情界面就可以调用里面H5页面的JSBridge的方法
                        来传递参数
                2.页面中发送所有的网络请求，webview
						一把都是用用iframe标签来发送请求，也就是，事先定义号一个url，
						作为通信的地址，然后创建iframe去发送这个请求 

2、H5主导的模式

纯H5开发工程师借助一些工具去搭建native的外壳，这个应用的内部都是H5页面构成
这种开发模式主要以来的是工具，(打包应用、调用设备原生功能的能力)
是一个app壳内嵌一个html兼容各种设备，减少发版频率，节约开发成本
通过jsBright操作底层操作权限

混合应用开发:

• 1.微信公众号:通过jssdk连接native和web

• 2.微信小程序:内置框架连接native和web

• 3.普通原生和web交互:jsBridge

jsbridge

jsbridge是实现native端和web端的双向通信的一种机制,通过约定进行通信（双方要约定一个公用的方法）

• jsbrige实现原理

将native端的原生接口封装成javascript接口，将web端的javascript接口封装成原生的接口，实现双向通信
web调用native的方式有两种:
1.拦截webview请求中的URL schema
2.向webview注入jsAPI

• jsbridge的开源实现

DSBridge，可以查看官方文档.原理一样

初体验

项目需要做一个类似于办信用卡那样的一个app，前端部分是由Android+Ios+h5，去完成的部分（如：下图）
为什么需要h5去做表单部分，还有客户端？
由于，表单字段有一百多字段，很多重复的，需要验证，所以划分给h5来处理，而表单申请字段数据h5无法加密成业务所需要的，所以划分给原生那边加密。

使用

前言：h5这块使用的是Vue（采用vue + vant）

使用步骤：

1.新建 - utils/JSbridge.js

let isAndroid = navigator.userAgent.indexOf('Android'