混合App开发（Hybrid APP）介绍

今天我们简单介绍一下 Hybrid 混合App开发。Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

原理

• 什么是响应式布局？

1. responsive layout =>  开发

2. responsive designer =>  设计

响应式布局，就是让页面响应各种设备，例如PC端，Phone（手机端） H5新增的语义标签，表单的新特性，和h5 ， canvas 以及相关的js和API包括localstorage等等 现在h5已经称为移动端开发和响应式布局的标准代名词。

• 移动端的发展和Hybrid 混合App开发

1. 在之前app和h5没有态大关系

2. 安卓系统  java-native

3. ios系统   c (object-c/swift)

4. 我们把上述语言开发的app称为native app (原生app)

native开发通常打包后上传到应用商店,他的优点在于可以操作手机内部的软件或者硬件，因为他直接运行在操作系统中所以性能相对不错,所有代码都在手机上，一些需要联网的可以提前缓存，但是手机操作系统不一样，使用的技术也不一样，所以需要两个不同的开发团队，开发不同版本的app,这样会导致版本升级问题,同时也会增加开发成本

由h5开发的web-app有什么特点？

h5页面需要基于浏览器或者v8内核的工具(pc,移动端浏览器或者v8内核的工具),h5运行在浏览器，所以如果想让h5操作系统，取决于浏览器是否支持这个功能，如果由，浏览器会把该功能放在window全局对象中，相比于native性能不好，所有的请求访问都必须基于联网的状态，除了有些native-app把h5特殊处理了，基于manifest的稳定性，服务器支持，存储容量等都有限制，我们离线缓存作用并不突出，因此我们h5页面部署到自己服务器上，用户想看页面必须重新拉取，这样也使得数据代码可以及时更新，优缺并存。

混合app开发 把h5的接入APP，native-app有自带的web-view机制，它是一款基于v8引擎渲染html页面的工具，在web-view中嵌入h5页面，由他渲染h5页面

混合app开发就是按照响应式布局的思想去完成h5页面的开发，并且部署到服务器上（有个http访问地址），此时用户可以手动输入地址访问，也可一扫描生成的二维码 整个产品的外层框架交给native-app开发，搭建盒子，提供调取手机内部软件或者硬件的功能和实现缓存机制，提供好对应的调取方法

前端开发把生成的H5地址告诉native-app,他们会在自己的webview中通过提供地址渲染出对应页面，一般通常经常容易更新的位置通常都用h5开发，H5中如果需要使用手机内部功能，只需要调取自己的宿主环境web-view中提供的方法即可，具体参考调用接口文档

• 原理：

浏览器会给h5提供window全局对象，web-view也给h5提供了全局对象，而且把一些供h5调取的方法都集成到内置的全局对象上。Hybrid 混合App开发需要实现H5和web通信，我们需要这种js bridge技术 微信就是Hybrid最好的案例，他支持h5在native-app中运行，我们可以调取微信提供的一些方法实现相关操作，比如微信二次分享，具体请参考微信公众平台。（qq浏览器）

应用场景

1. PC端和移动端公用一个地址，这样肯定要考虑响应式，而且样式改动较大，适用于交互较少的静态页面

2. PC端一个项目   => 不需要考虑响应式

   手机端一个项目 => 考虑响应式

• 1.在手机浏览器中

• 2.在第三方应用中，可能需要调第三方接口 （WX）

• 3.在native app中

现在我们适配320-750px的屏幕尺寸

手机常用尺寸

• 苹果

1. 5s以前 320px 480/568

2. 6      375px

3. 6plus  414px

• 安卓

1. 320

2. 360 小米3

3. 480

4. 540

5. 640

6. 720

7. ··· 在开发页面之前，我们先拿到设计图，像PSD,sketch，一般是以ipone5/4为基础的，，，640*960的   640*1136的

• 设备像素密度比 drp

viewport REM响应式布局

最初我们都用@midia 官方唯一规范响应式布局，但是这种方式很麻烦，先后出现很多方案，比如scale等比缩放布局，但是他对文字/图片等是真处理不是特别好，所以目前最主要的方案是REM响应式布局

在移动端我们需要加viewport pc端是当前页面设备多宽，html页面就是多宽展示，但是在手机端，不管手机设备有多宽，html页面宽度默认980,比如在手机端看视频我们需要将页面缩小固定倍数，所有内容都变小了，为了不让页面缩放，我们要让html宽度等于设备宽度

• REM 和px像素一样是一个css样式单位

• px是固定单位

• rem相对单位，相对于页面根元素，html字体大小设定单位

• em 相对于氟元素大小设定

<meta name="viewport" content="width=device,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"> 复制代码

动态设置

//设备宽/750 * 100 复制代码

响应式实现

我们现在来做个例子，具体用到的技术栈，h5 ,less ,zepto ,es6 ,css3

<meta name="viewport" content="width=device,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"> 复制代码

• loding区域结构和样式

• phone 区域交互效果的实现

• 魔方旋转

• swiper

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/quickaddcustom