当前位置: 首页 > 最新文章 > 正文

快速实现APP混合开发(Hybrid App开发)攻略

一、对比原生APP开发,混合开发有以下优缺点优点:开发成本低相对原生web界面版本更新快,维护相对简单一套代码可以支持Android端和iOS端能够调用原生功能、API稳定性相对较好用户体验较好缺点:手机原生功能调用部分受限制加载受限于网络环境较复杂的列表、样式难以实现混合开发是一种取长补短的开发模式,原生代码部分利用Web View插件或者其它框架为H5提供容器,程序主要的业务实现、界面展示都是

admin

一、对比原生APP开发,混合开发有以下优缺点优点:开发成本低相对原生web界面版本更新快,维护相对简单一套代码可以支持Android端和iOS端能够调用原生功能、API稳定性相对较好用户体验较好缺点:手机原生功能调用部分受限制加载受限于网络环境较复杂的列表、样式难以实现混合开发是一种取长补短的开发模式,原生代码部分利用Web View插件或者其它框架为H5提供容器,程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。

前言:

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(无需下载)。

快速实现APP混合开发(Hybrid App开发)攻略

我们还提供了丰富的原生功能插件,直接调用就可以了,比如相机、录音、定位、蓝牙等系统功能,以及众多扩展插件,如第三方登录、百度文字识别、语音听写等(点击查看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);            });        }

至此,一个简单的前端工程就完成了


上一篇: 骨骼动画工具限时免费助力开发!SpriteStudio动画制作大赛启动! 下一篇:Hadoop大数据平台架构与实践
返回顶部