awtk踩坑记录一:awtk-web 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 ./scripts/update_res.py res 
    本地系统python ./scripts/update_res.py json 
    本地系统python ./scripts/update_res.py web    
    cd D:\\Devtools\\awtk-web
"""
        
    cwd = os.getcwd()
    app_target_dir = config_get_app_target_dir(config)
    os.chdir(app_target_dir)
    os.system('\"'+sys.executable+'\"' + ' scripts/update_res.py res')
    # 此步生成映像的assets_web.js
    os.system('\"'+sys.executable+'\"' + ' scripts/update_res.py json')
    os.system('\"'+sys.executable+'\"' + ' scripts/update_res.py web')
    os.chdir(cwd)

2.build_awtk_js:为映像生成awtk.js,awtk_asm.js,awtk_asm.wasm

步骤一:将AWTK_SRC_DIR下所有c库文件(awtk.getWebFiles()获取), awtk-web目录下符合正则src/c/*.c的所有文件(web_files), gen/c/awtk_wrap.c(如果目标项目是由js构成),以及项目build.json的sources属性指定的所有c/cpp源文件,加入文件列表all_files,并用emscripten自带的emcc编译, 输出awtk.js和awtk_asm.js。

def build_awtk_js(src_app_root, config, flags):
    app_target_dir = config_get_app_target_dir(config)
    app_files = []
	
    #如果目标项目是js类型,将awtk-web的gen/c/awtk_wrap.c加入
    if(is_js_app(config)):
        app_files.append(join_path('./', 'gen/c/awtk_wrap.c'))
	
    #提取目标项目的所有c源文件加入到app_files列表供编译
    #源文件路径取自目标项目build.json的sources列表
    sources = config['sources']
    for f in sources:
        if f.endswith('.c') or f.endswith('.cpp'):
            app_files = app_files + glob.glob(f)
	
    #提取awtk-web的所有c源文件加入web_files列表供编译
    web_files = glob.glob('src/c/*.c')
    
    #awtk.getWebFiles()获取awtk目标下所有库文件依赖,包括tkc,base,widget等库
    #将所有编译文件加入列表
    files = awtk.getWebFiles() + web_files + app_files

    all_files = []
    for f in files:
        all_files.append(os.path.normpath(os.path.abspath(f)))
	
    # 将目标项目的res加入编译器的include选项
    # includes_path = -ID:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res
    includes_path = ' -I' + join_path(app_target_dir, 'res') + ' '

    if 'includes' in config:
        includes_files = config['includes']
        for f in includes_files:
            includes_path += ('-I ' + f + " ")
	
    # 生成编译flag
    COMMON_FLAGS = ' ' + flags + ' '
    
    if 'cflags' in config:
        COMMON_FLAGS = COMMON_FLAGS + ' ' + ' '.join(config['cflags'])
    if 'cxxflags' in config:
        COMMON_FLAGS = COMMON_FLAGS + ' ' + ' '.join(config['cxxflags'])

    COMMON_FLAGS = COMMON_FLAGS + ' -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1 '
    COMMON_FLAGS = COMMON_FLAGS + \
        ' -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json '
    COMMON_FLAGS = COMMON_FLAGS + '-s ALLOW_MEMORY_GROWTH=1 -s USE_SDL=2'

	# 如果目标项目是js类型将附加的编译选项
    if(is_js_app(config)):
        COMMON_FLAGS = COMMON_FLAGS + ' -DAWTK_WEB_JS '
        COMMON_FLAGS = COMMON_FLAGS + ' -s RESERVED_FUNCTION_POINTERS=1000 '

    COMMON_FLAGS = COMMON_FLAGS + ' -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json'

    COMMON_FLAGS = COMMON_FLAGS + ' -DWITH_DATA_READER_WRITER '
    COMMON_FLAGS = COMMON_FLAGS + ' -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c '
    COMMON_FLAGS = COMMON_FLAGS + ' -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU '
   # COMMON_FLAGS = '  -g4 -gsource-map   -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1  -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json -s ALLOW_MEMORY_GROWTH=1 -s USE_SDL=2 -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json -DWITH_DATA_READER_WRITER  -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c  -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU '

#输出对应的js文件
#output=D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk.js
    output = join_path(config_get_js_dir(config), "awtk.js")
    CPPFLAGS_JS = ' -o ' + output + ' -s WASM=0 ' + COMMON_FLAGS + includes_path
    awtk.runArgsInFile('emcc -v ', CPPFLAGS_JS, all_files)
#output=D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk_asm.js
    output = join_path(config_get_js_dir(config), "awtk_asm.js")
    CPPFLAGS_ASM = ' -o ' + output + COMMON_FLAGS + includes_path
    awtk.runArgsInFile('emcc -v ', CPPFLAGS_ASM, all_files)

运行 awtk.runArgsInFile之后系统将输出一大堆文件编译,总共三百多个文件,耐心等待,日志看着一大坨很乱:

 -o D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk.js -s WASM=0   
 -g4 -gsource-map   
 -DSAFE_HEAP=1 -DASSERTIONS=1 
 -DSTACK_OVERFLOW_CHECK=1  
 -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json 
 -s ALLOW_MEMORY_GROWTH=1 
 -s USE_SDL=2 -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json 
 -DWITH_DATA_READER_WRITER  
 -DHAS_STD_MALLOC 
 -DNDEBUG 
 -DAWTK_WEB 
 -Isrc/c  
 -DWITH_WINDOW_ANIMATORS 
 -DWITH_NANOVG_GPU  
 -ID:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res  
 -ID:\\Devtools\\awtk/3rd 
 -ID:\\Devtools\\awtk 
 -ID:\\Devtools\\awtk\\src 
 -ID:\\Devtools\\awtk\\src/ext_widgets D:\\Devtools\\awtk\\src\\tkc\\action_darray_thread.c D:\\Devtools\\awtk\\src\\tkc\\action_queue.c D:\\Devtools\\awtk\\src\\tkc\\action_thread.c 
 ...
 (省略awtk库的一堆c文件)
emcc: warning: please replace -g4 with -gsource-map [-Wdeprecated]
"D:/Devtools/emsdk/upstream/bin\clang.exe" -target wasm32-unknown-emscripten -fignore-exceptions -fvisibility=default -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --sysroot=D:\Devtools\emsdk\upstream\emscripten\cache\sysroot -DEMSCRIPTEN -Werror=implicit-function-declaration -isystem D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2 -Xclang -iwithsysroot/include\compat -v -g3 -g -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1 -DWITH_DATA_READER_WRITER -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU -ID:\Devtools\awtk-web\webroot\AwtkApplication3\res -ID:\Devtools\awtk/3rd -ID:\Devtools\awtk -ID:\Devtools\awtk\src -ID:\Devtools\awtk\src/ext_widgets D:\Devtools\awtk\src\tkc\action_darray_thread.c -c -o C:\Users\nihaoa\AppData\Local\Temp\emscripten_temp_256cz5b6\action_darray_thread_0.o
clang version 19.0.0git (https:/github.com/llvm/llvm-project 6c7805d5d186a6d1263f90b8033ad85e2d2633d7)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: D:\Devtools\emsdk\upstream\bin
 (in-process)
 "D:\\Devtools\\emsdk\\upstream\\bin\\clang.exe" -cc1 -triple wasm32-unknown-emscripten -emit-obj -mrelax-all -disable-free -clear-ast-before-backend -disable-llvm-verifier -discard-value-names -main-file-name action_darray_thread.c -mrelocation-model static -mframe-pointer=none -ffp-contract=on -fno-rounding-math -mconstructor-aliases -target-cpu generic -debug-info-kind=constructor -dwarf-version=4 -debugger-tuning=gdb "-fdebug-compilation-dir=D:\\Devtools\\awtk-web" -v "-fcoverage-compilation-dir=D:\\Devtools\\awtk-web" -resource-dir "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19" -isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot\\include\\SDL2" -D EMSCRIPTEN -D SAFE_HEAP=1 -D ASSERTIONS=1 -D STACK_OVERFLOW_CHECK=1 -D WITH_DATA_READER_WRITER -D HAS_STD_MALLOC -D NDEBUG -D AWTK_WEB -I src/c -D WITH_WINDOW_ANIMATORS -D WITH_NANOVG_GPU -I "D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res" -I "D:\\Devtools\\awtk/3rd" -I "D:\\Devtools\\awtk" -I "D:\\Devtools\\awtk\\src" -I "D:\\Devtools\\awtk\\src/ext_widgets" -isysroot "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19\\include" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include/wasm32-emscripten" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include" -Werror=implicit-function-declaration -ferror-limit 19 -fmessage-length=230 -fvisibility=default -fgnuc-version=4.2.1 -fskip-odr-check-in-gmf -fignore-exceptions -fcolor-diagnostics "-iwithsysroot/include\\compat" -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -o "C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_256cz5b6\\action_darray_thread_0.o" -x c "D:\\Devtools\\awtk\\src\\tkc\\action_darray_thread.c"
clang -cc1 version 19.0.0git based upon LLVM 19.0.0git default target x86_64-pc-windows-msvc
ignoring nonexistent directory "D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include/wasm32-emscripten"
#include "..." search starts here:
#include <...> search starts here:
 src/c
 D:\Devtools\awtk-web\webroot\AwtkApplication3\res
 D:\Devtools\awtk/3rd
 D:\Devtools\awtk
 D:\Devtools\awtk\src
 D:\Devtools\awtk\src/ext_widgets
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\compat
 D:\Devtools\emsdk\upstream\lib\clang\19\include
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include
End of search list.
。。。(省略后面三百多个文件的编译)
 "D:/Devtools/emsdk/upstream/bin\clang.exe" -target wasm32-unknown-emscripten -fignore-exceptions -fvisibility=default -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --sysroot=D:\Devtools\emsdk\upstream\emscripten\cache\sysroot -DEMSCRIPTEN -Werror=implicit-function-declaration -isystem D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2 -Xclang -iwithsysroot/include\compat -v -g3 -g -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1 -DWITH_DATA_READER_WRITER -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU -ID:\Devtools\awtk-web\webroot\AwtkApplication3\res -ID:\Devtools\awtk/3rd -ID:\Devtools\awtk -ID:\Devtools\awtk\src -ID:\Devtools\awtk\src/ext_widgets D:\AWStudioProjects\Workspace\AwtkApplication3\src\main.c -c -o C:\Users\nihaoa\AppData\Local\Temp\emscripten_temp_vom058uh\main_313.o
clang version 19.0.0git (https:/github.com/llvm/llvm-project 6c7805d5d186a6d1263f90b8033ad85e2d2633d7)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: D:\Devtools\emsdk\upstream\bin
 (in-process)
 "D:\\Devtools\\emsdk\\upstream\\bin\\clang.exe" -cc1 -triple wasm32-unknown-emscripten -emit-obj -mrelax-all -disable-free -clear-ast-before-backend -disable-llvm-verifier -discard-value-names -main-file-name main.c -mrelocation-model static -mframe-pointer=none -ffp-contract=on -fno-rounding-math -mconstructor-aliases -target-cpu generic -debug-info-kind=constructor -dwarf-version=4 -debugger-tuning=gdb "-fdebug-compilation-dir=D:\\Devtools\\awtk-web" -v "-fcoverage-compilation-dir=D:\\Devtools\\awtk-web" -resource-dir "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19" -isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot\\include\\SDL2" -D EMSCRIPTEN -D SAFE_HEAP=1 -D ASSERTIONS=1 -D STACK_OVERFLOW_CHECK=1 -D WITH_DATA_READER_WRITER -D HAS_STD_MALLOC -D NDEBUG -D AWTK_WEB -I src/c -D WITH_WINDOW_ANIMATORS -D WITH_NANOVG_GPU -I "D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\res" -I "D:\\Devtools\\awtk/3rd" -I "D:\\Devtools\\awtk" -I "D:\\Devtools\\awtk\\src" -I "D:\\Devtools\\awtk\\src/ext_widgets" -isysroot "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\lib\\clang\\19\\include" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include/wasm32-emscripten" -internal-isystem "D:\\Devtools\\emsdk\\upstream\\emscripten\\cache\\sysroot/include" -Werror=implicit-function-declaration -ferror-limit 19 -fmessage-length=230 -fvisibility=default -fgnuc-version=4.2.1 -fskip-odr-check-in-gmf -fignore-exceptions -fcolor-diagnostics "-iwithsysroot/include\\compat" -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -o "C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_vom058uh\\main_313.o" -x c "D:\\AWStudioProjects\\Workspace\\AwtkApplication3\\src\\main.c"
clang -cc1 version 19.0.0git based upon LLVM 19.0.0git default target x86_64-pc-windows-msvc
ignoring nonexistent directory "D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include/wasm32-emscripten"
#include "..." search starts here:
#include <...> search starts here:
 src/c
 D:\Devtools\awtk-web\webroot\AwtkApplication3\res
 D:\Devtools\awtk/3rd
 D:\Devtools\awtk
 D:\Devtools\awtk\src
 D:\Devtools\awtk\src/ext_widgets
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot\include\SDL2
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\compat
 D:\Devtools\emsdk\upstream\lib\clang\19\include
 D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include
End of search list.
"D:/Devtools/emsdk/upstream/bin\clang.exe" --version
"D:/Devtools/emsdk/upstream/bin\wasm-ld.exe" @C:\Users\nihaoa\AppData\Local\Temp\emscripten_e9gcm659.rsp.utf-8
"D:\Devtools\emsdk\python\3.9.2-nuget_64bit\python.exe" -E D:\Devtools\emsdk\upstream\emscripten\tools\wasm-sourcemap.py D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm --dwarfdump=D:/Devtools/emsdk/upstream/bin\llvm-dwarfdump.exe -o D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map --basepath=D:\Devtools\awtk-web\webroot\AwtkApplication3\js
 "D:/Devtools/emsdk/upstream/bin\llvm-objcopy.exe" D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm --remove-section=.debug* --remove-section=producers
 "D:/Devtools/emsdk/upstream\bin\wasm-emscripten-finalize" -g --dyncalls-i64 --pass-arg=legalize-js-interface-exported-helpers --dwarf --output-source-map-url=awtk_asm.wasm.map D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm -o D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm --detect-features --input-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map --output-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map
emcc: warning: `main` is defined in the input files, but `_main` is not in `EXPORTED_FUNCTIONS`. Add it to this list if you want `main` to run. [-Wunused-main]
 "D:/Devtools/emsdk/node/16.20.0_64bit/bin/node.exe" D:\Devtools\emsdk\upstream\emscripten\src\compiler.mjs C:\Users\nihaoa\AppData\Local\Temp\tmpwpa968vp.json

awtk.runArgsInFile源代码:

def getIncludes():
    return '-I' + AWTK_ROOT_DIR + '/3rd ' + '-I' + AWTK_ROOT_DIR + ' -I' + AWTK_SRC_DIR +' -I' + AWTK_SRC_DIR +'/ext_widgets';


def writeArgs(filename, str):
    with open(filename, "w") as text_file:
        text_file.write(str);
	
def runArgsInFile(cmd, flags, files):
    cmd_args = flags + ' ' + getIncludes() + ' ' + ' '.join(files) 
    cmd_args = cmd_args.replace('\\', '\\\\');
    writeArgs("args.txt", cmd_args);
    print(cmd_args)
    os.system(cmd + ' @args.txt');

该步完成后会发现映像项目有一个js目录,多了3个文件:

PS D:\Devtools\awtk-web\webroot\AwtkApplication3\js> ls

目录: D:\Devtools\awtk-web\webroot\AwtkApplication3\js

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2024/5/28     17:05          82504 awtk_asm.js
-a----         2024/5/28     17:05        2226706 awtk_asm.wasm
-a----         2024/5/28     17:05         684260 awtk_asm.wasm.map

是以下指令生成的:

"D:/Devtools/emsdk/upstream/bin\wasm-ld.exe" 		@C:\Users\nihaoa\AppData\Local\Temp\emscripten_e9gcm659.rsp.utf-8

"D:\Devtools\emsdk\python\3.9.2-nuget_64bit\python.exe" 
-E 
	D:\Devtools\emsdk\upstream\emscripten\tools\wasm-sourcemap.py 
	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
	--dwarfdump=D:/Devtools/emsdk/upstream/bin\llvm-dwarfdump.exe 
-o 
	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map 
--basepath=D:\Devtools\awtk-web\webroot\AwtkApplication3\js

"D:/Devtools/emsdk/upstream/bin\llvm-objcopy.exe" 
D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
--remove-section=.debug* 
--remove-section=producers

 "D:/Devtools/emsdk/upstream\bin\wasm-emscripten-finalize" 
 -g 
 	--dyncalls-i64 --pass-arg=legalize-js-interface-exported-helpers --dwarf --output-source-map-url=awtk_asm.wasm.map 
 	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm
 -o 
 	D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm 
 	--detect-features --input-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map 
 	--output-source-map=D:\Devtools\awtk-web\webroot\AwtkApplication3\js\awtk_asm.wasm.map
 	
emcc: warning: `main` is defined in the input files, but `_main` is not in `EXPORTED_FUNCTIONS`. Add it to this list if you want `main` to run. [-Wunused-main]
 "D:/Devtools/emsdk/node/16.20.0_64bit/bin/node.exe" D:\Devtools\emsdk\upstream\emscripten\src\compiler.mjs C:\Users\nihaoa\AppData\Local\Temp\tmpwpa968vp.json

3.build_awtk_web_js:为映像构建app.js和awtk_web.js

def build_awtk_web_js(config):
    # 生成目标项目webroot的app.js[本质是把原项目的源js文件所有内容暴力整合到一个js文件下]
    build_app_js(config)
    
    """
    app_target_dir= 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3'
    assets_js= 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\assets_web.js'
    outfile = 'D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\awtk_web.js'
    """
    app_target_dir = config_get_app_target_dir(config)
    assets_js = join_path(app_target_dir, 'assets_web.js')
    outfile = join_path(config_get_js_dir(config), 'awtk_web.js')
   
	# 在awtk-web目录下生成app_config.js文件,与assets_web.js和下列js文件用于构建awtk_web.js
    gen_app_config(config, 'gen/app_config.js')
    awtk_web_js_files = [assets_js,
                         'src/js/browser.js',
                         'gen/app_config.js',
                         'src/js/webgl2d.js',
                         'src/js/image_cache.js',
                         'src/js/assets_manager.js',
                         'src/js/image_loader.js',
                         'src/js/input_method_web.js',
                         'src/js/utils.js',
                         'src/js/edit_element.js',
                         'src/js/vgcanvas_web.js',
                         'src/js/awtk_wrap.js',
                         'src/js/key_event.js',
                         'src/js/events_source.js',
                         'src/js/main_loop_web.js']
    merge_files(awtk_web_js_files, outfile)
def merge_files(srcs, dst):
    print(dst)
    with open(dst, 'w') as outfile:
        for fname in srcs:
            print(fname)
            with open(fname, encoding='utf-8-sig') as infile:
                outfile.write(infile.read())
                outfile.write("\n")

def need_awtk_api_js(config):
    return is_js_app(config) and not is_reactjs(config)

#将目标项目build.json下source选项指定的js文件合成一个新的app.js文件,放到webroot对应映像下
def build_app_js(config):
    app_files = []
    sources = config['sources']
    #output='D:\\Devtools\\awtk-web\\webroot\\AwtkApplication3\\js\\app.js'
    output = join_path(config_get_js_dir(config), 'app.js')
    #对于js类型项目须加入两个js文件
    if(need_awtk_api_js(config)):
        app_files.append('api/awtk_api_browser_prefix.js')
        app_files.append('api/awtk_api.js')
    #如果目标项目下有js文件,加入app_files列表
    for f in sources:
        if f.endswith('.js'):
            app_files = app_files + glob.glob(join_path(app_root, f))
    #app_files下所有js文件内容合并到app.js
    merge_files(app_files, output)
    print(app_files, output)
    

该步完成后映像项目下js目录将多出app.js和awtk_web.js两个文件:

PS D:\Devtools\awtk-web\webroot\AwtkApplication3\js> ls


    目录: D:\Devtools\awtk-web\webroot\AwtkApplication3\js


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2024/5/28     17:11              0 app.js
-a----         2024/5/28     17:05          82504 awtk_asm.js
-a----         2024/5/28     17:05        2226706 awtk_asm.wasm
-a----         2024/5/28     17:05         684260 awtk_asm.wasm.map
-a----         2024/5/28     17:11         140526 awtk_web.js

自此编译过程结束。

上面的例子是awtk c项目,如果是js项目,编译列表会略有变化,具体自己实验。

AWTK开发手册-AWTK开发实践指南-中文手册.pdf AWTK = Toolkit AnyWhere 随着手机、智能手表等便携式设备的普及,用户对 GUI 的要求越来越高,嵌入式系统对高性能、高可靠性、低功耗、美观炫酷的 GUI 的需求也越来越迫切,ZLG开源 GUI 引擎 AWTK 应运而生。AWTK 全称为 Toolkit AnyWhere,是 ZLG 倾心打造的一套基于 C 语言开发的 GUI 框架。旨在为用户提供一个功能强大、高效可靠、简单易用、可轻松做出炫酷效果的 GUI 引擎,并支持跨平台同步开发,一次编程,终生使用。 最终目标: 支持开发嵌入式软件。 支持开发Linux应用程序。 支持开发MacOS应用程序。 支持开发Windows应用程序。 支持开发Android应用程序。 支持开发iOS应用程序。 支持开发2D游戏。 其主要特色有: 小巧。在精简配置下,不依赖第三方软件包,仅需要32K RAM + 256K FLASH即可开发一些简单的图形应用程序。 高效。采用脏矩形裁剪算法,每次只绘制和更新变化的部分,极大提高运行效率和能源利用率。 稳定。通过良好的架构设计和编程风格、单元测试、动态(valgrind)检查和Code Review保证其运行的稳定性。 丰富的GUI组件。提供窗口、对话框和各种常用的组件(用户可以配置自己需要的组件,降低对运行环境的要求)。 支持多种字体格式。内置位图字体(并提供转换工具),也可以使用stb_truetype或freetype加载ttf字体。 支持多种图片格式。内置位图图片(并提供转换工具),也可以使用stb_image加载png/jpg等格式的图片。 紧凑的二进制界面描述格式。可以手工编辑的XML格式的界面描述文件,也可以使用Qt Designer设计界面,然后转换成紧凑的二进制界面描述格式,提高运行效率,减小内存开销。 支持主题并采用紧凑的二进制格式。开发时使用XML格式描述主题,然后转换成紧凑的二进制格式,提高运行效率,减小内存开销。 支持裸系统,无需OS和文件系统。字体、图片、主题和界面描述数据都编译到代码中,以常量数据的形式存放,运行时无需加载到内存。 内置nanovg实现高质量的矢量动画,并支持SVG矢量图。 支持窗口动画、控件动画、滑动动画和高清LCD等现代GUI常见特性。 支持国际化(Unicode、字符串翻译和输入法等)。 可移植。支持移植到各种RTOS和嵌入式Linux系统,并通过SDL在各种流行的PC/手机系统上运行。 脚本化。从API注释中提取API的描述信息,通过这些信息可以自动生成各种脚本的绑定代码。 支持硬件2D加速(目前支持STM32的DMA2D和NXP的PXP)和GPU加速(OpenGL/OpenGLES/DirectX/Metal),充分挖掘硬件潜能。 丰富的文档和示例代码。 采用LGPL协议开源发布,在商业软件中使用时无需付费。 目前核心功能已经完成,内部开始在实际项目中使用了,欢迎有兴趣的朋友评估和尝试,期待您的反馈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值