增加扫码和显示二维码的功能

assets/scripts/libs/native_bridge.js

@@ -5,7 +5,9 @@ import init, {
   sign_for_tran,
   generate_sec_key,
   generate_scrypt_hash,
+  generate_qr,
 } from '../../wasm/rustwallet.js';
+import { QrScanner, showQr } from './qr_reading.js';
 import { GoogleClient } from './google.client.js';
 // call native method
 
@@ -97,7 +99,24 @@ window.jsb = {
   // END:: only for web
   // BEGIN:: native method
   scanQRCode: function (funid, title) {
-    callNative({ action: 'scanQRCode', funid, title });
+    if (jc.wallet.platform === 'web') {
+      this.scaner = this.scaner || new QrScanner();
+      this.scaner.start(title,(result) => {
+        this.scaner.stop();
+        let data = {errcode: 0, data: result}
+        nativeCall(funid, JSON.stringify(data));
+      });
+    } else {
+      callNative({ action: 'scanQRCode', funid, title });
+    }
+  },
+  showQRCode: function (funid, title) {
+    if (jc.wallet.platform === 'web') {
+      let str = generate_qr(title);
+      showQr(str);
+    } else {
+      callNative({ action: 'showQRCode', funid, title });
+    }
   },
   buyProduct: function (funid, productId, orderId) {
     callNative({ action: 'buyProduct', funid, productId, orderId });

assets/scripts/libs/qr_reading.js

@@ -0,0 +1,102 @@
+import { Html5Qrcode, Html5QrcodeSupportedFormats } from "./html5-qrcode.min.js"
+
+export class QrScanner {
+  constructor(domId) {
+    domId = domId || 'qr-container';
+    this.el = document.getElementById(domId);
+    if (!this.el) {
+      this.el = createDom();
+    }
+    this.render_id = 'qr-reader';
+    this.config = { fps: 4, qrbox: (width, height) => {return { width: width * 0.8, height: height * 0.9 }}};
+    this.scanner = new Html5Qrcode(this.render_id, { });
+    this.el.addEventListener('click', this.stop.bind(this)); 
+    document.getElementById('qr-close').addEventListener('click', this.stop.bind(this));
+  }
+
+  start(title,onScanSuccess) {
+    this.el.style.display = 'flex';
+    document.getElementById('qr-title').innerText = title;
+    const _onScanSuccess = (decodedText, decodedResult) => {
+      onScanSuccess(decodedText);
+    }
+    const startScanner = () => {
+      this.scanner.start({ facingMode: "environment" }, this.config, _onScanSuccess)
+        .then((_) => {
+          console.log('start scan');
+        }, (e) => {
+          console.log('scan error: ', e);
+        });
+    }
+    startScanner();
+  }
+
+  stop() {
+    if (this.scanner && this.scanner.getState() === 2){
+      this.scanner.stop().then((_) => {
+        console.log('stop scan')
+      });
+    }
+    this.el.style.display = 'none';
+  }
+}
+export function showQr(svgStr) {
+  let el = document.getElementById('qr-container');
+  if (!el) {
+    el = createDom();
+  }
+  document.getElementById('qr-title').innerText = '';
+  let container = document.getElementById('qr-reader');
+  container.innerHTML = svgStr;
+  el.style.display = 'flex';
+}
+function createDom() {
+    addStyle(css);
+    let container = document.createElement('div');
+    container.id = 'qr-container';
+    container.className = 'qr-container';
+    let h2 = document.createElement('h2');
+    h2.innerText = 'Scan QR Code';
+    h2.id = 'qr-title';
+    container.appendChild(h2);
+    let div = document.createElement('div');
+    div.id = 'qr-reader';
+    div.className = 'qr-div';
+    container.appendChild(div);
+    let button = document.createElement('button');
+    button.innerText = 'Close';
+    button.id = 'qr-close';
+    container.appendChild(button);
+    document.body.appendChild(container);
+    var closeMe = function(e) {
+      if (e.target.id !== 'qr-container' && e.target.id !== 'qr-close') {
+        return false;
+      }
+      container.style.display = 'none';
+    }
+    container.addEventListener('click', closeMe); 
+    button.addEventListener('click', closeMe); 
+    return container;
+ }
+const css = `
+.qr-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: none;
+  background: #0000006b;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.qr-div {
+  position: relative;
+  padding: 0px;
+  width: 500px;
+}
+`

assets/scripts/libs/utils.js

@@ -0,0 +1,18 @@
+function addStyle(content) {
+  var target = document.head || document.getElementsByTagName('head')[0];
+  var node = document.createElement("style");
+  node.innerHTML = content;
+  target.appendChild(node);
+}
+
+function curry(func) {
+  return function curried(...args) {
+    if (args.length >= func.length) {
+      return func.apply(this, args);
+    } else {
+      return function(...args2) {
+        return curried.apply(this, args.concat(args2));
+      }
+    }
+  };
+}

assets/scripts/main_native_inject.js

@@ -165,11 +165,14 @@ if (jc.wallet.platform !== 'web') {
     callProxyMethod.apply(this, args);
   }
 
-  function showQRCode(...args) {
-    args.unshift('showQRCode');
-    callProxyMethod.apply(this, args);
-  }
-
+//   function showQRCode(...args) {
+//     args.unshift('showQRCode');
+//     callProxyMethod.apply(this, args);
+//   }
+//   function scanQRCode(...args) {
+//     args.unshift('scanQRCode');
+//     callProxyMethod.apply(this, args);
+//   }
   // function showWebPage(...args) {
   //   try {
   //     jsb.showWebPage(...args);

assets/scripts/run_sample.js

@@ -43,7 +43,10 @@ const pages = {
     let res = await callMethod('currentChain');
     console.log(res);
   },
-
+  scanQRCode: async function () {
+    let res = await callMethod('scanQRCode', 'scan');
+    console.log(res);
+  },
   showQRCode: async function () {
     let res = await callMethod('showQRCode', address);
     console.log(res);

index.html

@@ -42,7 +42,6 @@
   <div class='app' id='app'>
 
   </div>
-  
   <script th:inline="javascript">
     /**
      * 加载外部js
@@ -69,6 +68,7 @@
     var scripts = [
       ['assets/scripts/libs/jcwallet.js'],
       ['assets/scripts/libs/main.js'],
+      ['assets/scripts/libs/utils.js'],
       ['assets/scripts/libs/native_bridge.js', 1],
       ['assets/scripts/main_native_inject.js'],
       ['assets/scripts/run_sample.js'],