今天咱们简单介绍一下 Hybrid 混合App开发javascript
响应式布局，就是让页面响应各类设备，例如PC端，Phone（手机端） H5新增的语义标签，表单的新特性，和h5 ， canvas 以及相关的js和API包括localstorage等等 如今h5已经称为移动端开发和响应式布局的标准代名词。css
native开发一般打包后上传到应用商店,他的优势在于能够操做手机内部的软件或者硬件，由于他直接运行在操做系统中因此性能相对不错,全部代码都在手机上，一些须要联网的能够提早缓存，可是手机操做系统不同，使用的技术也不同，因此须要两个不一样的开发团队，开发不一样版本的app,这样会致使版本升级问题,同时也会增长开发成本html
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页面java
混合app开发就是按照响应式布局的思想去完成h5页面的开发，而且部署到服务器上（有个http访问地址），此时用户能够手动输入地址访问，也可一扫描生成的二维码 整个产品的外层框架交给native-app开发，搭建盒子，提供调取手机内部软件或者硬件的功能和实现缓存机制，提供好对应的调取方法ios
前端开发把生成的H5地址告诉native-app,他们会在本身的webview中经过提供地址渲染出对应页面，通常一般常常容易更新的位置一般都用h5开发，H5中若是须要使用手机内部功能，只须要调取本身的宿主环境web-view中提供的方法便可，具体参考调用接口文档css3
浏览器会给h5提供window全局对象，web-view也给h5提供了全局对象，并且把一些供h5调取的方法都集成到内置的全局对象上。Hybrid 混合App开发须要实现H5和web通讯，咱们须要这种js bridge技术 微信就是Hybrid最好的案例，他支持h5在native-app中运行，咱们能够调取微信提供的一些方法实现相关操做，好比微信二次分享，具体请参考微信公众平台。（qq浏览器）es6
PC端和移动端公用一个地址，这样确定要考虑响应式，并且样式改动较大，适用于交互较少的静态页面web
PC端一个项目 => 不须要考虑响应式canvas
手机端一个项目 => 考虑响应式
如今咱们适配320-750px的屏幕尺寸
手机经常使用尺寸
最初咱们都用@midia 官方惟一规范响应式布局，可是这种方式很麻烦，前后出现不少方案，好比scale等比缩放布局，可是他对文字/图片等是真处理不是特别好，因此目前最主要的方案是REM响应式布局
在移动端咱们须要加viewport pc端是当前页面设备多宽，html页面就是多宽展现，可是在手机端，无论手机设备有多宽，html页面宽度默认980,好比在手机端看视频咱们须要将页面缩小固定倍数，全部内容都变小了，为了避免让页面缩放，咱们要让html宽度等于设备宽度
<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">
复制代码