uni-app 打开第三方程序

 

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

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.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 ：

• 5+Plus 只能用于 App 端，不支持小程序与 H5 端。

具体示例从这篇文章的附件下载： uni-app 打开第三方程序

转载地址：https://juejin.im/post/5c739535f265da2daa3159c9