BrowserWindow网页显示文本内容:
In Chrome, you can display inline html pages by navigating URL with data: protocol such as

data:text/html;charset=utf-8,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MyYTitle</title> <style type="text/css"> </style></head> <body>Hello world from Lyon, FR</body>

It works the same in Electron. Can you try opening a window with

loadURL('data:text/html;charset=utf-8,<YOUR HTML/>');

~/work/2023/go_all_2023/bin/go_display 192.168.4.202 "data:text/html;charset=utf-8,<h1>Hello World</h1>"

~/work/2023/go_all_2023/bin/go_display 192.168.4.202 "data:text/html;charset=utf-8,<head><style>html, body {height: 100%;margin: 0;padding: 0;width: 100%;font-family: 宋体;font-size: 100px;color: green;font-weight: bold;}body{display: table;}.my-block {text-align: center;display: table-cell;vertical-align: middle;}</style></head><body><div class='my-block'>Hello World</div></body></html>"

判断错误的代码与类型

server.on('error', function (error) {
        write_log('Error1: ' + error);
        write_log('error.code' + error.code)
        write_log('error.message' + error.message)
        server.close();
        if (error.code == EADDRINUSE)
            app.quit();
    });

新建一个electron项目
首先安装yarn

sudo apt update && sudo apt install libfuse2 curl gnupg
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

手动下载node并链接

wget https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-arm64.tar.gz -O /opt/node.tar.gz
tar xvf /opt/node.tar.gz -C/opt
ln -s /opt/node/bin/node /usr/bin/node
ln -s /opt/node/bin/npm /usr/bin/npm

mkdir first-app && cd first-app

新建一个package.json文件,内容如下, 这个文件的内容,可以根据你自己的需要来修改:

cat package.json 
{
  "name": "first-app",
  "version": "1.0.0",
  "description": "my first app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dist": "electron-builder --linux appImage"
  },
  "author": "hesy <pzhy@qq.com>",
  "license": "ISC",
  "devDependencies": {
    "electron": "^29.1.5",
    "electron-builder": "^24.13.3"
  },
  "build": {
    "appId": "const.net.cn",
    "appImage": {
      "category": "Utility"
    },
    "executableName": "firstapp"
  }
}

还要新建一个index.js文件,内容如下:

cat index.js
const { app, BrowserWindow } = require('electron')

function createWindow() {
  udplib.write_log("program start.")
  var win = new BrowserWindow({
    width: 1920,
    height: 1080,
    titleBarStyle: 'hidden',
    frame: false,
    show: false,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    }
  })

  win.loadURL('https://const.net.cn')
  win.show()
  //隐藏滚动条
  win.webContents.executeJavaScript(`
  let style = document.createElement('style');
  style.innerHTML = '::-webkit-scrollbar { display: none; }';
  document.head.appendChild(style);
`);

}

app.whenReady().then(createWindow)

可选命令,优化下载速度,不要用淘宝的了,淘宝的不能用了.
　　yarn config set registry https://registry.npmmirror.com -g
　　yarn config set electron_mirror https://npmmirror.com/mirrors/electron/ -g
接下来执行安装electron-builder命令

yarn add electron-builder --dev

成功后,就可以使用

yarn dist 生成可执行程序了.

/opt/first-app# yarn dist
yarn run v1.22.19
$ electron-builder --linux appImage
  • electron-builder  version=24.13.3 os=4.19.219
  • loaded configuration  file=package.json ("build" field)
  • writing effective config  file=dist/builder-effective-config.yaml
  • packaging       platform=linux arch=arm64 electron=29.1.5 appOutDir=dist/linux-arm64-unpacked
  • building        target=AppImage arch=arm64 file=dist/first-app-1.0.0-arm64.AppImage
  • default Electron icon is used  reason=application icon is not set
Done in 65.60s.

接下来就简单了,直接执行可执行文件就好了.

./dist/first-app-1.0.0-arm64.AppImage --no-sandbox

如果提示缺少了什么动态库,apt install 安装上就可以了.

本文链接地址：https://const.net.cn/789.html

标签: none

添加新评论