uniapp开发的APP中,如何使用手机默认浏览器打开链接或打开外部应用
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信息中可查看