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; }});