快速实现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混合开发(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); }); }

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

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

(0)
上一篇 2023年3月26日 上午9:21
下一篇 2023年3月26日 上午9:31

相关推荐

  • 你常见的标准化管理典范工地是什么样?用实际工程案例为你解答

    由深圳市华与建设集团有限公司承建的光明天安云谷一期项目,位于光明科学城核心区圳园路和圳美大道交汇处,为超高层综合体项目,地下3层,地上36层,总建筑高度180米,总建筑面积约20万…

    科研百科 2022年7月16日
    225
  • 课题延期结题的原因

    课题延期结题的原因 课题延期结题是学术界常见的现象,原因有很多,最常见的是以下几种: 1. 研究计划不全面:有些学者可能没有充分考虑到研究计划的全面性,导致计划中有些内容没有涉及到…

    科研百科 2024年11月11日
    18
  • 工程类科研项目意义

    工程类科研项目的意义 随着科技的不断发展,工程类科研项目已经成为了推动社会进步和经济发展的重要力量。这些项目不仅为人们提供了便利和舒适,还为人类社会带来了许多新的技术和发明。本文将…

    科研百科 2025年2月1日
    0
  • 如何用手机测量排气筒高度

    如何用手机测量排气筒高度 随着科技的不断发展,手机已经成为我们日常生活中不可或缺的一部分。现在,我们可以通过使用手机测量排气筒的高度,这对于某些需要保持清洁的环境非常重要。 首先,…

    科研百科 2024年11月22日
    0
  • 科研项目专利归谁

    科研项目专利归谁 随着科技的不断发展,科研项目专利归谁的问题也成为了人们关注的焦点。科研项目中的专利属于谁,对于科研项目的知识产权保护和运营至关重要。本文将探讨科研项目专利归谁的问…

    科研百科 2025年3月1日
    0
  • 会计科研项目申请书范文

    会计科研项目申请书范文 尊敬的评审专家: 我谨以此申请书向贵局申请参加“数据挖掘在会计信息中的应用”科研项目,并希望获得贵局的支持和指导。 我是一名从事会计工作多年的专业人士,深知…

    科研百科 2025年4月22日
    1
  • epc项目系统管理方案

    EPC项目系统管理方案 随着建筑项目越来越复杂和多样化,传统的项目管理方式已经无法满足现代建筑项目的需求。因此,采用先进的项目系统管理方案已成为现代建筑项目管理的必要选择。本文将介…

    科研百科 2025年1月14日
    0
  • 开源多项目管理系统下载

    开源多项目管理系统下载 随着现代软件开发的不断加剧,团队协作已经成为了软件开发中不可或缺的一部分。为了更好地管理和协调多个项目,开源多项目管理系统已经成为了许多软件开发团队的选择。…

    科研百科 2025年1月11日
    0
  • 国家健全农业科研项目

    国家健全农业科研项目 近年来,国家在农业领域投入了大量的资金和资源,旨在推动农业现代化和可持续发展。其中,科研项目是一个重要的组成部分,它为农业技术创新提供了重要的支持。 在科研项…

    科研百科 2025年4月3日
    0
  • 东北农业大学保研条件

    东北农业大学保研条件 东北农业大学是中国一所著名的综合性大学,拥有丰富的教学和研究资源。随着学校的不断发展,保研政策也在不断变化和完善。本文将介绍东北农业大学保研条件,包括保研的资…

    科研百科 2025年1月3日
    8