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 打开第三方程序