阅读 296

Hybrid 混合App开发

今天我们简单介绍一下 Hybrid 混合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

媒体查询响应式布局

文章分类
前端
文章标签