Build Process - langningchen/miniapp GitHub Wiki

编译流程详解

本指南详细介绍如何从源码编译 miniapp 项目，包括前端构建、后端编译和最终打包的完整流程。

🎯 编译概览

miniapp 的编译过程分为几个阶段：

环境准备 - 获取设备信息和依赖库
前端构建 - 编译 Vue.js 用户界面
后端编译 - 交叉编译 C++ 核心模块
资源整合 - 打包成 miniapp.amr 文件
部署安装 - 上传到设备并安装

📋 编译前准备

确认环境

在开始编译之前，确保您已经完成：

克隆项目

# 创建工作目录
mkdir -p ~/development
cd ~/development

# 克隆项目
git clone https://github.com/langningchen/miniapp.git
cd miniapp

# 检查项目结构
ls -la

🔧 第一步：获取设备信息

连接设备

# 确保设备已连接并授权
adb devices

# 应该看到设备列表，状态为 device

获取版本信息

# 进入设备 shell
adb shell

# 在设备上运行版本检测脚本
curl -k -s https://raw.githubusercontent.com/langningchen/miniapp/refs/heads/main/tools/getVersionInfo.sh | bash

# 退出设备 shell
exit

# 拉取生成的版本信息文件
adb pull /userdisk/Favorite/versionInfo.tar.gz ./versionInfo.tar.gz

提取版本信息

# 解压版本信息到 jsapi 目录
tar -xzf versionInfo.tar.gz -C ./jsapi

# 检查提取的文件
ls -la jsapi/include/
ls -la jsapi/lib/

您应该看到类似文件：

jsapi/include/
├── curl/
│   └── curl.h
├── sqlite3/
│   └── sqlite3.h
└── ...

jsapi/lib/
├── libcurl.so
├── libsqlite3.so
└── ...

🏗️ 第二步：下载和配置工具链

确定工具链版本

# 检查版本信息文件中的系统信息
find jsapi/ -name "*version*" -o -name "*system*" -type f | xargs cat

下载工具链

根据设备信息选择合适的工具链：

# 进入工具链目录
mkdir -p jsapi/toolchains
cd jsapi/toolchains

# 下载 GLIBC 工具链（大多数设备使用）
wget https://toolchains.bootlin.com/downloads/releases/toolchains/armv7-eabihf/tarballs/armv7-eabihf--glibc--stable-2018.11-1.tar.bz2

# 解压工具链
tar -xjf armv7-eabihf--glibc--stable-2018.11-1.tar.bz2

# 返回项目根目录
cd ../..

验证工具链

# 测试交叉编译器
jsapi/toolchains/armv7-eabihf--glibc--stable-2018.11-1/bin/arm-buildroot-linux-gnueabihf-gcc --version

# 检查目录结构
tree jsapi/ -L 3 -d

🎨 第三步：前端构建

安装前端依赖

# 进入 UI 目录
cd ui

# 安装依赖包
pnpm install

如果安装过程中出现错误，可能需要修改一些库文件（项目特定要求）：

# 修改 rollup 配置以支持 TypeScript
sed -i "s/commonjs(),/commonjs(),require('@rollup\/plugin-typescript')(),/g" ./node_modules/aiot-vue-cli/src/libs/rollup.config.js

# 修改 Vue 编译器配置
sed -i "s/compiler.parseComponent(content, { pad: 'line' })/compiler.parse(content, { pad: 'line' }).descriptor/g" ./node_modules/aiot-vue-cli/web-loaders/falcon-vue-loader/lib/parser.js

# 更新编译器路径
sed -i "s/path.resolve(__dirname, '.\/vue\/packages\/vue-template-compiler\/index.js')/'@vue\/compiler-sfc'/g" ./node_modules/aiot-vue-cli/cli-libs/index.js

# 修复解析器
sed -i "s/compiler.parseComponent(content, { pad: true })/compiler.parse(content, { pad: true }).descriptor/g" ./node_modules/aiot-vue-cli/src/libs/parser.js

# 修复模板编译器
sed -i "s/compiler.compile/compiler.compileTemplate/g" ./node_modules/aiot-vue-cli/web-loaders/falcon-vue-loader/lib/template-compiler/index.js

# 添加 defineComponent 替换规则
sed -i "s/const replaceValues = {}/const replaceValues = { 'defineComponent': '' }/g" ./node_modules/aiot-vue-cli/src/libs/rollup.config.js

构建前端

# 构建前端资源
pnpm run build

# 检查构建输出
ls -la dist/

返回项目根目录

cd ..

⚙️ 第四步：后端编译

配置 CMake

# 进入 jsapi 目录
cd jsapi

# 创建构建目录
mkdir -p build
cd build

# 使用 CMake 配置项目
cmake ..

# 检查配置是否成功
echo "CMake 配置完成，返回码: $?"

编译 C++ 代码

# 编译项目（使用多核并行编译）
make -j$(nproc)

# 检查编译结果
ls -la

# 查看生成的可执行文件
file jsapi_langningchen  # 应该显示 ARM 架构

