手记

Cordova开发App入门（四）打开及下载第三方App

慕冬雪
2018-06-21 20:36:08浏览 13074
前言

在开发app时经常会碰到这种需求：我要在A应用中打开B应用，那么用Cordova如何实现呢？

欲知后事如何，且听下回分解......

...

大大大大佬，别，别打我，我继续写还不行了吗。

本文涉及到的知识点

1.检测第三方应用

2.使用内置浏览器启动第三方应用

3.appt解析第三方Apk安装包，或许必要的信息

4.下载第三方安装包

5.下载完成后打开第三方安装包

注：本文测试的方式为两种，一种是已在系统中安装完成的，一种是尚未安装的

请先浏览相关文章

Cordova开发App入门（一）创建android项目

Cordova开发App入门（二）使用热更新插件

Cordova开发App入门（三）消息推送

安装相关插件

1. startApp（打开第三方应用）

cordova plugin add https://github.com/lampaa/com.lampa.startapp.git

2. appavailability（检测第三方App是否存在）

cordova plugin add cordova-plugin-appavailability --save

3. inappbrowser（应用内置浏览器）

cordova plugin add cordova-plugin-inappbrowser

4. file-transfer （下载文件）

cordova plugin add cordova-plugin-file-transfer
代码实现

1. html

<button type="button" class="openApp" data-scheme="com.baidu.BaiduMap" data-activity="com.baidu.baidumaps.WelcomeScreen" data-title="百度地图">打开百度地图</button>
<button type="button" class="openApp" data-scheme="com.yadongzhang.owp" data-activity="com.uzmap.pkg.EntranceActivity" data-title="Dblog"
        data-download-url="http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d">DBlog</button>

<div ><div id="progress" ></div></div>
<script type="text/javascript">
    zyd.openApp.init();
</script>

属性含义

1.data-scheme 对应app的package

2.data-activity 对应app的启动类

3.data-title 对应第三方app的名字

4.data-download-url 对应第三方app的下载地址（当且仅当app不存在时才会调用）

2.主要的Javascript代码

/**
 * 打开第三方app
 */
open: function(){
    console.log(">>>>  打开" + zyd.openApp._title);
    console.log(">>>>  " + zyd.openApp._scheme);
    console.log(">>>>  " + zyd.openApp._activity);
    console.log(">>>>  " + zyd.openApp._downloadUrl);
    // 检测第三方app是否存在，appAvailability.check(scheme, successCallback, errorCallback)
    appAvailability.check(
        zyd.openApp._scheme,
        function() {
            console.log(zyd.openApp._scheme + ' is available :)');
            // 打开第三方app：【1】
            var sApp = startApp.set({
                "application": zyd.openApp._scheme
            });
            sApp.start(function(compete) {
              console.log(">>>>  已打开APP。" + compete);
            }, function(error) {
              console.error(">>>>  打开失败。" + error);
            }, function(result, requestCode, resultCode) {
                console.log(">>>>  " + JSON.stringify(result) + ", " + requestCode + ", " + resultCode);
            });

        },
        function() {  // Error callback
            console.error(">>>>  " + scheme + ' 对应的App不存在，开始尝试下载App');
            zyd.openApp.downloadApk();
        }
    );
},

注：【1】处打开第三方App时需要获取第三方App的相关信息，大致包括package和main activity，获取方式，请参考如何获取第三方Apk的包名等信息

/**
 * 下载第三方app
 */
downloadApk: function() {
    if(!zyd.openApp._downloadUrl) {
        console.error("未设置downloadUrl！已终止下载App...");
        return;
    }
    console.error(">>>>  download Apk: " + zyd.openApp._downloadUrl);
    //下载文件
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
        fs.root.getFile('test1.apk', { create: true }, function (fileEntry) {
            console.log("=========" + JSON.stringify(fileEntry));
            var fileName=fileEntry.toURL().slice( fileEntry.toURL().lastIndexOf('/')+1);
            var targetPath = cordova.file.externalDataDirectory;//cordova.file.documentsDirectory;//'cdvfile://localhost/persistent/apk/';//注意！
            var filePath=targetPath+fileName
            zyd.openApp._download(filePath);
        }, function (errorHandle) {
           console.log(">>>>  下载文件失败: " + errorHandle);
       });
    }, function (errorHandle) {
        console.log(">>>>  下载文件失败: " + errorHandle);
    })
},
/**
 * 下载
 */
