【uniapp 开发】uni-app 中如何打开外部应用

我们在开发 App 应用中，经常会遇到打开第三方程序的场景，比如打开手机淘宝、通过第三方浏览器打开一个 url 等等。

App不像网页可以使用http超链接互相跳转，但手机os设计了scheme机制，可以通过特殊的链接互相调起。

比如手机淘宝，其安装后会在手机os中会注册一个scheme协议，taobao://。

这种协议还支持参数，比如taobao://s.taobao.com/search?q=uni-app启动淘宝并打开搜索页面搜索uni-app。

在uni-app/5+App中，可以通过scheme呼起其他App，也支持给自己的App设置scheme参数。

这个功能小程序并不支持，属于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支持表。
errorCB: ( OpenErrorCallback ) 可选打开URL地址失败的回调

打开指定URL地址失败时回调，并返回失败信息。
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>

给自己的App设置scheme

可在manifest中可配置。

Android配置方法

 iOS配置方法

巴特西

【uniapp 开发】uni-app 中如何打开外部应用

打开第三方程序

常用URLscheme

更多实用例子

给自己的App设置scheme

最新文章

热门文章