Ionic2學習筆記（10）：掃描二維碼

作者：Grey

原文地址： http://www.cnblogs.com/greyzeng/p/5575843.html

時間：6/11/2016

   

說明：

在本文發表的時候（2016-06-11），Ionic2是beta版本，所有還是會有一些改動比較大的地方: 點擊查看 ，

比如beta8版本（2016-06-06），相較於前面的版本就有一個特別大的改動的地方：

@App and @Page should be replaced with @Component

基於這種情況，大家還是靜靜期待正式版吧。

 

以下教程基於：Ionic2 beta8版本

環境：

• OS X EI Capitan (Version 10.11.5)
• Visual Studio Code
• XCode (Version 7.3.1)
• iPhone 6s Plus

這次嘗試在Mac+iPhone真機上進行調試，感覺Visual Studio Code配合XCode調試起來還是比較方便的，不過個人還是偏愛Windows下來開發，坐等Visual Studio支持Ionic2。

 

需求：

這次要實現掃描包含URL的二維碼並用系統默認瀏覽器打開這個URL。

 

1. 新建一個項目，命名為：scanapp
2. 命令行下，進入項目:

   cd scanapp

3. 增加一個用於處理二維碼的插件和一個調用瀏覽器的插件，運行：

   ionic plugin add phonegap-plugin-barcodescanner

   ionic plugin add cordova-plugin-inappbrowser

4. 打開app/pages/home/home.html, 增加一個按鈕，並且綁定一個事件，用於調出攝像頭掃描二維碼：

   

5. 在app/pages/home/home.js中，增加相應的處理方法：

其中：cordova.InAppBrowser.open(result.text, '_system', 'location=yes');表示調用系統自帶的瀏覽器打開URL地址。

1. 命令行執行：sudo ionic build ios,
2. 用XCode打開scanapp/platforms/ios這個文件夾

   

3. 用USB連接iPhone設備，點擊XCode的運行按鈕：

   

    

4. 效果：

   

    

   

    

   

    

    

參考：

• Launch Websites With Ionic 2 Using The InAppBrowser
• Add Barcode Scanning Functionality To Your Ionic 2 App

------

上一篇：Ionic2學習筆記（9）：訪問本地設備