_download: function(filePath) {
    var ft = new FileTransfer();
    //监听下载进度
    ft.onprogress = function (e) {
        if (e.lengthComputable) {
            var progress = e.loaded / e.total * 100;
            $("#progress").css({"width": progress + "%"});
            $("#progress").html(progress + "%");
        }
    }
    ft.download(zyd.openApp._downloadUrl, filePath, function (entry) {
        console.log('下载成功');
        console.info(JSON.stringify(entry));
        console.log('文件位置：' + entry.toURL());
    }, function (err) {
        console.log("下载失败！");
        console.info(JSON.stringify(err));
    }, null, {});
}
模拟器测试


注：测试用例中的百度地图已在模拟器上安装完成，理论上测试结果为：百度地图可以直接打开，而另一例【Dblog】应用则需要下载

测试打开百度地图

查看控制台日志

D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 130 : >>>>  打开百度地图
I/Web Console: >>>>  打开百度地图 at file:///android_asset/www/js/biz.common.js:130
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 131 : >>>>  com.baidu.BaiduMap
I/Web Console: >>>>  com.baidu.BaiduMap at file:///android_asset/www/js/biz.common.js:131
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 132 : >>>>  com.baidu.baidumaps.WelcomeScreen
I/Web Console: >>>>  com.baidu.baidumaps.WelcomeScreen at file:///android_asset/www/js/biz.common.js:132
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 133 : >>>>  undefined
I/Web Console: >>>>  undefined at file:///android_asset/www/js/biz.common.js:133
D/dalvikvm: GC_CONCURRENT freed 315K, 7% free 9262K/9880K, paused 1ms+1ms, total 4ms
D/dalvikvm: WAIT_FOR_CONCURRENT_GC blocked 2ms
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 138 : com.baidu.BaiduMap is available :)
I/Web Console: com.baidu.BaiduMap is available :) at file:///android_asset/www/js/biz.common.js:138
D/CordovaActivity: Paused the activity.
W/PluginManager: THREAD WARNING: exec() call to startApp.start blocked the main thread for 47ms. Plugin should use CordovaInterface.getThreadPool().
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 144 : >>>>  已打开APP。OK
I/Web Console: >>>>  已打开APP。OK at file:///android_asset/www/js/biz.common.js:144
W/IInputConnectionWrapper: showStatusIcon on inactive InputConnection

测试打开DBlog

查看控制台日志

D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 12 : >>>>  打开DBlog
I/Web Console: >>>>  打开DBlog at file:///android_asset/www/js/biz.common.js:12
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 13 : >>>>  com.yadongzhang.owp
I/Web Console: >>>>  com.yadongzhang.owp at file:///android_asset/www/js/biz.common.js:13
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 14 : >>>>  com.uzmap.pkg.EntranceActivity
I/Web Console: >>>>  com.uzmap.pkg.EntranceActivity at file:///android_asset/www/js/biz.common.js:14
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 15 : >>>>  http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
I/Web Console: >>>>  http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d at file:///android_asset/www/js/biz.common.js:15
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 33 : >>>>  com.yadongzhang.owp 对应的App不存在，开始尝试下载App
E/Web Console: >>>>  com.yadongzhang.owp 对应的App不存在，开始尝试下载App at file:///android_asset/www/js/biz.common.js:33
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 40 : >>>>  download Apk: http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
E/Web Console: >>>>  download Apk: http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d at file:///android_asset/www/js/biz.common.js:40
W/AssetFilesystem: Asset manifest not found. Recursive copies and directory listing will be slow.
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 45 : ========={"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: persistent>","nativeURL":"file:///data/data/com.zyd.cordova/files/files/test1.apk"}
I/Web Console: ========={"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: persistent>","nativeURL":"file:///data/data/com.zyd.cordova/files/files/test1.apk"} at file:///android_asset/www/js/biz.common.js:45
D/FileTransfer: download http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d to file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk
D/FileTransfer: Download file:http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
D/dalvikvm: GC_CONCURRENT freed 1296K, 14% free 8921K/10356K, paused 0ms+1ms, total 4ms
D/dalvikvm: GC_CONCURRENT freed 400K, 14% free 8917K/10356K, paused 2ms+0ms, total 7ms
D/dalvikvm: GC_CONCURRENT freed 389K, 14% free 8914K/10356K, paused 3ms+1ms, total 6ms
D/dalvikvm: GC_CONCURRENT freed 391K, 14% free 8914K/10356K, paused 0ms+0ms, total 5ms
D/dalvikvm: GC_CONCURRENT freed 390K, 14% free 8918K/10356K, paused 0ms+0ms, total 3ms
D/FileTransfer: Saved file: file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 71 : 下载成功
I/Web Console: 下载成功 at file:///android_asset/www/js/biz.common.js:71
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 72 : {"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: files-external>","nativeURL":"file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk"}
I/Web Console: {"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: files-external>","nativeURL":"file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk"} at file:///android_asset/www/js/biz.common.js:72
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 73 : 文件位置：file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk
I/Web Console: 文件位置：file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk at file:///android_asset/www/js/biz.common.js:73

