上传环境

.gitignore

@@ -76,6 +76,7 @@ web_modules/
 
 # Optional npm cache directory
 .npm
+.pnpm
 
 # Optional eslint cache
 .eslintcache

.hintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "development"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.exclude": {
+        "pages/pure-min.css": true
+    }
+}

main.js

@@ -0,0 +1,54 @@
+const {app, BrowserWindow, ipcMain} = require('electron')
+const path = require('path')
+const fs = require('fs')
+
+function writeFile(event, data){
+    console.log(data)
+    fs.writeFileSync('E:/hello.txt', data)
+}
+
+function readFile(){
+    const res = fs.readFileSync('E:/hello.txt').toString()
+    console.log('###', res)
+    return res 
+}
+
+//创建窗口函数
+function createWindow(){
+    //创建窗口
+    const win = new BrowserWindow({
+        //指定窗口大小
+        width: 1000,
+        height: 800,
+        //指定窗口位置
+        // x: 0, y: 0,
+        // alwaysOnTop: true,
+        //加载窗口选项
+        webPreferences:{
+            //预加载进程，必须传入绝对路径，所以使用path.resolve
+            preload:path.resolve(__dirname, './preload.js')
+        },
+        //隐藏菜单栏
+        autoHideMenuBar: true
+    })
+    ipcMain.on('file-save', writeFile)
+    ipcMain.handle('file-read', readFile)
+    //加载主页面
+    win.loadFile('./pages/index.html')
+}
+
+//启动调用
+app.on('ready', ()=>{
+    createWindow()
+    //针对mac用户的无窗口时继续运行，点击图标创建窗口有
+    app.on('activate', ()=>{
+        if (BrowserWindow.getAllWindows().length === 0) createWindow()
+    })
+    console.log('启动完毕')
+})
+
+//对于非mac用户，无窗口时立即退出程序。
+app.on('window-all-closed', ()=>{
+    if (process.platform !== 'darwin') app.quit()
+})
+

package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "electron_learn",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "electron_learn",
+      "version": "1.0.0",
+      "license": "ISC"
+    }
+  }
+}

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "electron_learn",
+  "version": "1.0.0",
+  "description": "electron learning",
+  "main": "main.js",
+  "scripts": {
+    "start-r": "chcp 65001 && nodemon --exec electron .",
+    "start": "chcp 65001 && electron .",
+    "build": "electron-builder"
+  },
+  "build": {
+    "appId": "top.awin-x.electron",
+    "win": {
+      "icon": "./icon.png",
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        },
+        "portable"
+      ]
+    },
+    "nsis": {
+      "oneClick": false,
+      "perMachine": true,
+      "allowToChangeInstallationDirectory": true
+    }
+  },
+  "keywords": [
+    "electron"
+  ],
+  "author": "awinx",
+  "license": "ISC",
+  "devDependencies": {
+    "builder-util": "^25.1.7",
+    "electron": "^33.0.1",
+    "electron-builder": "^25.1.8",
+    "nodemon": "^3.1.7"
+  }
+}

pages/index.css

@@ -0,0 +1,158 @@
+*, :after, :before {
+    box-sizing: inherit;
+}
+
+body {
+    background-color: #555;
+    font-family: BlenderProBook,sans-serif;
+    font-weight: 300;
+    margin: 0;
+    padding: 0;
+}
+
+.header{
+    position: relative;
+    background-color: #fbff31;
+    .header-content{
+        height: 500px;
+        .logo{
+            padding: 20px;
+            height: 70px;
+        }
+    }
+    :after{
+        clear: both;
+    }
+}
+
+.clp {
+    background: rgba(0, 0, 0, 0.6);
+    position: relative;
+    clip-path: polygon(15px 0,100% 0px,100% calc(100% - 15px),calc(100% - 15px) calc(100%),calc(100% - 15px) 2000%,0 2000%,0 15.3333333333px);
+}
+
+.menu{
+    display: flex;
+    position: fixed;
+    margin: 2px;
+    top: 20px;
+    right: 70px;
+    height:40px;
+    z-index: 10;
+}
+
+.menu:hover{
+    border: #3CF solid 2px;
+    margin: 0;
+}
+
+.menu-list {
+    padding: 0 10px 0 10px;
+    list-style: none;
+    align-items: center;
+    height: 100%;
+    line-height: 100%;
+    display: flex;
+    margin: 0;
+
+    .menu-item {
+        align-items: center;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        font-family: BlenderProBook,sans-serif;
+        font-size: 22px;
+        font-style: normal;
+        font-weight: 400;
+        height: 100%;
+        line-height: 100%;
+        position: relative;
+        text-transform: uppercase;
+        span{
+            align-items: center;
+            padding: 0 7px 0 7px;
+        }
+    }
+    .menu-item:hover{
+        background-color: #3CF;
+        .sub-menu{
+            float:left;
+            display: block;
+        }
+    }
+    .menu-sub::after {
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-top: 6px solid #fff;
+        content: "";
+        display: inline-block;
+        height: 6px;
+        margin-left: 6px;
+        position: relative;
+        width: 0px;
+    }
+    .sub-menu{
+        display: none;
+        background: rgba(255, 255, 255, 0);
+        position: absolute;
+        float: left;
+        left: 0px;
+        top: 40px;
+        :after{
+            clear: both;
+        }
+    }
+    .sub-menu-list{
+        list-style: none;
+        background: rgba(255, 255, 255, 0);
+        padding-left: 0;
+        .sub-menu-item{
+            padding: 5px 20px 5px 20px;
+            background: rgba(0, 0, 0, 0.6);
+            white-space: nowrap;
+            line-height: 100%;
+            height: 30px;
+        }
+        .sub-menu-item:hover{
+            background-color: #3CF;
+        }
+        li{
+            list-style: none;
+        }
+    }
+}
+
+a{
+    color: #fff;
+    text-decoration: none;
+}
+
+.header-title{
+    position: absolute;
+    top: 130px;
+    left: 100px;
+    h1{
+        font-size: 4em;
+        margin: 10px;
+    }
+    h2{
+        color: grey;
+        font-size: 1em;
+        margin: 5px;
+    }
+    .author{
+        font-size: 1em;
+        color: grey;
+    }
+}
+
+hr{
+    background-color: black;
+    height: 2px;
+}
+
+.header-img{
+    position: absolute;
+    top: 80px;
+    right: 10%;
+}

