Electron和React结合的一个小Demo

Electron初识

需求:甲提交材料,乙审核。重点:不能走线上(就是说不能有服务器数据库呗)
为啥会有这种需求呢,有这种需求,一般都少不了网信办大哥的要求。嘻嘻,网信办大哥厉害啊,又扩展了我的知识树。
那就来吧,作为一名非常喜欢摸鱼的前端开发人员,最后就找到了Electron这个东西,好像挺厉害的,不管了,先把需求demo做出来发给领导瞅瞅。


(下文我在废话自己的,怎样结合Electron和React的安装历程,如果大家不想看,直接跳到安装最后的GitHub地址下载就行~~)


安装

Electron官方文档
按着流程走了一遍先把他的demo跑起来再说~
okk,没问题~
这里说一个我没遇到的问题,官网有说建议node版本是最新的稳定版,虽然我的node版本不是最新的,但也是倒数第二新的了,建议大家nvm一下新版本,以防出现版本不兼容问题(最烦这种问题了!)

okk,因为我需要使用react,接下来就是把react加进来了

一、先自己试试
在Electron的小demo自己安装react,安完了,啊啊啊,不管用,乱试一通也没搞出来。Pass~~

二、看别人的经验
查别人怎么弄的
这个这个
他们是create react项目然后去加Electron依赖呀
跟着一顿操作,跑起来了,是可以的~~然后发现,打包打包,好麻烦好麻烦。(这里作者的打包方式我没有试)
我就试试官网的打包看看在这能用不,果然不出所料,不能
然后再找呀找~
发现这个
发现,这个和上文的好像呀,是个外国人写的~~
但是呀,这文章标题叫Building an Electron application with create-react-app
看这标题应该是可以打包的呀,看呀看呀~好像没有,也可能是我没看懂~
PASS~

三、直接Github
嗯,还是这个好,真厉害呀!!!
electron-react-boilerplate
okk~~一顿操作,跑起来了。
啥都不用管,开发打包还有一顿看不懂的命令,都全着嘞~~
完美结合electron+react,用的ts哦,问题不大,谁还不会个ts嘞。

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
Electron和React结合的一个小Demo_第1张图片
OKK~~,开始写demo喽


Demo

简单的逻辑:
甲:
1、输入文字、上传图片
2、导出文件,提交审核

PS:
1、图片上传的话不走线上就转成base64,或者把图片加到相对路径下一起打包,我这里选的base64
2、导出的文件选择的json格式
3、提交审核是手动把json文件发邮件发到乙那里还是直接在程序里直接发送,待定~

乙:
1、导入json格式,查看甲提交的资料
2、审核通过加入本地数据库(一个大的json文件里的数组)

OKK~~


上代码
不解释了,很简单的demo。(多安了两个依赖,一个antd,一个导入导出json文件的iojson)
甲:

import { useState } from 'react';
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import iojson from 'iojson';
import { Input,Button,message } from 'antd';
import './App.css';

const Hello = () => {
  const [text, setText] = useState('');
  const [imgbase64, setImgbase64] = useState('');

  // 本地图片转成base64
  const localImageToBase64 = ()=>{
    let reader = new FileReader();
    let AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
    //拿到上传的图片
    let file: null = document.getElementById('uploadimg').files[0];
    // 取消上传就退出
    if(!file){
      return
    }
    let files = file.name.split('.')
    let name = files[files.length - 1]
    let type = ['gif', 'png', 'jpg', 'svg', 'jpeg']
    //判断图片格式
    if (type.indexOf(name) === -1) {
        message.info(`不支持.${name}格式`)
        return
    }
    if (file) {
        //将文件以Data URL形式读入页面
        reader.readAsDataURL(file);
        reader.onload = function () {
            if (AllowImgFileSize < reader.result.length) {
                message.info('上传失败,请上传不大于2M的图片!');
                return;
            } else {
              setImgbase64(reader.result)
            }
        }
    }
  }
  // 导出json文件
  const produceJsonFile = ()=>{
    let exportJsonData = {
      text,
      imgbase64
    }
    iojson.exportJSON(exportJsonData, 'filename')
  }
  return (
    <div>
      <div className="Hello">
        <div>
          <span>请输入文字:</span>
          <Input placeholder="请输入上传文字" onChange={(e)=>{setText(e.target.value)}}/>
          <h1>{text}</h1>
        </div>
        <div>
          <span>请上传图片:</span>
          <input type="file" id="uploadimg" accept="image/png,image/gif,image/jpeg" onChange={localImageToBase64}/>
          <img src={imgbase64} alt="" id='myimg' width="300"/>
        </div>
        <Button type="primary" onClick={produceJsonFile}>Export</Button>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

乙:

import { useState } from 'react';
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import iojson from 'iojson';
import { Input,Button,message } from 'antd';
import './App.css';

const Hello = () => {
  const [data,setData] = useState()

  const importJsonFiel = ()=>{
    iojson.importJSON().then((data: any) => {
      setData(data)
    })
  }

  return (
    <div>
      <div className="Hello">
        {/* 导入文件 */}
        <div onClick={importJsonFiel} style={{cursor:'pointer'}}>导入文件</div>
        {
          data &&
          <>
            <div>{data.text}</div>
            <img src={data.imgbase64} alt="" width={300}/>
          </>
        }
      </div>
    </div>
  );
};
export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

OKK~~ 后续的开发再说了,不着急~

你可能感兴趣的:(React技术栈相关,react.js,electron,前端)