uniapp开发的APP中,如何使用手机默认浏览器打开链接或打开外部应用

71024次阅读 5174人点赞 作者: WuBin 发布时间: 2022-08-12 15:51:21
扫码到手机查看

APP内打开其他链接

重中之重!API!https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openURL

实现跳手机默认浏览器

调用外部浏览器打开指定的URL

plus.runtime.openURL( url, errorCB, identity );  
  • url: ( String ) 必选 要打开的URL地址字符串类型,各平台支持的地址类型存在差异,参考平台URL支持表,当使用各个APP的scheme时候,会打开手机上对应的APP
  • errorCB: ( OpenErrorCallback ) 可选 打开URL地址失败的回调打开指定URL地址失败时回调,并返回失败信息。
  • identity: ( String ) 可选 指定打开URL地址的程序名称在iOS平台此参数被忽略,在Android平台为程序包名,如果指定的包名不存在,则打开URL地址失败。
open(url) {  
        plus.runtime.openURL(
            url, 
            // 打开url失败,执行,如打开的是tabao://但是手机没安装,就会执行报错
            function(err) {  
                console.log(err);  
            }
        );  
} 

再看一个例子:

let u = 'https://xxxxxxxx'
// #ifdef MP-WEIXIN || H5
	url = '/pages/web-page/web-page?url=' + encodeURIComponent(u)
// #endif

// #ifdef APP-PLUS 
if(plus.os.name == 'Android' || plus.os.name == 'iOS'){
	plus.runtime.openURL(u);
	return
}
// #endif
uni.navigateTo({url: url}) // uniapp跳转页面

打开外部应用

我们在开发 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()。当然可以像1.1中那样直接使用,就会使用手机默认浏览器打开一个网页,当然网页的地址必须是http开头的才行。

调用第三方程序的方法

plus.runtime.launchApplication( appInf, errorCB );  
  • appInf: ( ApplicationInf ) 必选 要启动第三方程序的描述信息
  • errorCB: ( LaunchErrorCallback ) 必选 启动第三方程序操作失败的回调函数启动第三方程序失败时回调,并返回失败信息。
 
<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打开应用市场

openMarket(marketPackageName) {
    var appurl;
    if (plus.os.name=="Android") {
        // appurl = "market://details?id=io.dcloud.hellouniapp";
        //可能部分应用商店没有收录--uniapp示例
         appurl = "market://details?id=你的app包名";
    }
    else{
        // appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253"; 
        // Appstore的--uniapp示例
        appurl = "itms-apps://itunes.apple.com/cn/app/套装 ID/id+Apple ID";  
    }
    plus.runtime.openURL(appurl, function(res) {
            console.log(res);
    });
},
这里说明下,iOS的获取跳转链接,在App Connent中App信息中可查看

相关资料

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:plus.runtime.openURL,plus.
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8757次阅读 562人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3674次阅读 274人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13775次阅读 888人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12532次阅读 422人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    11038次阅读 881人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    15139次阅读 1207人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14612次阅读 1191人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    28356次阅读 2230人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    24476次阅读 1885人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录