快速實現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（無需下載）。

我們還提供了豐富的原生功能插件，直接調用就可以了，比如相機、錄音、定位、藍牙等系統功能，以及眾多擴展插件，如第三方登錄、百度文字識別、語音聽寫等（點擊查看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);
            });
        }

至此，一個簡單的前端工程就完成了，如何測試，又如何一鍵打包成Android、iOS端呢？

別着急，接下來更簡單，只需要在易動平台創建一個應用，填寫我們前端工程的入口地址即可。

創建完成后，添加我們剛剛用到的兩個插件，拍照和圖片預覽，這里我已經添加了。

我是安卓手機，這里只選擇打包一個安卓APP進行測試，點擊打包，等待打包完成，掃碼安裝。

安裝后，首頁顯示效果

點擊拍照

如果有異常，這里還有提供IDE調試工具，有個三分鍾使用教程（點這里）。

測試完成后，還可以把打包的Android、iOS端上架到應用市場和蘋果商店，是不是很心動，快來體驗一下吧~