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

2022-12-23 0 1,090

序言:

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); }); }

至此,一个单纯的后端工程就完成了

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务