awtk踩坑记录二：移植jerryscript到awtk design项目

另一种开始

已于 2024-05-31 18:15:55 修改

阅读量601

点赞数 5

分类专栏： awtk踩坑记录文章标签： c++

于 2024-05-29 21:29:08 首次发布

本文链接：https://blog.csdn.net/tracker647/article/details/139306235

版权

awtk踩坑记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

从github下载并编译awtk, awtk-mmvm和awtk-jerryscript（如果没有）
用awtk-designer新建项目，awtk和awtk-mmvm路径改为上一步github下载到的目录路径（如designer改不了，可在project.json上修改）
从awtk-jerryscript复制3rd/jerryscript，awtk-jerryscript的src改名为jerryscript_src到designer项目根目录上
修改designer项目根目录Sconstruct为：

import os
import scripts.app_helper as app

ARGUMENTS['FONT'] = 'default_full'
helper = app.Helper(ARGUMENTS);

TK_JERRYSCRIPT_ROOT = os.path.join(helper.APP_ROOT, '3rd/jerryscript/')

TK_JS_JERRYSCRIPT_DIRS = [
  TK_JERRYSCRIPT_ROOT,
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-ext/include'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-ext/arg'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-ext/common'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-ext/debugger'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-ext/handler'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-ext/module'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/include'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/ecma'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/ecma/base'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/ecma/builtin-objects'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/ecma/operations'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/jcontext'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/jrt'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/parser'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/parser/js'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/parser/regexp'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/vm'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/api'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/debugger'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/lit'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/jmem'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/profiles'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-port/default/include'),
  os.path.join(TK_JERRYSCRIPT_ROOT, 'jerryscript/jerry-core/ecma/builtin-objects/typedarray'),
]

APP_CPPPATH = TK_JS_JERRYSCRIPT_DIRS
APP_LIBS = ['awtk-jerryscript', 'jerryscript']
APP_CCFLAGS = '-DPATH_MAX=256 -DJERRY_ESNEXT=0 '

helper.add_libs(APP_LIBS).add_ccflags(APP_CCFLAGS).add_cpppath(APP_CPPPATH).call(DefaultEnvironment)


if ARGUMENTS.get('IOTJS', '') != '':
  SConscriptFiles = ['src/SConscript']
else:
  SConscriptFiles = ['3rd/jerryscript/SConscript', 'jerryscript_src/SConscript', 'jerryscript_src/SConscript.bin']



CUSTOM_WIDGET_LIBS = []

DEPENDS_LIBS = CUSTOM_WIDGET_LIBS + []

helper = app.Helper(ARGUMENTS)
helper.set_deps(DEPENDS_LIBS)

app.prepare_depends_libs(ARGUMENTS, helper, DEPENDS_LIBS)
helper.call(DefaultEnvironment)

SConscriptFiles += ['src/SConscript', 'tests/SConscript']
helper.SConscript(SConscriptFiles)

designer项目awtk_locator.py的getAwtkSDKPath修改，使其返回自己awtk安装的所在目录

def getAwtkSDKPath():
    # env = os.environ
    # if 'AWTK_SDK_PATH' in env:
    #     return env['AWTK_SDK_PATH']
    # else:
    #     return ''
    return 'D:/Devtools/'

将awtk-jerryscript目录design/default/scripts/awtk.js复制到designer项目的对应路径下，否则awtkRun可能无法加载窗口

移植awtk-jerryscript的font目录到desginer项目对应路径下合并原font目录，否则awtkRun打开js文件将无法显示文字。

完成以上两步后一定要更新资源：

  python ./scripts/update_res.py all

新建build_js.json，用于以后在awtk-web的部署，注意json中sources写明js源文件路径design/default/script/*.js，以后所有的js页面都要存放到该路径下，例：

build_js.json

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

如果你是vscode用户，复制awtk-web/api的awtk_api.d.ts到src/js下，以后每次写页面逻辑（例：home_page.js）就将其import引用，这样就能使用vscode的函数提示和补全功能，只不过用awtkRun运行js文件时就得把该import去掉, 否则编译将报错，以下是一个示例的home_page.js

// import { TEventType, TWindow } from "./awtk_api"

function application_init() {
    var win = TWindow.open("home_page");
    win.lookup("button", true).on(TEventType.CLICK, function(evt){
      	win.lookup("label").setText("A clicked");
    });

    win.lookup("button1", true).on(TEventType.CLICK, function(evt){
		win.lookup("label").setText("B clicked");
    });

    win.lookup("button2", true).on(TEventType.CLICK, function(evt){
		win.lookup("label").setText("C clicked");
    });

}
  
application_init()

每次修改页面的js文件后，需要重新生成资源：

python ./scripts/update_res.py all

问题：

限于使用的awtk原因不能加载插件，如果用awtkStudio自带的awtk sdk，则加载c转jerryscript部分的代码又会报错
每个js文件在用awtkRun编译时都得手动把顶部的import去除，比较麻烦

【】

桌面编译（需根据实际安装路径修改）

cd /path/to/AwtkApplication3
scons
python ./scripts/update_res.py all
./bin/awtkRun.exe src/js/home_page.js

web编译：

桌面编译（需根据实际安装路径修改）

cd d:/devtools/emsdk
./emsdk_env
cd ../awtk-web
python build.py ..\..\AWStudioProjects\Workspace\AwtkApplication3\build_js.json all
python -m http.server 8080 --directory webroot

【】