Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the method of transplanting AWTK WEB version". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the method of transplanting the AWTK WEB version?"

Command line parameters

1.EXPORTED_FUNCTIONS is used to export the function of C in the application for JS to call. Such as:

-s EXPORTED_FUNCTIONS= "['_ awtk_web_init']"

The function name should be preceded by an underscore, for example, the function name is awtk_web_init and the export name is _ awtk_web_init.

For small projects, there are very few exported functions, and it is possible to write them directly on the command line. For large projects, there are a lot of exported functions, so you should write the contents to a file and tell emcc to read the exported functions from the file through @ coincidence, which will be much easier to maintain. Such as:

-s EXPORTED_FUNCTIONS=@configs/export_app_funcs.json

The content of configs/export_app_funcs.json:

["_ awtk_web_init", "_ awtk_web_deinit", "_ awtk_web_main_loop_step", "_ awtk_web_on_key_down", "_ awtk_web_on_key_up", "_ awtk_web_on_wheel", "_ awtk_web_on_pointer_down", "_ awtk_web_on_pointer_move", "_ awtk_web_on_im_commit" "_ awtk_web_on_pointer_up"]

2.EXTRA_EXPORTED_RUNTIME_METHODS is used to export functions in runtime for JS to call. Such as:

-s EXTRA_EXPORTED_RUNTIME_METHODS = "['cwrap']"

By the same token, it is also preferable to put its contents in a file. Such as:

-s EXTRA_EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json

The content of configs/export_runtime_funcs.json:

["ccall", "cwrap", "addFunction", "removeFunction", "addOnPostRun", "addOnInit", "addOnExit", "addOnPreMain", "UTF8ToString"]

3. Debugging and optimization

For large projects, the debug version had better not add the-g flag, the resulting code is too large, may make the browser in a false death state, can not be debugged at all. Debugging with the default generated code is basically OK.

The release version is recommended to add-Os, the code size will be greatly reduced, and it will separate the data and improve the loading speed.

4. The macro that you debug.

The first address of the constant data generated by emcc will not be aligned by 32bit/64bit, and AWTK will step into this hole, and SAFE_ HEAP macros will help you find this problem. It is recommended that you define these macros:

-DSAFE_HEAP=1-DASSERTIONS=1-DSTACK_OVERFLOW_CHECK=1

Later, I added alignment attributes to all the constants of AWTK:

# ifdef _ MSC_VER#define TK_CONST_DATA_ALIGN (v) _ declspec (align (8)) v#else#define TK_CONST_DATA_ALIGN (v) v _ attribute__ ((aligned (8) # endif / * _ MSC_VER*/TK_CONST_DATA_ALIGN (const unsigned char data_a_b_c_any []) = {0x08Magol 0x00m0x01Mold 0x00Mold 0x00Mold 0x00Met 0x00Met 0x00Met 0x00Med 0x00Med 0x00Met 0x00Me 0x61m0x2dM0x62dM0x62dM0x63m0x0x0x0x0x0x0x0x0x0x0x02xa0x0xa0x0x6x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0x0

5. The problem of excessively long command line arguments

For a large project, on the Windows platform, command-line arguments can easily be overly long. The easiest way is to write the parameters of emcc to the file and tell emcc to read from the file through @ match. Such as:

Emcc-v @ args.txt II, C language calls functions of JS

1. Header file

Contains the emscripten.h header file, which provides methods for the C language to call JS functions.

# include

two。 Called through emscripten_run_script.

Such as:

Emscripten_run_script ("alert ('hi')")

3. Called through EM_JS/EM_ASM.

Such as:

# include EM_JS (void, call_alert, (), {alert ('hello worldview'); throw 'all done';}); int main () {call_alert (); return 0;} # include int main () {EM_ASM (alert (' hello worldview'); throw 'all done';); return 0;}

Called through macros such as EM_ASM_INT.

This is the fastest and easiest way to call, which is basically used in AWTK. Such as:

C-side code:

Static ret_t vgcanvas_web_save (vgcanvas_t * vgcanvas) {int32_t ret = EM_ASM_INT ({return VGCanvas.save ();}, 0); return ret? RET_OK: RET_FAIL;}

JS side code:

VGCanvas.save = function () {VGCanvas.ctx.save (); return true;}

* * it is also very easy to pass numerical parameters. * * for example:

C-side code:

Static ret_t vgcanvas_web_move_to (vgcanvas_t * vgcanvas, float_t x, float_t y) {EM_ASM_INT ({return VGCanvas.moveTo ($0, $1);}, x, y); return RET_OK;}

