混合开发
三大分类
- 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'