纯vue 获取usb串口，实现电子秤的对接

说明：解决生产上过秤重量手动输入出错问题

效果图：

 一：代码部分

        1、创建一个名字为seriaport.js文件（随便定义，为下面页面引入使用）

        

 
export default class MySerialPort  {
  constructor() {
    this.state = {
      portIndex: undefined,
      ports: [],
      isOpen: false,
      writeType: 1,
      readType: 1,
      isScroll: true,
      readValue: [],
      status:false,
      //port参数
      baudRate: "9600",
      dataBits: "8",
      stopBits: "1",
      parity: "none",
      flowControl: "none",
    };
    this.keepReading=false;
    this.getPorts = this.getPorts.bind(this);
    this.handleRequestPort = this.handleRequestPort.bind(this);
    this.handleChildrenChange = this.handleChildrenChange.bind(this);
    this.readText = this.readText.bind(this);
    this.writeText = this.writeText.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.a2hex = this.a2hex.bind(this);
    this.hex2a = this.hex2a.bind(this);
    this.hex2atostr=this.hex2atostr.bind(this);
    this.reader={};
    this.closed;
  }
 
  async getPorts() {
    // 获取已授权的全部串口
    let ports = await navigator.serial.getPorts();
    this.setState({
      ports,
    });
  }
  async handleRequestPort() {
    // 请求授权
    try {
      await navigator.serial.requestPort();
      await this.getPorts();
    } catch (e) {
      this.$message.error(e.toString());
    }
  }
  async openPort(portIndex, isOpen,callBack=null) {
    // 打开串口
    let port = this.state.ports[portIndex];
    if (!isOpen) {
      // 关闭串口
      this.keepReading = false;
      this.reader.cancel();
      await this.closed;
      this.handlePortOpen({
        portIndex,
        isOpen,
      });
    } else {
      await port.open({
        baudRate: this.state.baudRate,
        dataBits: this.state.dataBits,
        stopBits: this.state.stopBits,
        parity: this.state.parity,
        flowControl: this.state.flowControl,
      });
      this.handlePortOpen({
        portIndex,
        isOpen,
      });
      this.keepReading = true;
      this.closed=this.readUntilClosed(portIndex,callBack);
    }
  }
  async readUntilClosed(portIndex,callBack=null) {
    let port = this.state.ports[portIndex];
    while (port.readable && this.keepReading) {
      this.reader = port.readable.getReader();
      try {
        let readCache=[]
        while (true) {
          const { value, done } = await this.reader.read();
          if (done) {
            break;
          }
          readCache.push(...value)
          setTimeout(() => {
          if(readCache.length>0){
            this.readText(readCache);
            callBack(readCache)
            readCache=[]
          }
          }, 300);//串口缓存
        }
      } catch (error) {
        this.$message.error(error.toString());
      } finally {
        this.reader.releaseLock();
      }
      await port.close();
    }
  }
  handlePortOpen({ portIndex, isOpen }) {
    // 处理打开串口
    this.setState({
      portIndex,
      isOpen,
    });
  }
  handleChildrenChange(type, value) {
    this.setState({
      [type]: value,
    });
  }
  portWrite(value) {
    return new Promise(async (resolve, reject) => {
      if (!this.state.isOpen) {
        this.$message.error("串口未打开");
        reject();
        return;
      } else {
        let port = this.state.ports[this.state.portIndex];
        const writer = port.writable.getWriter();
        await writer.write(new Uint8Array(value));
        writer.releaseLock();
        resolve(value);
      }
    });
  }
  readText(value) {
    // console.log(value, "读取");
    let newValue = this.state.readValue.concat({
      value,
      type: 1,
    });
    this.setState({
      readValue: newValue,
    });
  }
  writeText(value) {
    // console.log(value, "写入");
    this.portWrite(value).then((res) => {
      let newValue = this.state.readValue.concat({
        value: res,
        type: 1,
      });
      this.setState({
        readValue: newValue,
      });
    });
  }
  handleClear() {
    this.setState({
      readValue: [],
    });
  }
  componentDidMount() {
    this.getPorts();
  }
  handleState(status) {
    this.setState({
      status,
    });
  }
  setState(obj){
    Object.keys(this.state).forEach(key => {
           if(obj[key]!=undefined){
            this.state[key]=obj[key]
           }
      });
  }
  //字节转字符串
  hex2atostr (arr) {
  
    return String.fromCharCode.apply(String, arr);
 
  }
   hex2a(hexx) {
    return String.fromCharCode(hexx);
  }
  //字符转16进制
 a2hex(str) {
    return str.charCodeAt(0);
}
}

        2、创建一个为usb.json 文件（随便定义，为下面页面引入使用）

        文件过大，下载地址（因为大部分是参考这位大佬的，一部分是按照自己的需求进行更改的ZhangY1217的博客_CSDN博客-java,c#,java23种设计模式领域博主）

文件下载链接：https://download.csdn.net/download/ZhangY1217/86662302

3、页面代码部分

//js部分

注： ScalesFrom 后期我在更新上去

4、这个搭建只适合（只支持本机访问和https的，你这个要弄nginx和自己生成证书来用https的才能访问）但是可以通过别的方式解决本地服务器，使用一个局域网访问的需求（解决方法5）

5、解决谷歌服务器安全机制（因为谷歌浏览器有安全机制，我们是http访问，而不是https，https不会有这种问题）

解决方案：

1、谷歌浏览器访问：chrome://flags/#unsafely-treat-insecure-origin-as-secure

设置为Enabled  ---一定点击下面Relaunch

 2、打开电脑终端：

chrome（为你自己安装路径) --unsafely-treat-insecure-origin-as-secure=http://192.168.0.99（http://192.168.0.99 这个是我们服务地址，改为你自己的）

我的地址是（"C:\Program Files (x86)\Chromiumbrowser\Chromium.exe"）则是"C:\Program Files (x86)\Chromiumbrowser\Chromium.exe"  --unsafely-treat-insecure-origin-as-secure=http://192.168.0.99
图片：

 设置成功之后图片：（这个X号不能删除，否则会清空，我自己电脑试过几次会清空）

问题图片：

注：有问题私信留言