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