JS side code:

VGCanvas.moveTo = function (x, y) {VGCanvas.ctx.moveTo (x, y); return true;}

Passing string parameters is a bit more troublesome. Such as:

C-side code:

Static ret_t vgcanvas_web_set_text_align (vgcanvas_t * vgcanvas, const char * text_align) {EM_ASM_INT ({return VGCanvas.setTextAlign ($0);}, text_align); return RET_OK;}

JS side code:

VGCanvas.setTextAlign = function (value) {VGCanvas.ctx.textAlign = pointerToString (value); return true;}

When the string argument is passed to the JS function, the offset of the memory address obtained by the JS function needs to be decoded to generate the string object of the JS. The pointerToString function is implemented as follows:

Function pointerToString (pointer) {return pointer & & Module.UTF8ToString (pointer, 1024) | | null;}

The Module.UTF8ToString function needs to be exported in the EXTRA_EXPORTED_RUNTIME_METHODS described earlier before it can be used.

AWTK also uses binary data as a parameter, and there are no relevant examples on the Internet, so I have to look at the code and study it myself. AWTK needs to transfer bitmap data (rgba color values) to JS and then set it to the canvas. The specific approach is as follows:

VGCanvas.updateMutableImage = function (id) {let mutableImage = ImageCache.get (id); let w = mutableImage.width; let h = mutableImage.height; let size = mutableImage.width * mutableImage.height; let start = mutableImage.addr > > 2; let end = start + size; let array = Module.HEAP32.subarray (start, end); let ctx = mutableImage.getContext ('2d'); let imageData = ctx.getImageData (0,0, w, h) Let data = new Int32Array (imageData.data.buffer); for (let I = 0; I

< size; i++) { data[i] = array[i]; } ctx.putImageData(imageData, 0, 0, 0, 0, w, h); return true;} mutableImage.addr是rgba数据的地址，它是用malloc分配出来的，我看了malloc函数的实现，它就相对于Module.HEAP32的字节数偏移量。由于HEAP32是4字节数据，在作为偏移量使用时，需要右移2位： let start = mutableImage.addr >

> 2

Then obtain this data from HEAP32 through subarray:

Let array = Module.HEAP32.subarray (start, end)

It is also worth mentioning here that imageData.data is Int8Array, and you can convert it to Int32Array in the following ways:

Let imageData = ctx.getImageData (0,0, w, h); let data = new Int32Array (imageData.data.buffer)

In this way, each element is extended from 8bit to 32bit.

Let imageData = ctx.getImageData (0,0, w, h); let data = new Int32Array (imageData.data); III. JS calls the function of C

To call a C function in JS, it is usually wrapped in Module.cwrap, which needs to provide the following parameters:

Function name

Return value

Parameter list

The types of parameters and return values are:

Number

String

Array

Such as:

Awtk._onImCommit = Module.cwrap ('awtk_web_on_im_commit',' number', ['string',' number']); Awtk.onImCommit = function (text, timestamp) {return Awtk._onImCommit (text, timestamp);}

Common uses are clearly described in the documentation, so I won't repeat them here. If the argument is a callback function, it's a little more troublesome.

1. To export addFunction/removeFunction (see previous)

two。 To specify the parameter RESERVED_FUNCTION_POINTERS.

Such as:

-s RESERVED_FUNCTION_POINTERS=1000

3. Call addFunction to convert the function to a number, which is passed in as an argument.

Such as:

Widget_on (this.nativeObj, type, Module.addFunction (wrap_on_event (on_event)), ctx)

The most troublesome thing is that after the function is used up, you have to call removeFunction to remove the function from the table. There is no problem with the callback function called synchronously, but when the asynchronous function is called asynchronously, especially the asynchronous function that has been called many times, is only known in the C code, so you need to add processing in the C code. Such as:

# ifdef AWTK_WEB_JS#include # endif / * AWTK_WEB_JS*/static ret_t emitter_item_destroy (emitter_item_t* iter) {if (iter- > on_destroy) {iter- > on_destroy (iter);} # ifdef AWTK_WEB_JS EM_ASM_INT ({return TBrowser.releaseFunction ($0);}, iter- > handler); # endif / * AWTK_WEB_JS*/ memset (iter, 0x00, sizeof (emitter_item_t)); TKMEM_FREE (iter) Return RET_OK;} at this point, I believe you have a deeper understanding of "what is the AWTK WEB version of the migration method?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.