【uniapp 開發】uni-app 中如何打開外部應用

時間 2019-11-12

標籤 uniapp 開發 uni app 如何打開外部應用简体版

原文原文鏈接

咱們在開發 App 應用中，常常會遇到打開第三方程序的場景，好比打開手機淘寶、經過第三方瀏覽器打開一個 url 等等。html

App不像網頁可使用http超連接互相跳轉，但手機os設計了scheme機制，能夠經過特殊的連接互相調起。html5

好比手機淘寶，其安裝後會在手機os中會註冊一個scheme協議，taobao://。android

這種協議還支持參數，好比taobao://s.taobao.com/search?q=uni-app啓動淘寶並打開搜索頁面搜索uni-app。ios

在uni-app/5+App中，能夠經過scheme呼起其餘App，也支持給本身的App設置scheme參數。json

這個功能小程序並不支持，屬於App端的擴展API。小程序

打開外部scheme的API是plus.runtime.openURL()。查看文檔：http://www.html5plus.org/doc/zh_cn/runtime.html瀏覽器

打開第三方程序

打開第三方程序，咱們須要使用 runtime 模塊,下面我羅列兩個相關的方法。其餘操做請詳讀文檔。微信

plus.runtime.openURL( url, errorCB, identity );

url: ( String ) 必選要打開的URL地址
字符串類型，各平臺支持的地址類型存在差別，參考平臺URL支持表。app
errorCB: ( OpenErrorCallback ) 可選打開URL地址失敗的回調
打開指定URL地址失敗時回調，並返回失敗信息。ide
identity: ( String ) 可選指定打開URL地址的程序名稱
在iOS平臺此參數被忽略，在Android平臺爲程序包名，若是指定的包名不存在，則打開URL地址失敗。

<template>  
       <view>  
           <button class="button" type="primary" @click="open(0)">使用第三方程序打開指定URL</button>  
       </view>  
   </template>

<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>

2，調用第三方程序

plus.runtime.launchApplication( appInf, errorCB );

appInf: ( ApplicationInf ) 必選要啓動第三方程序的描述信息
errorCB: ( LaunchErrorCallback ) 必選啓動第三方程序操做失敗的回調函數
啓動第三方程序失敗時回調，並返回失敗信息。

<template>  
        <view>  
            <button class="button" type="primary" @click="launchApp">打開淘寶</button>  
        </view>  
    </template>

<script>  
export default {  
    data() {  
        return {  
            url: 'https://uniapp.dcloud.io/'  
        };  
    },  
    onLoad(op) {},  
    methods: {  
        launchApp() {  
            let _this = this;  
            // 判斷平臺  
            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: '優酷',  
        pname: 'com.youku.phone',  
        scheme: 'youku://'  
    }  
]

更多實用例子

除了簡單的打開App，咱們更多的時候想要直達。這裏彙總了不少有用的直達案例：

使用應用商店打開指定App，可用於引導評分
強制使用應用寶打開指定App
打開淘寶搜索頁面。須要你要作淘寶客，須要向淘寶申請本身的scheme參數並傳入。
打開地圖並指定地點
打開qq併到指定聊天界面，可用於客服
具體代碼見下：

<template>  
    <view>  
        <page-head title="經過scheme打開三方app示例"></page-head>  
        <button class="button" @click="openBrowser('https://uniapp.dcloud.io/h5')">使用瀏覽器打開指定URL</button>  
        <button class="button" @click="openMarket()">使用應用商店打開指定App</button>  
        <button class="button" @click="openMarket('com.tencent.android.qqdownloader')">強制使用應用寶打開指定App</button>  
        <button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打開淘寶搜索頁面</button>  
        <button class="button" @click="openMap()">打開地圖並指定地點</button>  
        <view class="uni-divider">  
            <view class="uni-divider__content">打開QQ</view>  
            <view class="uni-divider__line"></view>  
        </view>  
        <view class="uni-padding-wrap">  
            <form @submit="openQQ">  
                <view>  
                    <view class="uni-title">請輸入聊天對象QQ號：</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">請選擇QQ號類型：</view>  
                    <radio-group class="uni-flex" name="qqNumType">  
                        <label>  
                            <radio value="wpa" checked=""/>普通QQ號</label>  
                        <label>  
                            <radio value="crm" />營銷QQ號(無需加好友直接聊天)</label>  
                    </radio-group>  
                </view>  
                <view class="uni-btn-v uni-common-mt">  
                    <button class="button" formType="submit">打開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沒有上Android應用商店，因此此處打開了另外一個示例應用  
            }  
            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{//強制指定某個Android應用市場的包名，經過這個包名啓動指定app  
                if (plus.os.name=="Android") {  
                    plus.runtime.openURL(appurl, function(res) {  
                        plus.nativeUI.alert("本機沒有安裝應用寶");  
                    },marketPackageName);  
                } else{  
                    plus.nativeUI.alert("僅Android手機才支持應用寶");  
                }  
            }  
        },  
        openTaobao(url){  
            plus.runtime.openURL(url, function(res) {  
                uni.showModal({  
                    content:"本機未檢測到淘寶客戶端，是否打開瀏覽器訪問淘寶？",  
                    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:"選擇地圖應用",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); //若是是國外應用，應該優先使用這個，會啓動google地圖。這個接口不能統一座標系，進入百度地圖時會有誤差  
                }  
            } else{  
                // iOS上獲取本機是否安裝了百度高德地圖，須要在manifest裏配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist節點下添加（如urlschemewhitelist:["iosamap","baidumap"]）  
                plus.nativeUI.actionSheet({title:"選擇地圖應用",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("本機未安裝指定的地圖應用");  
                        });  
                    }  
                })  
            }  
        },  
        openQQ: function (e) {  
            // console.log("e.detail.value: " + JSON.stringify(e.detail.value));  
            // 沒有校驗qq號是否爲空或合法數字，若是不是可用的qq號，啓動qq後會停留在qq主界面  
            plus.runtime.openURL('mqqwpa://im/chat?chat_type=' + e.detail.value.qqNumType + '&uin=' + e.detail.value.qqNum,function (res) {  
                plus.nativeUI.alert("本機沒有安裝QQ，沒法啓動");  
            });  
        }  
    }  
};  
</script>  
<style>  
.button {  
    margin: 30upx;  
    color: #007AFF;  
}  
</style>