1. 程式人生 > 實用技巧 >uni-app開發經驗分享十三:實現手機掃描二維碼並跳轉全過程

uni-app開發經驗分享十三:實現手機掃描二維碼並跳轉全過程

最近使用 uni-app 開發 app ,需要實現一個調起手機攝像頭掃描二維碼功能,官網API文件給出了這樣一個demo:

// 允許從相機和相簿掃碼
uni.scanCode({
    success: function (res) {
        console.log('條碼型別:' + res.scanType);
        console.log('條碼內容:' + res.result);
    }
});

該示例確實可以調起手機攝像頭,但掃描後沒有結果。但它列印了條碼型別與條碼內容,我們控制檯檢視一下:

條碼型別具體參考官方API文件,寫的非常清楚,我們主要談一下條碼內容。不難發現,條碼內容的 URL 是由 res.result 產出,那麼問題來了,這個 URL 可以訪問嗎?

帶著好奇心,我來到了瀏覽器位址列…發現正常訪問,這時我就在想,只要掃碼後跳轉到這個 URL 不就可以完成了嗎!

最後,我使用了 HTML5+ 的openURLAPI 完成外部連結的跳轉,我們先來看一下 API 介紹:

HTML5+ 官網 API 文件:http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.openWeb

1. 語法及介紹

描述:呼叫第三方程式開啟指定的URL

void plus.runtime.openURL( url, errorCB, identity )

2. 引數與返回值

  1. url: ( String ): 必選,要開啟的URL地址,字串型別,各平臺支援的地址型別存在差異,參考平臺URL支援表。
  2. errorCB: ( OpenErrorCallback ) :可選,開啟URL地址失敗的回撥,開啟指定URL地址失敗時回撥,並返回失敗資訊。
  3. identity: ( String ) :可選,指定開啟URL地址的程式名稱,在iOS平臺此引數被忽略,在Android平臺為程式包名,如果指定的包名不存在,則開啟URL地址失敗。

返回值:void(無)


最後完善一下前面的示例,讓其支援掃描二維碼並跳轉到相應地址:

uni.scanCode({
	success: function (res) {
		void plus.runtime.openWeb(res.result,function(){
			// 識別失敗程式碼
		});
	 }
});