当前位置: 代码迷 >> 综合 >> 一招解决BS转CS模式:浏览终端开发-Electron集成打包、本地配置文件及自动更新
  详细解决方案

一招解决BS转CS模式:浏览终端开发-Electron集成打包、本地配置文件及自动更新

热度:2   发布时间:2024-03-09 09:18:47.0

 

   将普通的网页转换为桌面应用并兼容现在的H5,基本的思路都是打包封装谷歌公司的开源版Chromium 使其充当与本地应用通讯的媒介;

   成本比较低的是electron  CefShap(C#)  至于blink /cef/ wke 等 如果专业做浏览器开发可以尝试涉猎(360浏览器内核是blink);

第一步:创建项目

npm install -g electron-forgeelectron-forge init xxx-terminal

 

第二步:设置图标

 

  通过PS制作ico图标

 需要安装插件icoformat

 添加打包组件

yarn add electron-builder

  添加配置

 

"build": {"appId": "com.xy.his","win": {"icon": "build/icons/icon.ico"},
}

 

 

第三步:设置本地配置文件

        为了灵活设置浏览终端信息,可以将一些放入到一个本地文件中如更新服务器地址,是否打开开发者工具,浏览地址等        

var fs = require('fs');// 开发时读取data目录 打包时读resources/data目录let readText = fs.readFileSync("./resources/data/config.json");let data = JSON.parse(readText);return data;

这里要注意的是目录,打包后config.json文件不会跟随文件压缩过去需要指定配置,但配置后运行的目录会在resources下

package.json

"build": {..."extraResources": [{"from": "./data","to": "data"}]
}

 

 

第四步:自动更新及服务端搭建

 

 

 

 

第五步:测试安装