In the process of application development, the experience of some effects achieved by pure front-end H5 is poor, so developers will choose corresponding native UI modules to replace them. The performance and experience of native modules are good, but the current problem is that interface customization is poor, which cannot meet the needs of 100%. To this end, combining the performance and experience of native modules with the flexibility of front-end development, APICloud has introduced a pure translation mode UI engine.

Note: pure translation mode UI engine document view link https://docs.apicloud.com/UI-…

Pure translation mode UI engine and ordinary UI class module use process, the path of small program UI components into the module method, module parsing load after the display of small program UI page. At present, APICloud official (website: www.apicloud.com/) has provided several commonly used small program UI component modules in the module Store, developers can directly download to local use, convenient to modify the style effect inside. Choose the syntax of small program, can let the majority of developers familiar with small program development faster start, quickly develop the desired UI effect.

The specific process of using the UI engine in pure translation mode is as follows

Add the UITemplate module

As with other modules, you first need to add the UITemplate module to the console module

Two, add applets UI components

01 Small program package structure and directory

Before using the applet UI module, we need to understand the structure of the applet package, as shown in the figure below, a small package contains app.json, app.wxss, app.js and other files, you can do some global configuration in these files, a small package can contain multiple applet UI components, These UI components need to be configured in the app.json file. Visit the official program development of WeChat documentation for more details https://mp.weixin.qq.com/debu… forum.php? mod=attachment&aid=MzI2OTV8YzRmNDgzY2J8MTU0MzM4ODQ2MHwxNzUwMjB8NTI0OTQ%3D&noupdate=yes

App. Json file simple configuration: {” pages “: [” pages/uitalertview/alertview”, “pages/uitconfirmview/confirmview”]}

An applet UI page consists of four files with the same file name but different extension. forum.php? mod=attachment&aid=MzI2OTZ8ODZlMTJkYWF8MTU0MzM4ODQ2MHwxNzUwMjB8NTI0OTQ%3D&noupdate=yes

02 Adding applets UI components

Developers can develop their own small program UI module, also can directly go to the module Store to find the official small program UI module, download to the local, put it into the code package inside the corresponding directory for use. forum.php? mod=attachment&aid=MzI2OTd8YjU2OGNiZTJ8MTU0MzM4ODQ2MHwxNzUwMjB8NTI0OTQ%3D&noupdate=yes

03 Run small program UI module

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

Function apiReady () {var UITemplate = api.require(‘UITemplate’); var path = ‘widget://uitemplate’; UITemplate.init({

path: path }); }

Display applets UI components using the openView method:

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 warm tips’}, MSG: {content: ‘account balance is insufficient, red envelope function can not be used! ‘}, buttons: [{content: ‘return ‘, style: ‘color: #000;’},{content: ‘top-up’}}}}], function (ret, err) {if (ret && ‘buttonClick’ = = ret. Type) {

UITemplate.closeView({name: ‘confirm’});

Var index = ret.buttonIndex; }});