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

 

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

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

第一步：创建项目

npm install -g electron-forge

electron-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"
      }
    ]
}

 

 

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

electron-builder electron-packager 都可以打包 但electron-builder 支持自动更新并且配置更加强大。这里electron-updater实现自动更新程序；

nsis配置安装程序

  配置：

"appId": "com.xy.his",
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://192.168.3.145"
      }
    ],

 

服务端试用本地nginx

 只要生成的latest.yml 文件中 version: 1.0.1版本号大于安装版会自动触发更新

 程序示例下载 https://download.csdn.net/download/ucicno000/13206890