UI5-技术篇-Hybrid App-1-Barcode扫描

　参考资料：

　https://www.w3cschool.cn/cordova/cordova_overview.html

　https://blogs.sap.com/2017/01/03/sapui5-applications-with-native-capabilities/

　最近测试SAPUI5调用cordova插件开发混合移动端的应用，包含功能：相机扫描、消息推送、联系人、设备、加速计、地理位置、媒体捕获、网络信息、振动等。

本文描述相机扫描功能，相关操作如下：

　1.百度下载cordova扫描插件

　　BarcodeScanne扫描插件下载：https://github.com/wildabeast/BarcodeScanner.git

　2.SAP WEB IDE项目开发

　　2.1创建APP项目ZRICO_PN_SCAN

　　2.2导入cordvoa.js文件

　　打开SAP WEB IDE的安装路径，找到serverworkspace文件夹->ch->UserName->OrionContent->zrico_pn_scan->webapp

　　将cordvoa相关文件放置在Webapp文件夹下，然后重启或是更新WEB IDE，cordvoa加载如下所示：

　　2.3创建VIEW

　　view代码：

 1 <mvc:View controllerName="zrico_appnszrico_pn_scan.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
 2     displayBlock="true" xmlns="sap.m">
 3     <App>
 4         <pages>
 5             <Page title="{i18n>title}">
 6                 <content>
 7                     <Button text="Scan" id="__button0" type="Emphasized" icon="sap-icon://bar-code" press="onScan"/>
 8                 </content>
 9             </Page>
10         </pages>
11     </App>
12 </mvc:View>

View Code

　　controller代码：

 1 jQuery.sap.includeScript("/webapp/src/src/cordova.js");
 2 sap.ui.define([
 3     "sap/ui/core/mvc/Controller",
 4     "sap/m/MessageBox"
 5 ], function(Controller,MessageBox) {
 6     "use strict";
 7 
 8     return Controller.extend("zrico_appnszrico_pn_scan.controller.Main", {
 9         onScan: function () {
10             cordova.plugins.barcodeScanner.scan(this.scanSuccessCallback,this.scanErrorCallback);
11         },
12         scanSuccessCallback: function(result) {
13             MessageBox.alert(result.text);
14         },
15         scanErrorCallback: function(error) {
16             MessageBox.alert("Scanning failed: " + JSON.stringify(error));
17             //navigator.notification.alert("Scanning failed: " + JSON.stringify(error));
18         }
19     });
20 });