OK，文件已下载成功！但是此处还有个问题就是：下载完成后的apk文件并不会自动安装，这样的话，还需要用户手动去安装，十分不便。那么，cordova中是否有打开第三方app的插件呢？

答案很显然，没有的话我在这吧吧个毛呢？

接下来就需要安装另外一个插件：file-opener2（打开文件）

cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2.git

改造下相关js：_download方法

/**
 * 下载
 */
_download: function(filePath) {
    var ft = new FileTransfer();
    //监听下载进度
    ft.onprogress = function (e) {
        if (e.lengthComputable) {
            var progress = e.loaded / e.total * 100;
            $("#progress").css({"width": progress + "%"});
            $("#progress").html(progress + "%");
        }
    }
    ft.download(zyd.openApp._downloadUrl, filePath, function (entry) {
        console.log('下载成功');
        console.info(JSON.stringify(entry));
        console.log('文件位置：' + entry.toURL());
                // 打开apk安装包
        cordova.plugins.fileOpener2.open(
            entry.toURL(),
            'application/vnd.android.package-archive',
            {
                error : function(e){
                    alert('失败status:'+JSON.stringify(e)+ " 路径："+entry.toURL() )
                },
                success : function(){
                  alert("安装完成后请重新打开。");
                }
        });

    }, function (err) {
        console.log("下载失败！");
        console.info(JSON.stringify(err));
    }, null, {});
}

重新运行项目

查看控制台日志

