DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-02-25 14:54
  • 更新:2024-03-25 17:16
  • 阅读:99795

uni-app 中如何打开外部应用,如:浏览器、淘宝、AppStore、QQ等

分类: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 模块,下面我罗列两个相关的方法。其他操作请详读文档。

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

    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配置方法

34 关注 分享
5***@qq.com 6***@qq.com 草灯 3***@qq.com 小小128 雷斯巴能 一枚小前端 野蛮的橘子 a***@chree.cn 钱钱钱 wanghexu PPTXD 云小萝 Lawrence_Yim 3***@qq.com 1***@qq.com z***@qq.com aliang888 1***@163.com 7***@qq.com 1***@163.com 诸葛逍遥 佐佑Jean 1***@qq.com 4***@qq.com g***@126.com 1***@163.com s***@sina.com 1***@qq.com jstf 1***@qq.com 1***@qq.com uniappyyds m***@aliyun.com

要回复文章请先登录注册

欢呀

欢呀

回复 Elaine10 :
大佬,请问问题1解决了嘛?问题2 是如何解决的?求解在线等
2020-12-19 20:49
7***@qq.com

7***@qq.com

牛B
楼主辛苦了
2020-12-14 21:15
Elaine10

Elaine10

回复 Elaine10 :
问题2已解决,求解问题一,要调到另一个app的指定页面 并传参
2020-10-28 15:26
Elaine10

Elaine10

plus.runtime.openURL("test://uni.UNI9ECDCB6/pages/index/index?id=111", function(res) {
console.log(res, "===")
uni.showModal({
content: "未检测到app,在浏览器中打开?",
success: function(res) {
if (res.confirm) {
plus.runtime.openURL("https://s.taobao.com/search?q=uni-app")
}
}
})
});
需求:要跳转到另外一个app并且需要携带参数
遇到的问题:1、用这种方法跳到一个uni云打包的安卓app报错No Activity found to handle Intent { act=android.intent.action.VIEW dat=test://uni.UNI9ECDCB6/pages/index/index?id=111 flg=0x10000000 }
但是跳转淘宝可以
2、 用plus.runtime.launchApplication方法可以跳转,但是不知道怎么传参数
请求解答,在线等,急~~~
2020-10-28 15:24
2***@qq.com

2***@qq.com

上边的唤起uri有些不对

高德地图 唤起地址教程:https://lbs.amap.com/api/amap-mobile/gettingstarted
2020-10-20 15:20
2***@qq.com

2***@qq.com

百度地图 唤起地址:https://lbsyun.baidu.com/index.php?title=uri
2020-10-20 15:20
1***@qq.com

1***@qq.com

回复 l***@163.com :
解决了吗?我也是h5打开地图导航
2020-09-29 16:14
1***@qq.com

1***@qq.com

回复 我吃柠檬 :
h5打开地图app了吗?
2020-09-29 16:12
1***@qq.com

1***@qq.com

回复 我吃柠檬 :
h5打开了吗
2020-09-29 16:12
按时付款撒

按时付款撒

回复 按时付款撒 :
只跳到了首页,QQ是可用的啊
2020-09-17 19:46