前言：
HybridApp是指原生与前端语言相结合开发的应用，HybridApp可以运行在Android、iOS端上，不能用于PC端，称为混合类APP。
一、对比原生APP开发，混合开发有以下优缺点优点：
（1）开发成本低
（2）相对原生web界面版本更新快，维护相对简单
（3）一套代码可以支持Android端和iOS端
（4）能够调用原生功能、API
（5）稳定性相对较好
（6）用户体验较好
缺点：
（1）手机原生功能调用部分受限制
（2）加载受限于网络环境
（3）较复杂的列表、样式难以实现
混合开发是一种取长补短的开发模式，原生代码部分利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
二、如何快速完成一个混合APP
我们提供了一套JS和Native交互规范，前端通过JS，就可以调用Native的功能了。只需要在页面中引入supconit://hcmobile.js（无需下载）。
我们还提供了丰富的原生功能插件，直接调用就可以了，比如相机、录音、定位、蓝牙等系统功能，以及众多扩展插件，如第三方登录、百度文字识别、语音听写等（点击查看API）。
调用拍照功能示例代码：
// 引用js<script src='supconit://hcmobile.js'></script><script>// 监听’deviceready‘事件document.addEventListener('deviceready', onDeviceReady, false)function onDeviceReady(){navigator.camera.takePhoto(function(success) { alert(JSON.stringify(success)); }, function(error) { alert(JSON.stringify(error)); },true,1024);}</script>
拍照之后返回数据示例：
{ "fullPath": "file:///private/var/mobile/Containers/Data/Application/6D266368-6960-4C75-8DCB-EC3D2F37A9AF/tmp/IMG_0443.jpeg", "thumbLocalURL": "cdvfile://localhost/root/private/var/mobile/Containers/Data/Application/6D266368-6960-4C75-8DCB-EC3D2F37A9AF/tmp/IMG_0443_thumb.jpeg", "lastModifiedDate": 1584342725384.5444, "size": 1024276, "localURL": "cdvfile://localhost/temporary/IMG_0443.jpeg", "type": "image/jpeg", "name": "IMG_0443.jpeg"}
拿到返回的数据之后，我们可以通过JS接着调用照片预览插件，来显示刚刚拍到的照片。
// 拍照 function photo () { if (ready === true) { navigator.camera.takePhoto(function(success) { photoData = success photoPreviewer() }, function(error) { // alert(JSON.stringify(error)); },true,1024); } } // 照片预览 function photoPreviewer () { navigator.photoPreviewer.preview(photoData.fullPath, function(success) { },function(error) { alert(error); }); }
至此，一个简单的前端工程就完成了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。