BitShares-UI 项目启动与配置教程

1. 项目目录结构及介绍

bitshares-ui 是一个基于石墨烯区块链技术的去中心化交易平台的前端用户界面。项目的目录结构如下：

• bitshares-ui 根目录
  • app 应用程序主目录，包含前端代码和逻辑
  • config 配置文件目录
  • scripts 脚本目录，包括启动、构建等脚本
  • translations 翻译文件目录，包含多语言支持
  • test 测试目录
  • node_modules 依赖模块目录
  • package.json 项目配置文件
  • README.md 项目说明文件
  • LICENSE 项目许可文件

2. 项目的启动文件介绍

项目的启动主要通过 scripts 目录下的 start.js 脚本进行。以下是 start.js 脚本的主要内容：

// 引入必要的模块
const { app, BrowserWindow } = require('electron');
const path = require('path');

// 创建一个新的浏览器窗口
function createWindow() {
  // 创建一个浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

  // 并且为你的应用加载index.html
  win.loadFile('app/index.html');

  // 打开开发者工具
  win.webContents.openDevTools();
}

// 当 Electron 完成初始化并准备创建浏览器窗口时，调用此方法
app.whenReady().then(createWindow);

// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

该脚本负责创建一个电子应用窗口，并加载 app/index.html 作为主页面。

3. 项目的配置文件介绍

项目的配置文件位于 config 目录下，主要包括以下几个配置文件：

• config.json：包含项目的基本配置信息，如API端点、链标识符等。
• webpack.config.js：Webpack 打包配置文件，用于配置前端资源的打包方式。
• electron-builder.json：用于配置电子构建过程，如打包格式、图标、版本等。

以下是 config.json 的一个示例：

{
  "api endpoints": [
    "https://api.bitshares.org",
    "https://api.bitshares.btsabc.org"
  ],
  "chain_id": "e0da2cd4d3a0f109f6702e176f2e4e2ab98e1a heights 2000000",
  "networks": {
    "BitShares Mainnet": {
      "chain_id": "e0da2cd4d3a0f109f6702e176f2e4e2ab98e1a heights 2000000",
      "core_symbol": "BTS",
      "endpoint": "https://api.bitshares.org"
    },
    "BitShares Testnet": {
      "chain_id": "c0d7e9c3d956f4784c7c79d26(fd9f8c2) heights 0",
      "core_symbol": "BTS",
      "endpoint": "https://testnet.bitshares.eu"
    }
  }
}

这个配置文件定义了 BitShares UI 应用程序可以连接到的 API 端点，以及主网和测试网的链标识符和其他配置。