APP开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

前言

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开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

我们还提供了丰富的原生功能插件,直接调用就可以了,比如相机、录音、定位、蓝牙等系统功能,以及众多扩展插件,如第三方登录、百度文字识别、语音听写等。

调用拍照功能示例代码:

// 引用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);

});

}

至此,一个简单的前端工程就完成了,如何测试,又如何一键打包成Android、iOS端呢?

别着急,接下来更简单,只需要在中控易动平台创建一个应用,填写我们前端工程的入口地址即可。

创建完成后,添加我们刚刚用到的两个插件,拍照和图片预览,这里我已经添加了。

APP开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

我是安卓手机,这里只选择打包一个安卓APP进行测试,点击打包,等待打包完成,扫码安装。

APP开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

安装后,首页显示效果

APP开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

点击拍照

APP开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

如果有异常,这里还有提供IDE调试工具,有个三分钟使用教程,可以去中控易动–开发者–视频教程–IDE调试工具 里面查看。

APP开发有技巧?快速实现APP混合开发(Hybrid App开发)攻略

测试完成后,还可以把打包的Android、iOS端上架到应用市场和苹果商店,是不是很心动,快来体验一下吧~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月28日 上午11:13
下一篇 2023年4月28日 上午11:23

相关推荐

  • 科研项目中英文对照

    科研项目中英文对照 科研项目是现代社会的重要组成部分,是科学家们进行科学研究和探索未知领域的重要工具。在科研项目中,常常需要使用不同的英文词汇和表达方式。本文将介绍一些常见的科研项…

    科研百科 2025年5月6日
    2
  • 经管科研项目多少钱

    经管科研项目多少钱 随着经济的发展,许多企业都在寻求创新的方法来提高效率并降低成本。其中,经管科研项目就是一个备受关注的领域。然而,对于想要参与经管科研项目的人来说,高昂的费用是一…

    科研百科 2025年4月19日
    1
  • 客户关系管理的6大流程(客户关系管理的6大流程是什么)

    客户关系管理的6大流程(客户关系管理的6大流程是什么) 客户关系管理的6大流程包括:1、发现客户价值;2、确立客户关系管理的目标;3、客户资料管理;4、客户跟踪管理;5、订单 /合…

    科研百科 2024年3月23日
    136
  • 施工进度管理的主要措施

    施工进度管理的主要措施 施工进度管理是项目管理中至关重要的一部分。合理的施工进度能够确保项目按时完成,降低项目风险,提高项目质量,从而为项目赢得更多的时间和金钱。以下是施工进度管理…

    科研百科 2024年8月30日
    29
  • 我科学家首次发现埃博拉病毒囊膜糖蛋白合成机制

        近日,中国农业科学院哈尔滨兽医研究所基础免疫团队郑永辉研究员和王斌博士在国际上首次阐明了埃博拉病毒囊膜糖蛋白的合成机制,为抗埃博拉病毒药物的研发提供了新…

    科研百科 2022年5月14日
    279
  • 科研项目书中工作量如何写科研项目书中工作量如何写

    科研项目书中工作量的撰写是科研项目中非常重要的一环,直接关系到项目的进度和质量。在撰写科研项目书中的工作量时,需要注意以下几点: 1. 确定工作量的大小:在确定工作量的大小时,需要…

    科研百科 2024年9月9日
    36
  • ERP管理软件给装修公司解决哪些问题(erp管理软件给装修公司解决哪些问题好)

    装修管理软件在使用过程中为装企解决了众多管理上的难题,通过在线管理实现了无纸化办公和智能化办公。那么具体为我们解决了哪些难题呢,我们一起来详细了解下。 装修管理软件首先是解决了移动…

    科研百科 2022年12月3日
    221
  • 流行病学科研项目申请书怎么写(流行病学科研项目申请书)

    流行病学科研项目申请书 项目名称:XXX 项目背景: 随着全球化和数字化的快速发展,流行病学研究面临着越来越多的机遇和挑战。流行病学研究可以帮助我们更好地了解疾病的传播规律和防控策…

    科研百科 2024年4月5日
    193
  • 项目管理的技术和工具

    项目管理的技术和工具 项目管理是一种重要的组织活动,可以帮助组织实现其目标。在项目管理中,技术和工具起着至关重要的作用,可以帮助项目经理更好地组织和管理项目,确保项目按时完成并达到…

    科研百科 2024年8月18日
    39
  • 申报科研项目的步骤

    申报科研项目的步骤 申报科研项目是许多科学家和研究人员梦寐以求的机会。申报科研项目可以为他们提供资金, 资源, 并且为他们的研究提供更好的平台。本文将介绍申报科研项目的步骤。 1….

    科研百科 2025年3月1日
    0