pages/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>赛博高考网</title>
+        <link rel="stylesheet" href="./index.css"/>
+        <!-- <link rel="stylesheet" href="http://cdn.staticfile.org/pure/1.0.0/pure-min.css"/> -->
+        <!-- <link rel="stylesheet" href="./pure-min.css"> -->
+        <meta
+            http-equiv="Content-Security-Policy"
+            content="default-src 'self' *.awin-x.top;style-src 'self' *.awin-x.top; img-src *;script-src 'self'" />
+    </head>
+    <body>
+        <div class="header">
+            <div class="clp menu">
+                <ul class="menu-list">
+                    <li class="menu-item">
+                        <span class="menu-sub">在线题库</span>
+                        <div class="sub-menu">
+                            <ul class="sub-menu-list">
+                                <a href="#"><li class="sub-menu-item clp">模拟考试</li></a>
+                                <a href="#"><li class="sub-menu-item clp">历年真题</li></a>
+                                <a href="#"><li class="sub-menu-item clp">贡献题目</li></a>
+                            </ul>
+                        </div>
+                    </li>
+                </ul>
+                <ul class="menu-list">
+                    <li class="menu-item">
+                        <span>考试资讯</span>
+                    </li>
+                </ul>
+                <ul class="menu-list">
+                    <li class="menu-item">
+                        <span><a href="#">登录/注册</a></span>
+                    </li>
+                </ul>
+            </div>
+            <div class="header-content">
+                <a href="/"><img class="logo" src="./images/logo.png" alt="赛博高考网"></a>
+                <div class="header-title">
+                    <h1>赛博高考网</h1>
+                    <hr>
+                    <h2>new！已完全从旧网迁移！</h2>
+                    <br><br><br>
+                    <div class="author">created by 妄想创造 X awin-x</div>
+                </div>
+                
+                <div class="header-img"><img src="./images/wxcz.png" alt="妄想创造"></div>
+            </div>
+        </div>
+        
+        <h1>你好,Awin-x!!</h1>
+        <button id="click_me">点我</button>
+        <br><br><br>
+        <hr>
+        <label for="content">写入内容</label>
+        <input type="text" id="content">
+        <button id="create">向文件写入</button>
+        <br><br><br>
+        <hr>
+        <button id="read">读取文件内容</button>
+    </body>
+    <script src="./render.js"></script>
+</html>

pages/render.js

@@ -0,0 +1,15 @@
+const click_me = document.getElementById('click_me')
+const btn_create = document.getElementById('create')
+const btn_read = document.getElementById('read')
+const content = document.getElementById('content')
+click_me.onclick = () => {
+    alert("按钮被点击！\nnode version:"+env_info.nodev)
+}
+btn_create.onclick = () => {
+    myAPI.saveFile(content.value)
+}
+btn_read.onclick = async () => {
+    let data = await myAPI.readFile()
+    alert(data)
+}
+console.log(window)

preload.js

@@ -0,0 +1,15 @@
+console.log('预加载进程启动,node:', process.version)
+const {contextBridge, ipcRenderer} = require('electron')
+
+contextBridge.exposeInMainWorld('env_info', {
+    nodev: process.versions.node,
+    electronv: process.versions.electron
+})
+contextBridge.exposeInMainWorld('myAPI',{
+    saveFile: (data)=>{
+        ipcRenderer.send('file-save', data)
+    },
+    readFile(){
+        return ipcRenderer.invoke('file-read')
+    }
+})