HTML5➕ 相机扫码 相册扫码 plus.barcode

react+HTML5Plus+wap2app+扫码

一、前言

最近接手一个 需要用react来写wap端 最后用wap2app转成app的项目 要求实现扫面二维码功能 遇到了好多坑 特来做个笔记

二、技术支持：

HTML5Plus扫码：文档地址
h5+扫码实例：文档地址
wap2app：文档地址

三、代码示例

亲测有效

import React, { PureComponent } from 'react';
let barcode = null
export default class scanPage extends PureComponent {
  // plus准备工作
  componentDidMount() {
    if (window.plus) {
      this.plusReady();
    } else {
      document.addEventListener('plusready', this.plusReady, false);
    }
  }
  // 卸载组件时 释放扫码组件资源
  componentWillUnmount() {
    barcode&&barcode.close();
    barcode = null;
  }
  // plusReady h5+必备
  plusReady = () => {
    // 在这里调用plus api
    this.creatBarCode()
  }
  // 创建barcode控件
  creatBarCode() {
    if (!barcode) {
      barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
        background: '#fff',
        frameColor: '#07c160',
        scanbarColor: '#07c160',
        top: '100px',
        left: '0px',
        width: '100%',
        height: '580px',
        position: 'static'
      });
      barcode.onmarked = this.onmarked//扫码成功
      barcode.onerror = this.onerror//扫码失败
      plus.webview.currentWebview().append(barcode);//必要的
    }
    barcode.start();
  }
  // 识别成功
  onmarked(type, result) {
    alert('扫描结果:' + result)
  }
  // 识别失败
  onerror(err){
    alert("扫码失败");
    console.log('扫码失败',JSON.stringify(err)) 
    barcode&&barcode.close();
    barcode = null;
  }
  // 从相册中选择
  scanFromPic() {
    let that=this
    plus.gallery.pick(function (path) {
      plus.barcode.scan(path, that.onmarked, that.onerror);
    }, function (err) {
      alert('选择相片失败: ' + JSON.stringify(err.message));
    });
  }
  render() {
    return (
      <div >
        <div style={{marginTop:70+'px',textAlign:'right'}} onClick={this.scanFromPic.bind(this)}>从相册选择</div>
        <div id="barcode"></div>
      </div>
    )
  }
}

四、解释

npm包

使用h5API,不需要其他包

预加载

使用任何h5+时都要plusready

 // plus准备工作
 componentDidMount() {
  if (window.plus) {
   this.plusReady();
  } else {
   document.addEventListener('plusready', this.plusReady, false);
  }
 }
  

plusready

 // plusReady h5+必备
 plusReady = () => {
  //这里写h5+的api
  this.creatBarCode()
 }

扫描二维码具体实现方法

 creatBarCode() {
  if (!barcode) {
   barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
    background: '#fff',
    frameColor: '#07c160',
    scanbarColor: '#07c160',
    top: '100px',
    left: '0px',
    width: '100%',
    height: '580px',
    position: 'static'
   });
   barcode.onmarked = this.onmarked//扫码成功
   barcode.onerror = this.onerror//扫码失败
   plus.webview.currentWebview().append(barcode);//必要的
  }
  barcode.start();
 }

从相册选择

 scanFromPic() {
  let that=this
  plus.gallery.pick(function (path) {
   plus.barcode.scan(path, that.onmarked, that.onerror);
  }, function (err) {
   alert('选择相片失败: ' + JSON.stringify(err.message));
  });
 }

五、报错

初次使用h5plus,若遇到plus is not defined ,不是代码的问题，是环境的问题，可以对eslintrc进行配置。详情可查看 https://www.cnblogs.com/biuo/p/15311918.html 。