前言：
HybridApp是指原生與前端語(yǔ)言相結(jié)合開(kāi)發(fā)的應(yīng)用，HybridApp可以運(yùn)行在Android、iOS端上，不能用于PC端，稱(chēng)為混合類(lèi)APP。
一、對(duì)比原生APP開(kāi)發(fā)，混合開(kāi)發(fā)有以下優(yōu)缺點(diǎn)優(yōu)點(diǎn)：
（1）開(kāi)發(fā)成本低
（2）相對(duì)原生web界面版本更新快，維護(hù)相對(duì)簡(jiǎn)單
（3）一套代碼可以支持Android端和iOS端
（4）能夠調(diào)用原生功能、API
（5）穩(wěn)定性相對(duì)較好
（6）用戶(hù)體驗(yàn)較好
缺點(diǎn)：
（1）手機(jī)原生功能調(diào)用部分受限制
（2）加載受限于網(wǎng)絡(luò)環(huán)境
（3）較復(fù)雜的列表、樣式難以實(shí)現(xiàn)
混合開(kāi)發(fā)是一種取長(zhǎng)補(bǔ)短的開(kāi)發(fā)模式，原生代碼部分利用Web View插件或者其它框架為H5提供容器，程序主要的業(yè)務(wù)實(shí)現(xiàn)、界面展示都是利用與H5相關(guān)的Web技術(shù)進(jìn)行實(shí)現(xiàn)的。比如京東、淘寶、今日頭條等APP都是利用混合開(kāi)發(fā)模式而成的。
二、如何快速完成一個(gè)混合APP
我們提供了一套JS和Native交互規(guī)范，前端通過(guò)JS，就可以調(diào)用Native的功能了。只需要在頁(yè)面中引入supconit://hcmobile.js（無(wú)需下載）。
我們還提供了豐富的原生功能插件，直接調(diào)用就可以了，比如相機(jī)、錄音、定位、藍(lán)牙等系統(tǒng)功能，以及眾多擴(kuò)展插件，如第三方登錄、百度文字識(shí)別、語(yǔ)音聽(tīng)寫(xiě)等（點(diǎn)擊查看API）。
調(diào)用拍照功能示例代碼：
// 引用js<script src='supconit://hcmobile.js'></script><script>// 監(jiān)聽(tīng)’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>
拍照之后返回?cái)?shù)據(jù)示例：
{ "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"}
拿到返回的數(shù)據(jù)之后，我們可以通過(guò)JS接著調(diào)用照片預(yù)覽插件，來(lái)顯示剛剛拍到的照片。
// 拍照 function photo () { if (ready === true) { navigator.camera.takePhoto(function(success) { photoData = success photoPreviewer() }, function(error) { // alert(JSON.stringify(error)); },true,1024); } } // 照片預(yù)覽 function photoPreviewer () { navigator.photoPreviewer.preview(photoData.fullPath, function(success) { },function(error) { alert(error); }); }
至此，一個(gè)簡(jiǎn)單的前端工程就完成了
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。