awtk踩坑记录一：awtk-web build.py编译过程笔记

原创

已于 2025-04-12 18:33:00 修改 · 916 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #笔记

于 2024-05-29 18:35:36 首次发布

PS: awtk-web已于2024.11.6大幅更新，不再使用build.py, 此文的方法作废。

工作需求，接触了awtk, 要求把界面部署到web上，期间因为各种编译问题卡的半死，提了不少issue, 经过几天补课，把项目的编译结构给摸了一遍，做个记录，也希望能帮到有同样问题的朋友。

之前python只是略接触过，第一次见过正规项目用python编译，还尝试自己调试追踪过程，感觉也成长了不少。

测试方法：vscode下用python插件F5 debug, debug方式选择command line arguments
放编译build.py的方法以方便CV：

./emsdk_env
cd ../awtk-web
python build.py D:\AWStudioProjects\Workspace\AwtkApplication3\build.json all

build.py入口：

def run(app_root, config, action):
    prepare_app_target_dir(config)
    prepare_export_funcs(app_root, config)

    if action == 'all':
        build_app_assets(app_root, config)
        build_awtk_js(app_root, config, ' -g4 -gsource-map ')
        build_awtk_web_js(config)
...

注：官方的build_win32.sh经测试在windows平台上无法使用，powershell不识别emsdk_env.sh, 还好emscripten有对应的ps1文件，执行emsdk_env实际上就是执行对应的emsdk_env.ps1文件

1.build_app_assets：生成webroot映像，加载项目资源

从目标的build.json【本例目标名AwtkApplication3， python变量名config】中指定的路径copy资源到awtk-web的对应的design目录，project.json, data/app.html和data/index.html,。
调用update_res.py更新资源res目录

build.json

{
   
   
  "name": "AwtkApplication3",
  "version": "1.0",
  "assets": "res/assets",
  "author": "AWTK Develop Team",
  "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",
  "themes":["default"],
  "web": {
   
   
    "app_type": "c",
    "assets": "design",
    "sources": [
      "src/*.c",
      "src/*/*.c"
    ],
    "config": {
   
   
      "fontScale": "0.8",
      "defaultFont": "sans"
    }
  }
}

build.py

#src_app_root='D:\\AWStudioProjects\\Workspace\\AwtkApplication3'
#config是目标项目的build.json对象
def build_app_assets(src_app_root, config):
    #生成对应项目在awtk-web/webroot的对应映像，并复制项目design文件夹到映像目录下
    copy_assets(src_app_root, config)   
    #复制对应项目project.json到对应映像目录下
    copy_project_json(src_app_root, config) 
    #复制awtk-web的html模版app.html及index.html到对应映像
    copy_data_file(config, 'app.html')      
    copy_data_file(config, 'index.html')
    #更新对应映像的assets:为目标映像生成script文件夹和res文件夹以及assets_web.js
    update_assets(config)       
    #构建对应的romfs文件系统（如果有），一般不需要
    build_romfs(app_root, config);

#src = 'scripts'
#dst = 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\scripts'
def prepare_update_res(config):
    src = 'scripts'
    dst = join_path(config_get_app_target_dir(config), 'scripts')

    copy_folder(src, dst)
 
#return: 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3'
def config_get_app_target_dir(config):
    return join_path(WEB_ROOT, config['name'])
        
def update_assets(config):
	#复制awtk-web的scripts文件夹到目标项目的webroot映像下
    prepare_update_res(config)
    #获取目标项目的webroot映像目录
    config_get_app_target_dir(config)
        
""" 
	运行update.res.py更新资源，相当于
    cd D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3
    本地系统python .