[如意玲珑生态指南] 应用构建教程(6) openKylin 2.0 + Electron

在 openKylin 2.0 上构建玲珑应用

原文转自：https://bbs.deepin.org/post/278740

作者：Ziggy

---

Electron应用玲珑化转制

 在完成前面tar归档格式应用玲珑化转制演示之后,我们即将开始展示Electron应用玲珑化转制的效果。我们这里选取一款 Electron based的应用 思源笔记,为了保障高度的规范化和为以后可能的自动化预留发展空间,我这边后面演示的项目均具备规范性特征，包括但不限于:目录规范性、构建流程规范性等。
 * 该案例中的 思源笔记由于使用了tar归档格式进行封装，因此部分知识点会与前一部分重合。

材料要求

 因此,本次案例中将会用到以下文件:

1. Electron based应用 思源笔记二进制文件对应的tar归档压缩包
2. 需要转换的Electron based应用 思源笔记图标文件
3. 需要转换的Electron based应用 思源笔记desktop文件

 可以看到，我们该案例中包含了一个tar归档压缩包，内容均为二进制程序文件。

Electron based应用 辨识

 在此之前，你需要确认你即将构建、封装的应用是否为Electron based应用，否则将不适用于该案例。一般Electron based应用会有这几样特征:

1. 应用构建时需要用到electron-builder或Node.js、npm等
2. 应用构建为二进制程序时，同级目录下一般会存在 chrome-sandbox或其他sandbox文件

准备工作

 由于玲珑构建工具内对于tar归档压缩包解压功能仍存在，因此我这里建议在项目build之前提前将压缩包解压到项目内并准备好其他的材料
 为了节省时间,我这里已经将上述文件准备完毕、压缩包也一并解压完成，给大家展示几个重要目录的结构

构建目录结构:

ziggy@kylin-standardpc:~/linglong-build/siyuan$ tree -L 1
.
├── binary
├── linglong.yaml
├── template_app

图标、desktop文件资源目录结构(template_app):

template_app/
├── applications
│   └── com.siyuan.deepin.linyaps.desktop
└── icons
    └── hicolor
        ├── 512x512
        │   ├── apps
                └── siyuan.png

 在整个过程中，我们需要重点关注两个需要改动的文件:

desktop文件。

 Exec字段必须匹配玲珑项目构建后的路径、应用id、执行命令一致，执行命令与下文提及的 yaml配置文件中的 command值保持一致。

案例yaml配置文件中的 command值:

command:
  - /opt/apps/com.siyuan.deepin.linyaps/files/bin/start.sh

 Icon字段考虑到目前在不同发行版上存在兼容性差异，因此这里建议直接填写 绝对路径否则有可能不显示图标

可供参考的目录路径:

## desktop应用启动文件Exec
Exec=/opt/apps/$id/$version/files/bin/start.sh

## 应用Icon目录
Icon=/var/lib/linglong/layers/main/$id/$version/x86_64/binary/entries/share/icons/hicolor

需要注意的两个点:

1. 一般情况下hicolor目录下存放了不同尺寸的图标文件,建议在选择合适的尺寸后在desktop应用启动文件的Icon字段中填入具体图标文件的路径
2. 此处的 $id代指玲珑应用的id,$version代指玲珑应用的已安装版本号,需要填写具体的实际值

desktop文件成品演示:

[Desktop Entry]
Name=SiYuan
Name[zh_CN]=思源笔记
Type=Application
Exec=/opt/apps/com.siyuan.deepin.linyaps/files/bin/start.sh %U
Icon=siyuan
#Icon=com.siyuan.deepin
Comment=Fuse blocks, outlines, and bidirectional links to build your eternal digital garden.
Comment[zh_CN]=融合块、大纲和双向链接，构建你永恒的数字花园。
Terminal=false
StartupNotify=true
Categories=Office;
Keywords=markdown;editor;note;encrypt;
Keywords[zh_CN]=markdown;editor;note;encrypt;编辑器;笔记;加密;

yaml配置文件。

 目前我共享给大家的是模块化改造之后的文件,大家主要修改以下变量内容以及具体写入start.sh的内容。
 由于规范化设计,我们主要修改进入程序安装文件的所在目录，即模板的倒数第二行。在确认内容全部修改、准备完成后，我们可以开始构建导出项目了。

  echo "cd $PREFIX/bin/SiYuan/ && ./siyuan --no-sandbox %U" >> $PREFIX/bin/start.sh

 除此之外，部分复制文件的路径可能还是需要根据压缩包解压之后的实际情况作调整，比如我这里解压 思源笔记之后会生成 SiYuan的目录

需替换变量	解释
LL_APPID	玲珑应用id
LL_NAME	玲珑应用名
LL_VERSION	玲珑应用版本

 在构建完成后，我们在项目目录执行调试看看是否正常运行

ziggy@kylin-standardpc:~/linglong-build$ ll-builder run