使用electron编写一个简单的python文档APP

使用electron编写一个简单的python文档APP

由于每次查文档都要打开浏览器还要收藏，特别麻烦，就想着如果有这么一个APP就好了，偶然的一次发现了electron这个桌面框架，就想着看能不能实现。经过一翻思考发现挻简单的，大概路线是这样的：程序加载 --> 创建窗口 --> 加载URL

首先创建并初始化工程项目：docapp (我的叫这个名字）

mkdir docapp
cd docapp
npm init

这样一个工程目录就创建好了，主要的是里面的package.json文件
将 “scripts" 中的 start 命令改为 electron .

然后新建 main.js 文件 这个是项目入口文件，只行代码就可以了

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

function createWindow() {
  // 创建浏览器容器
  let win = new BrowserWindow({
    width: 1200,
    height: 960,
    webPreferences: {
      nodeIntegration: true
    }
  })
  if (process.platform === 'darwin') {
    app.dock.setIcon(path.join(__dirname, 'timg.png'))
  }
  // 加载 目标URL 
  win.loadURL('https://docs.python.org/zh-cn/3/index.html')
}

app.whenReady().then(createWindow)

// 程序关闭事件
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
// 程序打开事件
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

这个时候 运行 npm start 程序就可以跑起来了
剩下的就是打包程序了，安装 electron-builder 打包工具 修改 package.json 文件 增加 build 命令项

{
  "name": "dosapp",
  "version": "1.0.0",
  "description": "各语言文档",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-builder --mac"
  },
  "build": {
    "productName": "Python 3.8 文档",
    "appId": "org.andy.py",
    "directories": {
      "output": "build"
    },
    "files": [
      "./*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "./timg.png"
    }
  },
  
  "author": "Andy",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3",
    "electron-builder": "^22.4.1",
  }
}

然后打包就OK了，初次打包可能需要科学上网，有一个系统包要下载，我下载了好多次才成功

npm run build