Portable Notes for AWTK WEB Edition - Base

Compiling a hello world written in C into a web version is easy, and there are many examples on the web.Writing such an example is necessary to get us started quickly, but the actual project is much more complex. Here we will introduce some basic knowledge of emscripten and highlight the problems encountered during the migration of AWTK, in the hope that you will take less detours.

1. Command-line parameters

1.EXPORTED_FUNCTIONS is used to export functions of C in the application for JS calls.For example:

-s EXPORTED_FUNCTIONS="['_awtk_web_init']"

Underline the function name, such as awtk_web_init for the function name and _awtk_web_init for the exported name.

For small projects, few functions are exported, and it is possible to write them directly on the command line.For large projects, there are many exported functions. You should write the contents to a file and tell emcc to read the exported functions from the file through @Compliance, which makes maintenance much easier.For example:

For large projects, it is best not to use the -g flag for debugging versions. The resulting code is too large and may leave the browser in a false dead state to debug at all.Debugging code generated by default is basically OK.

The release suggests adding-Os, which will reduce the size of the code considerably, and it will isolate the data and increase the loading speed.

4. Debugging macros.

The first address of the constant data generated by emcc is not aligned to 32bit/64bit. AWTK stepped into this pit. The SAFE_HEAP macro helps to find out.It is recommended that the following macros be defined:

For a large project, command line parameters can easily be too long on the Windows platform.The easiest way is to write the parameters of emcc to a file and tell emcc to read from it through @conformance.For example:

When a string parameter is passed into a JS function, the offset of the memory address that the JS function gets needs to be decoded to generate a JS string object.The pointerToString function is implemented as follows:

The Module.UTF8ToString function needs to be exported in the EXTRA_EXPORTED_RUNTIME_METHODS described earlier to work.

AWTK also uses binary data as a parameter. There are no relevant examples on the Internet, so I have to go to the code research for myself.In AWTK, bitmap data (rgba color values) are passed to the JS and then set to the canvas.This is done as follows:

The mutableImage.addr is the address of the rgba data, which is allocated using malloc. I see the implementation of the malloc function, which is offset from the number of bytes in Module.HEAP32.Since HEAP32 is 4 bytes of data, it needs to be offset 2 bits to the right when used as an offset:

let start = mutableImage.addr >> 2;

This data is then retrieved from HEAP32 by subarray:

let array = Module.HEAP32.subarray(start, end);

Also worth mentioning here is that imageData.data is an Int8Array and can be converted to an Int32Array in the following ways:

The most troublesome thing is to call removeFunction to remove the function from the table after the function has been exhausted. There is no problem with callback functions that are called synchronously, but when can asynchronous calling functions, especially asynchronous functions that are called multiple times, be moved out of only the C code, so you need to add a place in the C codeReason.For example: