跑通 Windows Electron Demo

本小节描述如何快速编译并运行客户端SDK的Windows Electron Demo。

环境要求

在Windows Electron Demo的运行过程中请满足如下环境要求。

表4-7 环境要求

环境和工具名称 版本要求 说明

操作系统 Windows 10专业版 硬件要求：

● CPU：i5-2400四核 3.1GHz及以上。

● 内存：4GB及以上。

Electron 10.1.3及以上 NA

Microsoft Visual Studio Visual Studio 2017 可选，仅在需要重新编译 Demo中的C++代码时才需 要

测试资源及App ID申请 NA 请参见“开发前准备”。

操作步骤

步骤1 下载SDK和Demo源码

1. 按照“SDK下载”章节，下载Electron

Demo的ZIP包（如“hwm-electron-demo-src-70.7.5.zip”）。

2. 解压Electron Demo ZIP包，得到如下文件及目录。

图4-23 Electron Demo ZIP 包的目录结构

说明

– “C++代码目录”下的是接口转换通道的C++源代码。源代码编译后的生成了32位和64 位动态库文件“JsAdapter.dll”分别是“UISDKJsAdapter\build-2017\Win32\Release

\JsAdapter.dll”和“UISDKJsAdapter\build-2017\x64\Release\JsAdapter.dll”。

Demo中直接使用了这个动态库文件。

– hwm-electron-demo\src\AppService\是接口转换通道的JavaScript代码。当前已经提 供的接口请参考“表7-156”。如果这部分接口能满足第三方应用的要求，您可以直接 使用。如果Windows SDK已经提了接口，但是AppService中没有这部分接口，您可以 参考“7.8.3 增加新接口指导(可选)”自己增加新的接口，并重新编译

UISDKJsAdapter。

步骤2 拷贝Windows SDK文件

注意

1. 如果已经安装node，请先确定自己node版本是32位还是64位，可以执行cmd/shell 命令查看node版本的位数，结果：x64为64位， ia32为32位。

$ node -p "process.arch"

2. 如果没有安装node，可到nodejs官网下载对应版本。

● 如果node版本是32位，执行步骤1中解压目录下的copy_win32_depend_dll.bat

● 如果node版本是64位，执行步骤1中解压目录下的copy_x64_depend_dll.bat bat脚本会将对应位数的JsAdapter.dll文件、hwm_sdk_agent.dll文件、HwmSdk.exe文 件（x64独有）、HwmSdk文件夹内的dll文件和资源文件拷贝到“hwm-electron-demo\resources\HwmSdk\”目录下

图4-24 执行脚本拷贝 dll 文件

步骤3 环境准备

1. 如确认node已经安装，请先配置npm镜像

安装依赖前先配置npm镜像，以提高安装速度，执行以下命令：

npm config set registry http://registry.npm.taobao.org/

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

2. 因为安装 ffi-napi 依赖的时候，需要有编译环境，否则会因为无法编译而报错。

● Python 2.7

● visual C++ Build Tools

● .net framework 4.5.1

如已安装了以上环境，则忽略以下流程，直接看步骤4 安装依赖。

3. 以管理员身份运行cmd，否则会提示权限不足执行 npm install –global windows-build-tools；

以上命令行会自动把python和c++开发工具包都集成进去。

python系统环境变量需要自行配置 图4-25 安装 windows-build-tools

步骤4 安装依赖

1. 执行npm install -g node-gyp

2. 在"hwm-electron-demo\"下执行"npm install"。(安装项目依赖的 node_modules)

3. 在"hwm-electron-demo\"下执行"npm install -S ffi-napi"。（安装ffi-napi依赖 时，会自动使用node-gyp进行编译）

4. 在"hwm-electron-demo\"下执行"npm install -S ref-napi"。

5. 在"hwm-electron-demo\"下执行"npm install -S ref-array-napi ref-struct-napi"。

步骤5 启动react项目

1. 打开“hwm-electron-demo\main.js”

取消“win.loadURL('http://localhost:3000'”的注释， 然后注释掉

“win.loadFile(path.join(__dirname, './index.html'))”

结果如下：

win.loadURL('http://localhost:3000')

// win.loadFile(path.join(__dirname, './build/index.html')) // win.loadFile(path.join(__dirname, './index.html'))

2. 在“hwm-electron-demo\”下执行"npm run start"。

图4-26 启动 react 项目

说明

浏览器中的“TypeError: Cannot read property 'remote' of undefined”错误提示不用管。

步骤6 启动Electron项目

另外启动一个命令行Shell，在“hwm-electron-demo\”执行“npm run auto”。

图4-27 Electron Demo 主界面

步骤7 使用Electron Demo

● 点击“Init”初始化SDK。（如果是32位，ExePath不用填）

图4-28 初始化 SDK

说明

ExePath是Windows SDK的HwmSdk所在的路径，以步骤2的示例为例路径则是：“D:\hwm-electron-demo-src-70.7.5\hwm-electron-demo\resources\app\resources\”。（千万不要少了 最后的反斜杠\）

图4-29 登录

图4-30 创建会议

----结束