{"id":20572848,"url":"https://github.com/zlgopen/awtk-web","last_synced_at":"2025-04-14T17:23:43.175Z","repository":{"id":76747929,"uuid":"177370083","full_name":"zlgopen/awtk-web","owner":"zlgopen","description":"在浏览器中运行AWTK应用程序","archived":false,"fork":false,"pushed_at":"2024-11-06T03:29:15.000Z","size":9544,"stargazers_count":23,"open_issues_count":6,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-06T04:26:44.377Z","etag":null,"topics":["awtk","wasm","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-2.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zlgopen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-24T04:22:28.000Z","updated_at":"2024-11-06T03:29:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"851e323b-6245-44eb-91e4-d6854b2bead6","html_url":"https://github.com/zlgopen/awtk-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlgopen%2Fawtk-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlgopen%2Fawtk-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlgopen%2Fawtk-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlgopen%2Fawtk-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zlgopen","download_url":"https://codeload.github.com/zlgopen/awtk-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224878929,"owners_count":17385074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awtk","wasm","web"],"created_at":"2024-11-16T05:24:15.310Z","updated_at":"2025-04-14T17:23:43.164Z","avatar_url":"https://github.com/zlgopen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AWTK-WEB\n\n![](docs/images//ui.png)\n\n老用户请花点时间看看 [新版改动](docs/new_build.md)\n\n## 一、介绍\n\n[AWTK-WEB](https://github.com/zlgopen/awtk-web) 让 [AWTK](https://github.com/zlgopen/awtk) 能够在浏览器中运行，这除了看起来比较酷，也有具有实际的意义：\n\n* 让用 C 语言开发的 [AWTK](https://github.com/zlgopen/awtk) 应用程序，在不需要修改源码的情况下，能在浏览器中运行。可以方便的向客户展示项目，只需分享一个链接，客户就可以在浏览器中看到实际的运行效果。\n\n* 把 AWTK 编译成一个 JS 库，你可以用 JS 开发 AWTK 应用程序，并在浏览器中运行。\n\n在线演示：[demoui](https://awtk.zlg.cn/demos/awtk/demoui/index.html)\n\n## 二、目标\n\n[AWTK-WEB](https://github.com/zlgopen/awtk-web) 不是简单的把 [AWTK](https://github.com/zlgopen/awtk) 编译成 JS，让它在浏览器中运行，那样是无法满足一些非功能性的需求的。我们把 [AWTK-WEB](https://github.com/zlgopen/awtk-web) 当作一个全新平台去移植，并充分考虑 WEB 平台的特点，有针对性的去实现以下的目标。\n\n* 小。在 web 上运行的应用程序，体积小是非常重要的，体积越小打开越快，这直接影响用户体验。\n\n\u003e 为了减小代码的体积， [AWTK](https://github.com/zlgopen/awtk) 去掉了 SDL 和 stb 等库的依赖，尽量使用浏览器本身的功能，这极大程度减小了代码的体积。\n\u003e\n\u003e 为了减小资源的体积， [AWTK](https://github.com/zlgopen/awtk) 的缺省字体使用了浏览器的字体，输入法使用浏览器的输入法。\n\n我们可以对比一下各个 GUI 的 wasm 文件的大小。\n\n| GUI  | wasm 大小 | 网址                                                                    |\n| ---- | --------: | :---------------------------------------------------------------------- |\n| QT   |        9M | http://example.qt.io/qt-webassembly/SensorTagDemo/SensorTagDemo.html    |\n| QT   |        3M | http://example.qt.io/qt-webassembly/opengl/hellowindow/hellowindow.html |\n| AWTK |      0.7M | 与应用程序资源有关                                                      |\n\n* 快。Android 手机浏览器性能普遍不高，要到达实用价值，性能优化至关重要。\n\n\u003e [AWTK-WEB](https://github.com/zlgopen/awtk-web) 的窗口动画采用了 WebGL 直接贴图进行优化，在支持 WebGL 的浏览器中，窗口动画性能接近原生效果。\n\n* 省电。在手机等电池供电的系统上，省电是必须要考虑的。\n\n\u003e [AWTK-WEB](https://github.com/zlgopen/awtk-web) 启用脏矩形算法，界面不变就不绘制，有变化只绘制变化的区域，这极大的降低了电能的消耗。\n\n* 跨平台。除了在 PC 的各种浏览器（除老的 IE 浏览器）上运行，还需要在 Android 和 iOS 上运行。[AWTK-WEB](https://github.com/zlgopen/awtk-web) 的基本要求只是浏览器支持 HTML5 的 canvas，在 Chorome、Firefox 和 IE 等主流浏览器，以及目前流行的 Android 和 iOS 设备上都能正常运行。\n\n\n## 三、编译\n\n1. 先安装必要的软件包\n\n* [scons](https://scons.org/)\n* [python](https://www.python.org/)\n* [cmake](https://cmake.org/)\n* [git](https://git-scm.com/)\n* [emscripten](https://emscripten.org/docs/getting_started/downloads.html)\n\n\u003e Windows 下，如果没有 gnu make，可以用 choco 安装 ninja（在管理员权限下运行命令提示符 cmd，然后执行下面的命令）\n\n```\nchoco install ninja\n```\n\n1. 编译 awtk 本身\n\n```\ngit clone https://github.com/zlgopen/awtk.git\ncd awtk\nscons -j 8\n```\n\n3. 下载 awtk-web\n\n```\ngit clone https://github.com/zlgopen/awtk-web.git\ncd awtk-web\n```\n\n4. 编译 demoui\n\n* MacOS\n\n\u003e 请先修改 build_mac.sh 中 emsdk_env.sh 和 python 的路径，然后运行：\n\n```\n./build_mac.sh ../awtk/build.json release\n```\n\n* Linux\n\n\u003e 请先修改 build_linux.sh 中 emsdk_env.sh 和 python 的路径，然后运行：\n\n```\n./build_linux.sh ../awtk/build.json release\n```\n\n* Windows（请在 git 的 bash 终端下运行）\n\n\u003e 请先修改 build_win32.sh 中 emsdk_env.sh 和 python 的路径，然后运行：\n\n```\n./build_win32.sh ../awtk/build.json release\n```\n\n\u003e 编译脚本有更多选项，比如可以根据需要只更新资源或代码。\n\n```shell\nUsage: ./build_mac.sh app.json action(all|debug|release|assets|awtk_web_js|awtk_js|js)\n=============================================================\n  debug:        build debug version.\n  release:      build release version.\n  assets:       build assets only.\n  awtk_js:      build awtk_js only.\n  awtk_web_js:  build awtk_web_js only.\n  js:           build awtk_js and awtk_web_js only.\n  all:          same as debug. build debug version.\n=============================================================\n```\n\n## 四、运行\n\n1. 启动 web 服务器\n\n* release 版本\n  \n```\npython -m http.server 8080 --directory webroot\n```\n\n或者\n\n```sh\n./start_web.sh\n```\n\n* debug 版本\n\n```\npython -m http.server 8080 --directory build\n```\n\n或者\n\n```sh\n./start_web_debug.sh\n```\n\n\u003e 使用其它 web 服务器均可。\n\n1. 用浏览器打开 [http://localhost:8080/demoui/index.html](http://localhost:8080/demoui/index.html)\n\n## 五、已知问题\n\n* GIF 文件仅在 saferi 和 iOS 上工作。\n* 只能调用 awtk、标准 C 库，和其它有源代码的库。\n* 不支持模态对话框。dialog\\_modal 不会生效，而 dialog\\_quit 会直接关闭对话框。\n\n## 六、注意事项\n\n## 七、实现笔记\n\n1.[移植笔记-序](docs/porting_notes_0.md)\n\n2.[移植笔记-基础知识](docs/porting_notes_1.md)\n\n3.[移植笔记-字体](docs/porting_notes_2.md)\n\n4.[移植笔记-图片](docs/porting_notes_3.md)\n\n5.[移植笔记-输入法](docs/porting_notes_4.md)\n\n6.[移植笔记-画布](docs/porting_notes_5.md)\n\n## 八、开发文档\n\n* [C/C++ 应用程序快速入门](docs/get_started_c_app.md)\n\n* [JS 应用程序快速入门](docs/get_started_js_app.md)\n\n* [emscripten api 参考](https://emscripten.org/docs/api_reference/index.html)\n\n* [调试方法](https://www.cnblogs.com/bigben0123/articles/15753240.html)\n\n## 九、示例\n\n* [JS 示例 1 ](https://github.com/zlgopen/awtk-web/blob/master/examples/button/build.json)\n\n* [JS 示例 2 ](https://github.com/zlgopen/awtk-web/blob/master/examples/button_xml/build.json)\n\n* [JS 示例 3 ](https://github.com/zlgopen/awtk-web/blob/master/examples/AwtkApplicationJS/build.json)\n\n* [C/C++ 示例 1 ](https://github.com/zlgopen/awtk/blob/master/build.json)\n\n* [C/C++ 示例 2 ](https://github.com/zlgopen/awtk-web/blob/master/examples/AwtkApplicationC/build.json)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlgopen%2Fawtk-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzlgopen%2Fawtk-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlgopen%2Fawtk-web/lists"}