D/CordovaActivity: Started the activity.
D/CordovaActivity: Resumed the activity.
W/EGL_emulation: eglSurfaceAttrib not implemented
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 12 : >>>>  打开DBlog
I/Web Console: >>>>  打开DBlog at file:///android_asset/www/js/biz.common.js:12
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 13 : >>>>  com.yadongzhang.owp
I/Web Console: >>>>  com.yadongzhang.owp at file:///android_asset/www/js/biz.common.js:13
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 14 : >>>>  com.uzmap.pkg.EntranceActivity
I/Web Console: >>>>  com.uzmap.pkg.EntranceActivity at file:///android_asset/www/js/biz.common.js:14
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 15 : >>>>  http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
I/Web Console: >>>>  http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d at file:///android_asset/www/js/biz.common.js:15
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 33 : >>>>  com.yadongzhang.owp 对应的App不存在，开始尝试下载App
E/Web Console: >>>>  com.yadongzhang.owp 对应的App不存在，开始尝试下载App at file:///android_asset/www/js/biz.common.js:33
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 40 : >>>>  download Apk: http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
E/Web Console: >>>>  download Apk: http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d at file:///android_asset/www/js/biz.common.js:40
W/AssetFilesystem: Asset manifest not found. Recursive copies and directory listing will be slow.
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 45 : ========={"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: persistent>","nativeURL":"file:///data/data/com.zyd.cordova/files/files/test1.apk"}
I/Web Console: ========={"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: persistent>","nativeURL":"file:///data/data/com.zyd.cordova/files/files/test1.apk"} at file:///android_asset/www/js/biz.common.js:45
D/FileTransfer: download http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d to file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk
D/FileTransfer: Download file:http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
D/dalvikvm: GC_CONCURRENT freed 1292K, 14% free 8921K/10352K, paused 1ms+2ms, total 8ms
D/dalvikvm: GC_CONCURRENT freed 399K, 14% free 8929K/10352K, paused 2ms+1ms, total 31ms
D/dalvikvm: GC_CONCURRENT freed 403K, 14% free 8924K/10352K, paused 1ms+0ms, total 19ms
D/dalvikvm: GC_CONCURRENT freed 402K, 14% free 8925K/10352K, paused 0ms+1ms, total 11ms
D/FileTransfer: Saved file: file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 71 : 下载成功
I/Web Console: 下载成功 at file:///android_asset/www/js/biz.common.js:71
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 72 : {"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: files-external>","nativeURL":"file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk"}
I/Web Console: {"isFile":true,"isDirectory":false,"name":"test1.apk","fullPath":"/test1.apk","filesystem":"<FileSystem: files-external>","nativeURL":"file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk"} at file:///android_asset/www/js/biz.common.js:72
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 73 : 文件位置：file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk
I/Web Console: 文件位置：file:///mnt/sdcard/Android/data/com.zyd.cordova/files/test1.apk at file:///android_asset/www/js/biz.common.js:73
W/PluginManager: THREAD WARNING: exec() call to FileOpener2.open blocked the main thread for 19ms. Plugin should use CordovaInterface.getThreadPool().
D/CordovaActivity: Paused the activity.
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 82 : >>>>  安装完成后请重新打开。
I/Web Console: >>>>  安装完成后请重新打开。 at file:///android_asset/www/js/biz.common.js:82
W/IInputConnectionWrapper: showStatusIcon on inactive InputConnection
D/CordovaActivity: Stopped the activity.
D/CordovaActivity: Started the activity.
D/CordovaActivity: Resumed the activity.
W/EGL_emulation: eglSurfaceAttrib not implemented
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 12 : >>>>  打开DBlog
I/Web Console: >>>>  打开DBlog at file:///android_asset/www/js/biz.common.js:12
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 13 : >>>>  com.yadongzhang.owp
I/Web Console: >>>>  com.yadongzhang.owp at file:///android_asset/www/js/biz.common.js:13
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 14 : >>>>  com.uzmap.pkg.EntranceActivity
I/Web Console: >>>>  com.uzmap.pkg.EntranceActivity at file:///android_asset/www/js/biz.common.js:14
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 15 : >>>>  http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d
I/Web Console: >>>>  http://downloadpkg.apicloud.com/app/download?path=http://7zmssi.com1.z0.glb.clouddn.com/b3bf6ca124fb52aa2d51350262313c9d_d at file:///android_asset/www/js/biz.common.js:15
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 19 : com.yadongzhang.owp is available :)
I/Web Console: com.yadongzhang.owp is available :) at file:///android_asset/www/js/biz.common.js:19
W/PluginManager: THREAD WARNING: exec() call to startApp.start blocked the main thread for 21ms. Plugin should use CordovaInterface.getThreadPool().
D/CordovaActivity: Paused the activity.
D/SystemWebChromeClient: file:///android_asset/www/js/biz.common.js: Line 24 : >>>>  已打开APP。OK
I/Web Console: >>>>  已打开APP。OK at file:///android_asset/www/js/biz.common.js:24
W/IInputConnectionWrapper: showStatusIcon on inactive InputConnection
D/CordovaActivity: Stopped the activity.

至此，【Cordova开发App入门（四）打开及下载第三方App】已完成，感兴趣的朋友赶紧去试试吧。

参考资料

https://github.com/lampaa/com.lampa.startapp

https://github.com/ohh2ahh/AppAvailability

https://github.com/pwlin/cordova-plugin-file-opener2

https://blog.csdn.net/mcp1490644562/article/details/78717586

https://blog.csdn.net/u011127019/article/details/58062123

https://blog.csdn.net/hardly555/article/details/80545793/

项目源码

1.我的github

2.我的码云

相关标签
Android
JavaScript
WebApp
5人推荐
随时随地看视频
慕课网APP

相关阅读

Ionic 实现透明状态栏
cordova第一个项目遇到的一些问题以及解决方式
微信小程序商城-注意要点
微信小程序全面实战，架构设计 && 躲坑攻略
微信小程序初探