uni-app 開啟第三方程式

mehaotian發表於2019-02-25
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 開啟第三方程式

相關文章