Official reveal! Compatible with iOS, Android, WeChat applet UI engine

In the process of application development, some effects use pure front-end h5 to achieve a poor experience. For this reason, developers will choose corresponding native UI modules to replace them. The performance and experience of native modules are good, but one of the current problems is that the interface can be customized. Poor, can not meet the demand 100%. To this end, combined with the performance and experience of native modules and the flexibility of front-end development, APICloud launched a UI engine in pure translation mode, and released it at the "Mobile Technology Innovation in the AI ​​Era" conference held by APICloud and Geekbang Technology. This new product. Note: View the link of the UI engine documentation in pure translation mode https://docs.apicloud.com/UI-templet/UI-templet-api

The UI engine in pure translation mode is the same as the normal UI class module usage process. The path of the UI component is passed into the module method, and the applet UI page is displayed after the module is parsed and loaded. At present, the official APICloud (website: https://www.apicloud.com/) has provided several commonly used applet UI component modules in the module store. Developers can directly download them for local use, which is convenient for modifying the style effects inside. . Choosing the syntax of the applet allows developers who are familiar with applet development to get started faster and develop the desired UI effect quickly. The specific usage process of the UI engine in pure translation mode is as follows:

1. Add UITemplate module

Like using other modules, you first need to add UITemplate module in the console module, as shown in the figure:

1.png

2. Add applet UI component

01 applet package Structure and directory introduction

Before using the applet UI module, we need to understand the structure of the applet package. As shown in the figure below, a applet package contains files such as app.json, app.wxss, app.js, etc., and you can do some global operations in these files. configuration, a small program package can contain multiple small program UI components, these UI components need to register the configuration in the app.json file. For more details, visit the official WeChat applet development documentation https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html 2 1.png 

Simple configuration of the app.json file:

{
  "pages": [
    "pages/uitalertview/alertview",
    "pages/uitconfirmview/confirmview"
  ]
}

And a applet UI page consists of four files, their file names are the same, but the extension is different. 2. 1.1.png 02Add 



applet UI components

Developers can develop their own applet UI modules, or they can directly go to the module store to find the official applet UI modules, download them locally, and place them in the corresponding directory in the code package use below. Two 2.png 

03 Running the applet UI module

Here we take the use of the custom loader as an example, add the UITemplate module, then compile the custom loader, download and install it on the mobile phone.

Call the initialization method of the UITemplate module on the page, and pass in the root directory where the applet package is located:

function apiready() {
    var UITemplate = api.require('UITemplate');
    var path = 'widget://uitemplate';
    UITemplate.init({
        path: path
    });
}

Use the openView method to display the applet UI components:

var UITemplate = api.require ("UITemplate");
UITemplate.openView({
    name: 'confirm',
    url: 'pages/uitconfirmview/confirmview',
    rect: {
        x: 0,
        y: 0,
        h: 'auto',
        w: 'auto'
    } ,
    level: 'alert',
    data: {
        pageParam: {
            title: { content: 'APICloud Tips' },
            msg: { content: ' The account balance is insufficient, the red envelope function cannot be used!' },
            buttons: [{ content: 'return', style: 'color: #000;' },{ content: 'recharge' }]
        }
    }
},function(ret,err){
    if(ret && 'buttonClick' == ret .type ){
        UITemplate.closeView({name: 'confirm'});

        // Here you can fill in the callback code logic
        var index = ret. buttonIndex;
    }
});

    // Here you can fill in the callback code logic
    var index = ret .buttonIndex;
}
}); Special note: At present, the module engine is not yet adapted to the Android side, and it is expected to be adapted before January 15th. Welcome to experience it!