（简单记录）从零实现一个exe应用程序

从零实现一个exe应用程序

功能：实现看（爱奇艺、腾讯视频等）视频

electron

• addEventListener => DOMContentLoaded
• addEventListener => resize
• 解析地址：https://jx.aidouer.net/?url= +url

1、安装nvm

1.1 配置nvm

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

1.2 配置node

2、安装git

3、安装vscode

4、安装框架

npm init

4.1 npm镜像源配置

electron_mirror=https://npm.taobao.org/mirrors/electron/
msvs_version=2015
registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
ENTRYCLI_CDNURL = https://cdn.npm.taobao.org/dist/sentry-cli
sentrycli_cdnurl = https://cdn.npm.taobao.org/dist/sentry-cli

4.2 初始化

4.3 代码

index.html

window.addEventListener("resize",function(){
    setHeight()
})
function setHeight(){
    const myiframe = document.getElementById("myiframe")
    myiframe.setAttribute("height",document.documentElement.clientHeight -30)
}
//   https://v.qq.com/x/cover/mzc00200mjy32e7.html
window.addEventListener("DOMContentLoaded",()=>{
    const myinput = document.getElementById("myinput")
    const load = document.getElementById("load")
    const Resolution = document.getElementById("Resolution")
    const myiframe =document.getElementById("myiframe")
    load.addEventListener("click",()=>{
        myiframe.setAttribute("src",myinput.value)
    })
    Resolution.addEventListener("click",()=>{
        // 解析处理函数
        let url = "https://jx.aidouer.net/?url="
        url = url + myinput.value
        console.log(url)
        myiframe.setAttribute("src",url)
    })
})

index.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
    const win = new BrowserWindow({
      width: 1000,
      height: 800,
      webPreferences:{
        preload: path.join(__dirname, 'preload.js')
      }
    })
  
    win.loadFile('index.html')
    win.show()
  }

  app.whenReady().then(() => {
    createWindow()
  
    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })

  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

preload.js

window.addEventListener("resize",function(){
    setHeight()
})
function setHeight(){
    const myiframe = document.getElementById("myiframe")
    myiframe.setAttribute("height",document.documentElement.clientHeight -30)
}
//   https://v.qq.com/x/cover/mzc00200mjy32e7.html
window.addEventListener("DOMContentLoaded",()=>{
    const myinput = document.getElementById("myinput")
    const load = document.getElementById("load")
    const Resolution = document.getElementById("Resolution")
    const myiframe =document.getElementById("myiframe")
    load.addEventListener("click",()=>{
        myiframe.setAttribute("src",myinput.value)
    })
    Resolution.addEventListener("click",()=>{
        // 解析处理函数
        let url = "https://jx.aidouer.net/?url="
        url = url + myinput.value
        console.log(url)
        myiframe.setAttribute("src",url)
    })
})

package.json

{
  "name": "app_vip",
  "version": "1.0.0",
  "description": "myapp",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start",
    "test": "echo \"Error: no test specified\" && exit 1",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "elder",
  "license": "MIT",
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.1",
    "@electron-forge/maker-deb": "^6.0.1",
    "@electron-forge/maker-rpm": "^6.0.1",
    "@electron-forge/maker-squirrel": "^6.0.1",
    "@electron-forge/maker-zip": "^6.0.1",
    "electron": "^21.2.3"
  }
}

4.4 打包

npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make

5、结果