# 致信客开开发环境说明

# 一、致信客户端分两部分(VUE 和 ELectron):

安装在电脑上的客户端壳,基于Electron开发,可以理解它是一个浏览器。 与操作系统交互的逻辑,都写在Electron项目中,比如数据库操作、文件读写、 截图、开机自动启动、窗口抖动,操作剪贴板之类的。 放在A8服务器上的web页面,基于VUE.js开发,可以理解成为一个网页页面。 致信客户端的用户界面,是一个网页,存放在协同服务器中。但必须由Electron项目中的浏 览器来加载这个页面,因为其中一部分操作数据库、本地文件等等方法,都必须调用Electron暴露的方法,否则报错。

# 二、致信客户端架构:

1709115722500.png

# 三、致信客户端启动的原理

  1. 用户打开致信客户端(实际为内嵌chrome浏览器的程序)
  2. 致信客户端加载协同服务器地址配置页面(本地安装目录中的一个html页面)
  3. 用户配置完成地址后,加载该地址服务器中的vue项目页面(协同服务器中的一个html页面)
  4. 加载完成,致信打开成功。(配置地址保存到本地,供下次直接加载)

# VUE项目

# 1. 开发环境

npm install
npm run dev(会启动一个本地服务:<ins><https://localhost:8888></ins>) npm run http(会启动一个本地服务:<ins><https://localhost:8888></ins>)

1709116175651.png

# 2.打包发布

npm run build(会生成一个名为dist2的文件夹)

1709116295757.png Electron壳

开发环境搭建

  • 执行 npm install
  • 客户端依赖sqlite3,使用npm install安装会失败,按照下面<sqlite3安装>操作,安装sqlite3
  • 执行 npm run http (会启动程序并加载 http://localhost:8080 页面) 执行 npm run dev (会启动程序并加载 https://localhost:8888 页面)
  • sqlite3安装 -- mac版本 --
1、cd node_modules/sqlite3
2、删除node-modules
3、npm install
4、node-gyp configure --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.8-darwin-x64
5、node-gyp rebuild --target=1.8.7 --arch=x64 --target_platform=darwin --dist-url=https://atom.io/ download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.8- darwin-x64

-- windows 版本 -- 32

1、cd node_modules/sqlite3
2、删除node-modules
3、npm install
4、node- gyp configure --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.8-darwin- x86 5、node-gyp rebuild --target=1.8.7 --target_platform=win32 --dist-url=https://atom.io/downlo ad/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.8-win32-ia32

-- windows 版本--64

1、cd node_modules/sqlite3
2、删除node-modules
3、npm install
4、node-gyp configure -- module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.8-darwin-x64 5、node-gyp rebuild --target=1.8.7 --arch=x64 --target_platform=win64 --dist-url=https://atom.io/download/ele ctron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.8-win32-x64
打包 -- OS X (需要在MAC的开发模式下打包)
(1)、npm run package:win
(2)、npm run installer:win

-- Windows7+ --

1、npm run package:win

# 一、使用inno setup打包安装包制作目录

1709117069014.png

  1. app:致信程序文件目录,需要更换致信程序内的图片文件在这个目录中
  2. assistant:致信相关辅助程序文件目录,无需关注
  3. output:安装包程序文件的生成目录,最终的zxsetup.exe生成在这里
  4. req:桌面图标和相关运行时文件目录,需要更换桌面图标需替换app.ico
  5. tmp:安装包所需的图片文件目录,无需关注
  6. dll.iss和zhixin.iss:安装包制作脚本文件

# 二、存放致信可执行程序

  1. 在本地或其它终端找到致信的安装目录,通常可通过桌面快捷方式快速定位,如图 1709117146141.png
  2. 将安装目录(如上图)中的所有文件夹和文件拷贝到安装包制作目录ZhiXinPackage\app下 1709117155957.png

# 三、替换图片文件

  1. 进入到app目录,找到resources\app\assets\img,替换需要更换的图片 1709117201469.png
  2. 进入到app目录,找到resources\app\res,替换需要更换的图片 1709117211062.png
  3. 进入req目录,替换app.ico来更换桌面快捷方式图标 1709117216740.png

# 四、生成安装包

  1. 打开Inno Setup5目录中的Compil32.exe 1709117271173.png
  2. 在Compil32.exe中打开zhixin.iss,也可直接将zhixin.iss拖拽到Compil32.exe窗口中 1709117277783.png
  3. 编译安装脚本 1709117284216.png 1709117294924.png
  4. 生成安装包文件 1709117300324.png
    创建人:wangywyf
    修改人:duxf