如果编译成功，您应该看到：

jsapi_langningchen - 主要可执行文件
各种 .o 目标文件
可能的库文件

返回项目根目录

cd ../..

📦 第五步：整体构建

使用构建脚本

项目提供了自动化构建脚本：

# 执行完整构建流程
./tools/build.sh

# 脚本会自动执行：
# 1. 前端构建
# 2. 后端编译
# 3. 资源整合
# 4. 生成 miniapp.amr 文件

手动构建（如果需要）

如果自动脚本失败，您可以手动执行各个步骤：

# 1. 前端构建
cd ui
pnpm run build
cd ..

# 2. 后端编译
cd jsapi/build
make -j$(nproc)
cd ../..

# 3. 创建发布目录
mkdir -p dist

# 4. 复制前端资源
cp -r ui/dist/* dist/

# 5. 复制后端可执行文件
cp jsapi/build/jsapi_langningchen dist/

# 6. 创建 AMR 包（这需要特定的打包工具）
# 具体步骤取决于 miniapp 平台的打包格式

✅ 验证编译结果

检查文件

# 检查构建输出
ls -la dist/

# 查看可执行文件信息
file dist/jsapi_langningchen

# 检查文件大小
du -h dist/*

测试可执行文件

# 如果有模拟器或本地测试环境，可以测试
# ./dist/jsapi_langningchen --help  # 可能不支持，因为是 ARM 架构

🚀 第六步：部署到设备

上传文件

# 上传 miniapp.amr 文件到设备
adb push dist/miniapp.amr /userdisk/Favorite/miniapp.amr

# 验证文件是否上传成功
adb shell ls -la /userdisk/Favorite/miniapp.amr

安装应用

# 进入设备 shell
adb shell

# 安装 miniapp
miniapp_cli install /userdisk/Favorite/miniapp.amr

# 检查安装状态
miniapp_cli list

# 退出设备 shell
exit

🔧 自定义构建配置

修改 CMake 配置

如果需要自定义编译选项，编辑 jsapi/CMakeLists.txt：

# 添加调试信息
set(CMAKE_BUILD_TYPE Debug)

# 添加编译选项
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -Wall -Wextra")

# 添加预处理器定义
add_definitions(-DDEBUG_MODE=1)

修改前端构建

编辑 ui/package.json 中的构建脚本：

{
  "scripts": {
    "build": "aiot-vue-cli build",
    "build:debug": "aiot-vue-cli build --mode development",
    "watch": "aiot-vue-cli build --watch"
  }
}

🐛 编译问题排查

常见编译错误

1. 找不到头文件

# 检查 include 目录
ls -la jsapi/include/

# 确保版本信息正确解压
tar -tf versionInfo.tar.gz | grep include

2. 找不到库文件

# 检查 lib 目录
ls -la jsapi/lib/

# 检查库文件架构
file jsapi/lib/libcurl.so

3. 工具链问题

# 检查工具链路径
ls -la jsapi/toolchains/

# 测试编译器
jsapi/toolchains/armv7-eabihf--glibc--stable-2018.11-1/bin/arm-buildroot-linux-gnueabihf-gcc --version

清理和重建

# 清理构建文件
rm -rf jsapi/build
rm -rf ui/dist
rm -rf ui/node_modules/.cache

# 重新构建
mkdir -p jsapi/build
cd jsapi/build
cmake ..
make clean
make -j$(nproc)
cd ../..

# 重新构建前端
cd ui
pnpm install
pnpm run build
cd ..

📊 构建优化

并行编译

# 使用所有 CPU 核心
make -j$(nproc)

# 或指定核心数
make -j4

缓存优化

# 使用 ccache 加速编译
sudo apt install ccache

# 配置 CMake 使用 ccache
export CC="ccache gcc"
export CXX="ccache g++"

磁盘空间优化

# 清理 pnpm 缓存
pnpm store prune

# 清理 CMake 缓存
rm -rf jsapi/build/CMakeCache.txt

🚀 下一步

编译完成后，请继续：

Miniapp 安装部署 - 学习如何部署和管理应用
设备连接和调试 - 深入了解调试技巧

❗ 常见问题

问题1：版本信息获取失败

解决方案：

# 检查设备连接
adb devices

# 手动下载脚本
wget https://raw.githubusercontent.com/langningchen/miniapp/refs/heads/main/tools/getVersionInfo.sh
adb push getVersionInfo.sh /tmp/
adb shell "chmod +x /tmp/getVersionInfo.sh && /tmp/getVersionInfo.sh"

问题2：工具链下载失败

解决方案：

# 使用国内镜像
# 或手动下载并传输文件

# 验证下载的文件
md5sum armv7-eabihf--glibc--stable-2018.11-1.tar.bz2

问题3：前端依赖安装失败

解决方案：

# 清理缓存
rm -rf ui/node_modules
rm -f ui/pnpm-lock.yaml

# 使用镜像源
pnpm config set registry https://registry.npmmirror.com

# 重新安装
pnpm install

需要帮助？ 查看常见问题解决获取更多解决方案。