我們?cè)陂_(kāi)發(fā) App 應(yīng)用中，經(jīng)常會(huì)遇到打開(kāi)第三方程序的場(chǎng)景，比如打開(kāi)手機(jī)淘寶、通過(guò)第三方瀏覽器打開(kāi)一個(gè) url 等等。
App不像網(wǎng)頁(yè)可以使用http超鏈接互相跳轉(zhuǎn)，但手機(jī)os設(shè)計(jì)了scheme機(jī)制，可以通過(guò)特殊的鏈接互相調(diào)起。
比如手機(jī)淘寶，其安裝后會(huì)在手機(jī)os中會(huì)注冊(cè)一個(gè)scheme協(xié)議，taobao://。
這種協(xié)議還支持參數(shù)，比如taobao://s.taobao.com/search?q=uni-app啟動(dòng)淘寶并打開(kāi)搜索頁(yè)面搜索uni-app。
在uni-app/5+App中，可以通過(guò)scheme呼起其他App，也支持給自己的App設(shè)置scheme參數(shù)。
這個(gè)功能小程序并不支持，屬于App端的擴(kuò)展API。
打開(kāi)外部scheme的API是plus.runtime.openURL()。查看文檔：http://www.html5plus.org/doc/zh_cn/runtime.html
打開(kāi)第三方程序
打開(kāi)第三方程序，我們需要使用 runtime 模塊,下面我羅列兩個(gè)相關(guān)的方法。其他操作請(qǐng)?jiān)斪x文檔。
-
調(diào)用外部瀏覽器打開(kāi)指定的URL
plus.runtime.openURL( url, errorCB, identity ); - url: ( String ) 必選 要打開(kāi)的URL地址
字符串類型，各平臺(tái)支持的地址類型存在差異，參考平臺(tái)URL支持表。 - errorCB: ( OpenErrorCallback ) 可選 打開(kāi)URL地址失敗的回調(diào)
打開(kāi)指定URL地址失敗時(shí)回調(diào)，并返回失敗信息。 - identity: ( String ) 可選 指定打開(kāi)URL地址的程序名稱
在iOS平臺(tái)此參數(shù)被忽略，在Android平臺(tái)為程序包名，如果指定的包名不存在，則打開(kāi)URL地址失敗。
<template>
<view>
<button class="button" type="primary" @click="open(0)">使用第三方程序打開(kāi)指定URL</button>
</view>
</template> plus.runtime.launchApplication( appInf, errorCB ); - appInf: ( ApplicationInf ) 必選 要啟動(dòng)第三方程序的描述信息
- errorCB: ( LaunchErrorCallback ) 必選 啟動(dòng)第三方程序操作失敗的回調(diào)函數(shù)
啟動(dòng)第三方程序失敗時(shí)回調(diào)，并返回失敗信息。
<template>
<view>
<button class="button" type="primary" @click="launchApp">打開(kāi)淘寶</button>
</view>
</template> <script> export default { data() { return { url: 'https://uniapp.dcloud.io/' }; }, onLoad(op) {}, methods: { launchApp() { let _this = this; // 判斷平臺(tái) if (plus.os.name == 'Android') { plus.runtime.launchApplication( { pname: 'com.taobao.taobao' }, function(e) { console.log('Open system default browser failed: ' + e.message); } ); } else if (plus.os.name == 'iOS') { plus.runtime.launchApplication({ action: 'taobao://' }, function(e) { console.log('Open system default browser failed: ' + e.message); }); } } } }; </script>
常用URLscheme
[
// 只在 ios 中生效
{
name: 'App Store',
scheme: 'itms-apps://'
},
{
name: '支付寶',
pname: 'com.eg.android.AlipayGphone',
scheme: 'alipay://'
},
{
name: '淘寶',
pname: 'com.taobao.taobao',
scheme: 'taobao://'
},
{
name: 'QQ',
pname: 'com.tencent.mobileqq',
scheme: 'mqq://'
},
{
name: '微信',
pname: 'com.tencent.mm',
scheme: 'weixin://'
},
{
name: '京東',
pname: 'com.jingdong.app.mall',
scheme: 'openApp.jdMobile://'
},
{
name: '新浪微博',
pname: 'com.sina.weibo',
scheme: 'sinaweibo://'
},
{
name: '優(yōu)酷',
pname: 'com.youku.phone',
scheme: 'youku://'
}
]
更多實(shí)用例子
除了簡(jiǎn)單的打開(kāi)App，我們更多的時(shí)候想要直達(dá)。這里匯總了很多有用的直達(dá)案例：
- 使用應(yīng)用商店打開(kāi)指定App，可用于引導(dǎo)評(píng)分
- 強(qiáng)制使用應(yīng)用寶打開(kāi)指定App
- 打開(kāi)淘寶搜索頁(yè)面。需要你要做淘寶客，需要向淘寶申請(qǐng)自己的scheme參數(shù)并傳入。
- 打開(kāi)地圖并指定地點(diǎn)
- 打開(kāi)qq并到指定聊天界面，可用于客服
具體代碼見(jiàn)下：
<template>
<view>
<page-head title="通過(guò)scheme打開(kāi)三方app示例"></page-head>
<button class="button" @click="openBrowser('https://uniapp.dcloud.io/h5')">使用瀏覽器打開(kāi)指定URL</button>
<button class="button" @click="openMarket()">使用應(yīng)用商店打開(kāi)指定App</button>
<button class="button" @click="openMarket('com.tencent.android.qqdownloader')">強(qiáng)制使用應(yīng)用寶打開(kāi)指定App</button>
<button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打開(kāi)淘寶搜索頁(yè)面</button>
<button class="button" @click="openMap()">打開(kāi)地圖并指定地點(diǎn)</button>
<view class="uni-divider">
<view class="uni-divider__content">打開(kāi)QQ</view>
<view class="uni-divider__line"></view>
</view>
<view class="uni-padding-wrap">
<form @submit="openQQ">
<view>
<view class="uni-title">請(qǐng)輸入聊天對(duì)象QQ號(hào)：</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" name="qqNum" type="number"/>
</view>
</view>
</view>
<view>
<view class="uni-title">請(qǐng)選擇QQ號(hào)類型：</view>
<radio-group class="uni-flex" name="qqNumType">
<label>
<radio value="wpa" checked=""/>普通QQ號(hào)</label>
<label>
<radio value="crm" />營(yíng)銷QQ號(hào)(無(wú)需加好友直接聊天)</label>
</radio-group>
</view>
<view class="uni-btn-v uni-common-mt">
<button class="button" formType="submit">打開(kāi)qq并到指定聊天界面</button>
</view>
</form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
openBrowser(url){
plus.runtime.openURL(url)
},
openMarket(marketPackageName) {
var appurl;
if (plus.os.name=="Android") {
appurl = "market://details?id=io.dcloud.HelloH5"; //由于hello uni-app沒(méi)有上Android應(yīng)用商店，所以此處打開(kāi)了另一個(gè)示例應(yīng)用
}
else{
appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8";
}
if (typeof(marketPackageName)=="undefined") {
plus.runtime.openURL(appurl, function(res) {
console.log(res);
});
} else{//強(qiáng)制指定某個(gè)Android應(yīng)用市場(chǎng)的包名，通過(guò)這個(gè)包名啟動(dòng)指定app
if (plus.os.name=="Android") {
plus.runtime.openURL(appurl, function(res) {
plus.nativeUI.alert("本機(jī)沒(méi)有安裝應(yīng)用寶");
},marketPackageName);
} else{
plus.nativeUI.alert("僅Android手機(jī)才支持應(yīng)用寶");
}
}
},
openTaobao(url){
plus.runtime.openURL(url, function(res) {
uni.showModal({
content:"本機(jī)未檢測(cè)到淘寶客戶端，是否打開(kāi)瀏覽器訪問(wèn)淘寶？",
success:function(res){
if (res.confirm) {
plus.runtime.openURL("https://s.taobao.com/search?q=uni-app")
}
}
})
});
},
openMap(){
var url = "";
if (plus.os.name=="Android") {
var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});
var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});
var urlBaiduMap = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";
var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0"
if (hasAmap && hasBaiduMap) {
plus.nativeUI.actionSheet({title:"選擇地圖應(yīng)用",cancel:"取消",buttons:[{title:"百度地圖"},{title:"高德地圖"}]}, function(e){
switch (e.index){
case 1:
plus.runtime.openURL(urlBaiduMap);
break;
case 2:
plus.runtime.openURL(urlAmap);
break;
}
})
}
else if (hasAmap) {
plus.runtime.openURL(urlAmap);
}
else if (hasBaiduMap) {
plus.runtime.openURL(urlBaiduMap);
}
else{
url = "geo:39.96310,116.340698?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";
plus.runtime.openURL(url); //如果是國(guó)外應(yīng)用，應(yīng)該優(yōu)先使用這個(gè)，會(huì)啟動(dòng)google地圖。這個(gè)接口不能統(tǒng)一坐標(biāo)系，進(jìn)入百度地圖時(shí)會(huì)有偏差
}
} else{
// iOS上獲取本機(jī)是否安裝了百度高德地圖，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist節(jié)點(diǎn)下添加（如urlschemewhitelist:["iosamap","baidumap"]）
plus.nativeUI.actionSheet({title:"選擇地圖應(yīng)用",cancel:"取消",buttons:[{title:"Apple地圖"},{title:"百度地圖"},{title:"高德地圖"}]}, function(e){
console.log("e.index: " + e.index);
switch (e.index){
case 1:
url = "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=39.96310,116.340698&spn=0.008766,0.019441";
break;
case 2:
url = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";
break;
case 3:
url = "iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0";
break;
default:
break;
}
if (url!="") {
plus.runtime.openURL( url, function( e ) {
plus.nativeUI.alert("本機(jī)未安裝指定的地圖應(yīng)用");
});
}
})
}
},
openQQ: function (e) {
// console.log("e.detail.value: " + JSON.stringify(e.detail.value));
// 沒(méi)有校驗(yàn)qq號(hào)是否為空或合法數(shù)字，如果不是可用的qq號(hào)，啟動(dòng)qq后會(huì)停留在qq主界面
plus.runtime.openURL('mqqwpa://im/chat?chat_type=' + e.detail.value.qqNumType + '&uin=' + e.detail.value.qqNum,function (res) {
plus.nativeUI.alert("本機(jī)沒(méi)有安裝QQ，無(wú)法啟動(dòng)");
});
}
}
};
</script>
<style>
.button {
margin: 30upx;
color: #007AFF;
}
</style>
給自己的App設(shè)置scheme
可在manifest中可配置。
<script>
export default {
data() {
return {
url: 'https://uniapp.dcloud.io/'
};
},
onLoad(op) {},
methods: {
open(types) {
plus.runtime.openURL(this.url, function(res) {
console.log(res);
});
}
}
};
</script>
調(diào)用第三方程序
鄂公網(wǎng)安備 42090202000212號(hào)