uni-app 打开第三方程序

最新推荐文章于 2024-05-04 03:46:59 发布

binginsist

最新推荐文章于 2024-05-04 03:46:59 发布

阅读量5.4k

点赞数 1

分类专栏： html5

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们在开发 App 应用中，经常会遇到打开第三方程序的场景，在 uni-app 中我们应该如何做？相信不少刚接触的同学都会有此疑问。其实在 uni-app 中实现这个功能是非常简单的。

我们使用 5+ Plus runtime 可以很方便的实现上文操作。点击查看文档

在此之前，我们要知道一个很重要的概念，就是我们接下来要用到的东西。

什么是 HTML5 Plus

HTML5+ 规范是一个开放规范，隶属于工信部，允许三方浏览器厂商或其他手机runtime制造商实现。 HTML5+ 扩展了 JavaScript 对象 plus，使得 js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。除了功能外，HTML5+很重要的特点是提供了原生的渲染能力，通过 plus.webview、plus.nativeObj、plus.nativeUI，让开发者可以使用 js 来调用原生渲染能力，实现体验的大幅提升。原生的 api 多达 40万，HTML5+ 的封装并非把40万 api 都封装了一遍，而是分成了2个层面：

HTML5Plus 规范：常用的扩展能力，比如二维码、语音输入，都封装到了规范中，同时实现了 Android 和 iOS 的解析引擎，使得开发者的代码编写一次，可跨平台运行。
Native.js 是另一项创新技术。手机 OS 的原生 API 有四十多万，大量的 API 无法被HTML5使用。Native.js 把几十万原生 API 映射成了 js 对象，通过 js 可以直接调 ios和 android 的原生 API。这部分就不再跨平台，写法分别是 plus.ios 和 plus.android，比如调 ios game center，或在 android 手机桌面创建快捷方式，这些都是平台专有的 api。

Native.js的用法示例

var obj= plus.android.import("android.content.Intent");
// 将一个原生对象android.content.Intent映射为js对象obj，然后在js里操作obj对象的方法属性就可以了。

复制代码

Native.js的详细教程可以参考：5+ App开发Native.js入门指南

如何使用 `5+ Plus`

如果之前开发过 5+App 的同学一定知道，在 5+App 中，使用 plus 的相关方法，需要初始化 plus 的相关环境。

用获取当前应用的 APPID 举个例子：


// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener('plusready', onPlusReady, false);
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady(){
	// 处理第三方传入的参数
	alert('Current APP：' + plus.runtime.appid);
}

复制代码

而我们在 uni-app 开发中，根本不需要如此繁琐，uni-app 已经把 plus 环境都已经封装好，我们可以直接调用方法。


console.log('Current APP：' + plus.runtime.appid);

复制代码

打开第三方程序

打开第三方程序，我们需要使用 runtime 模块,下面我罗列两个相关的方法。其他操作请详读文档。

调用第三方程序打开指定的 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>

复制代码
```

调用第三方程序

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.tencent.mm'
					},
					function(e) {
						console.log('Open system default browser failed: ' + e.message);
					}
				);
			} else if (plus.os.name == 'iOS') {
				plus.runtime.launchApplication({ action: 'weixin://' }, function(e) {
					console.log('Open system default browser failed: ' + e.message);
				});
			}
			
		}
	}
};
</script>

复制代码

常用URLscheme

[
	{
		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://'
	}
]

复制代码

Tis ：