cordova 幫助webapp 達到調用原生系統的功能
項目需求:在項目中調用系統中含有的第三方地圖應用
需求其實分為兩步:
1. 查找本地地圖應用
2.成功調起本地應用
首先需要安裝兩個插件,安裝指令如下:
1. cordova plugin add cordova-plugin-appavailability --save
2. cordova plugin add https://github.com/lampaa/com.lampa.startapp.git
第一個安裝的是檢測應用包名的插件,第二個安裝的是啟動第三方應用的插件
檢測代碼:
appAvailability.check("com.baidu.BaiduMap",function () {
//success callback
},function () {
//error callback
});
啟動代碼:
var sApp = startApp.set({ /* params */
"action":"ACTION_VIEW",
"category":"CATEGORY_DEFAULT",
"type":"text/css",
"package":"com.baidu.BaiduMap",
"uri":"baidumap://map/direction?origin=name:"+originName+"|latlng:"+origin[0]+","+origin[1]+"&destination=name:"+destinationName+"|latlng:"+destination[0]+","+destination[1]+"&mode=driving",
"flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],
"intentstart":"startActivity"
});
sApp.start(function() { /* success */
alert("OK");
}, function(error) { /* fail */
alert(error);
});
這里是以調用地圖應用---百度地圖為例
對於url中含有的參數說明:
originName:起始地名稱
origin[0]:起始緯度
origin[1]:起始經度
destinationName:終點名稱
destination[0]:終點緯度
destination[1]:終點經度
其他地圖類應用的包名如下:
百度地圖:com.baidu.BaiduMap
高德地圖:com.autonavi.minimap
騰訊地圖:com.tencent.map
谷歌地圖:com.google.android.apps.maps
常用地圖API
常用地圖的API:
1.百度地圖 http://lbsyun.baidu.com/index.php?title=uri/api/web
調起App的uri:baidumap://map/direction
2.騰訊地圖 https://lbs.qq.com/uri_v1/guide-route.html
調起App的uri:qqmap://map/routeplan
3.高德地圖 https://lbs.amap.com/api/uri-api/guide/travel/route
調起App的uri:amapuri://route/plan/
4.谷歌地圖 地圖開發地址不可用
調起App的uri:google.navigation:q= 或者 http://maps.google.com/maps
注意: cordova 運行版本需6.3.0以上。
發散應用:
可以分別利用兩個插件,檢測應用包名,或者調起第三方應用,或者一起使用檢測某個第三方應用的存在,並傳參調起。
參考自:
ionic開發——檢測是否安裝某APP,如果安裝打開該APP
ionic項目中使用cordova插件跳轉第三方地圖APP(百度、高德)
第一步,安裝cordova插件
cordova plugin add https://github.com/lampaa/com.lampa.startapp.git //打開第三方APP
cordova plugin add cordova-plugin-appavailability --save//檢測是否存在第三方App
cordova plugin add cordova-plugin-inappbrowser //應用內置瀏覽器
第二步,配置config.xml(以百度地圖為例):
//ios
<allow-intent href="baidumap://*/*" />
//android
<allow-intent href="bdapp://*/*" />
第三步,代碼實現
var scheme;
// 不同的平台實現方式是不同的
if (ionic.Platform.isAndroid()) {
//android
scheme = 'com.baidu.BaiduMap';
appAvailability.check(
scheme, // URI Scheme or Package Name
function() { // Success callback
alert(scheme + ' is available :)');
var sApp = startApp.set({ /* params */
"action":"ACTION_MAIN",
"category":"CATEGORY_DEFAULT",
"type":"text/css",
"package":"com.baidu.BaiduMap",
"uri":"file://data/index.html",
"flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],
// "component": ["com.android.GoBallistic","com.android.GoBallistic.Activity"],
"intentstart":"startActivity",
}, { /* extras */
"EXTRA_STREAM":"extraValue1",
"extraKey2":"extraValue2"
});
sApp.start(function() { /* success */
alert("OK");
}, function(error) { /* fail */
alert(error);
});
},
function() { // Error callback
// 不存在對應APP
alert(scheme + ' is not available :(');
// 打開百度地圖下載地址
window.open("market://search?q=com.baidu.BaiduMap")
}
);
} else {
// ios
scheme = 'baidu://';
appAvailability.check(
scheme, // URI Scheme or Package Name
function() { // Success callback
alert(scheme + ' is available :)');
var sApp = startApp.set("baidumap://");
sApp.start(function() { /* success */
alert("OK");
}, function(error) { /* fail */
alert(error);
});
},
function() { // Error callback
alert(scheme + ' is not available :(');
// 打開store下載百度地圖 window.open("https://itunes.apple.com/cn/app/id452186370")
}
);
}
對於ios9+需要配置白名單,否則檢測無效:
//在項目的Info.plist文件配置
<key>LSApplicationQueriesSchemes</key>
<array>
<string>baidumap</string>
</array>