Сканирование QR-кода с помощью Cordova

На домашнем экране две кнопки. Они предназначены для сканирования и отображения данных.

Поместите этот код в тег body страницы index.html (заменив существующие элементы div):

 <div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="main" class="ui-content"> <p> <a target="_blank" href="javascript:scan();" style="text-decoration: none"><button>Scan</button></a> <a target="_blank" href="#display" style="text-decoration: none"><button>Display Scanned Data</button></a> </p> </div> </div> 

Вот как выглядит страница:

сканирование

Когда пользователь нажимает кнопку « Сканировать» , вызывается функция с именем scan() . Вот функция scan . Поместите его в тег script :

 function scan() { cordova.plugins.barcodeScanner.scan( function (result) { if(!result.cancelled) { if(result.format == "QR_CODE") { navigator.notification.prompt("Please enter name of data", function(input){ var name = input.input1; var value = result.text; var data = localStorage.getItem("LocalData"); console.log(data); data = JSON.parse(data); data[data.length] = [name, value]; localStorage.setItem("LocalData", JSON.stringify(data)); alert("Done"); }); } } }, function (error) { alert("Scanning failed: " + error); } ); } 

Здесь я проверяю тип штрих-кода после того, как пользователь его отсканировал. Если штрих-код является QR-кодом, то мы продвигаемся дальше, в противном случае мы ничего не делаем.

Если тип штрих-кода — QR-код, то мы просим пользователя ввести имя для идентификации отсканированного текста и сохранить его в локальном хранилище. Наконец, мы отображаем окно с текстом « Готово» .

Вот как выглядит экран при первом нажатии кнопки « Сканировать» :

Отображение

Когда пользователь нажимает кнопку « Показать данные» , он переключается на страницу с display идентификатора.

Давайте создадим эту страницу. Поместите этот код внутри тега body :

 <div data-role="page" id="display"> <div data-role="header"> <a target="_blank" href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> <h1>Display</h1> </div> <div data-role="main" class="ui-content"> <table data-role="table" data-mode="column" id="allTable" class="ui-responsive table-stroke"> <thead> <tr> <th>Name</th> <th>Value</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> 

Здесь мы отображаем пустую таблицу. Чтобы заполнить таблицу данными локального хранилища, поместите этот код в тег script :

 $(document).on("pagebeforeshow", "#display", function() { $("table#allTable tbody").empty(); var data = localStorage.getItem("LocalData"); console.log(data); data = JSON.parse(data); var html = ""; for(var count = 0; count < data.length; count++) { html = html + "<tr><td>" + data[count][0] + "</td><td><a href='javascript:openURL(\"" + data[count][1] + "\")'>" + data[count][1] + "</a></td></tr>"; } $("table#allTable tbody").append(html).closest("table#allTable").table("refresh").trigger("create"); }); function openURL(url) { window.open(url, '_blank', 'location=yes'); } 

Перед отрисовкой страницы мы заполняем таблицу локальными данными. При щелчке URL-адреса мы openURL функцию openURL которая открывает URL-адрес в окне InAppBrowser .

Вот как выглядит страница:

Вот как InAppBrowser окно InAppBrowser :

Вывод

Это руководство было основным введением в чтение штрих-кода с помощью приложения Cordova. Мы узнали, как различать различные типы штрих-кодов, плагины, которые могут нам помочь, и как сканировать и хранить штрих-коды.

Дайте мне знать о вашем опыте использования этого учебника и идеях по его расширению.