文档名称 文档密级

1 Development Tool Installation

1. Install Visual Code.

2. Install the Macle development plug-in.
3. Install the Macle simulator.

1.1 Installing the Visual Code

Download the Visual Code from the official website and install it,
or decompress the [Link] file and install
it.

1.2 Installing the Macle Plug-in

After decompressing the Macle_22.9.0_DevSuite_IDE.zip file,

install the decompressed vsix file in Visual Code.

1.3 Installing the Simulator

Window：
Extract the files from [Link] to
C:\Users\yourname \.vscode\extensions\ [Link]-
miniprogram-tools-22.9.0 \src\utils\simulator\windows Directory
Note: 1）22.9. 0 indicates the plug-in version. Replace it with the
actual version.

2025-3-26 华为保密信息,未经授权禁止扩散 第 1 页, 共 16 页
 文档名称 文档密级

2) If the corresponding directory cannot be found, create a

simulator\windows directory.

Mac：
Extract the files from [Link] to
~/.vscode/extensions/[Link]-miniprogram-tools-
22.9.0/src/utils/simulator/mac Directory

2 Getting Started with Development

2.1 Creating a Project

Follow these steps to create a helloword project

After the project is created, the project structure is as follows:

2025-3-26 华为保密信息,未经授权禁止扩散 第 2 页, 共 16 页
 文档名称 文档密级

The entire project contains an index page, which contains the

following files:
[Link] page configuration file (Refer to the help file, Applet -
> Page Configuration)
[Link] home page label file
[Link] page script file
[Link] page style file
Open the [Link] file and use {{motto}} to display the
contents of the motto variable
<!--[Link]-->
<view class="container">
<text>{{motto}}</text>
</view>

Open the [Link] file. The value of the motto variable in data on
the page is hello world.
// [Link]
Page({
2025-3-26 华为保密信息,未经授权禁止扩散 第 3 页, 共 16 页
 文档名称 文档密级

data: {
motto: 'Hello World'
},
onLoad(options) {},
onReady() {},
onShow() {},
onHide() {},
onUnload() {},
onShareAppMessage() {
return {
title: ''
};
}
});
To run the simulator to view the page effect, perform the
following steps:

2025-3-26 华为保密信息,未经授权禁止扩散 第 4 页, 共 16 页
 文档名称 文档密级

The simulator runs as follows:

2025-3-26 华为保密信息,未经授权禁止扩散 第 5 页, 共 16 页
 文档名称 文档密级

2.2 Publishing Applets

Packing Applets with Plug-in Tools

After the packaging is successful, the resource administrator is

displayed in the lower right corner.

Click this button to open the app release directory：

C:\Users\yourname\.macle\target\compile\helloword\app

2025-3-26 华为保密信息,未经授权禁止扩散 第 6 页, 共 16 页
 文档名称 文档密级

2.3 Basic Functions of Applets

We add a button, click it, and change hello world to hello John!
We add a button to [Link] and use bindtap to bind a function
called sayHello.
<!--[Link]-->
<view class="container">
<view>
<text>{{motto}}</text>
</view>
<view>
<button bindtap='sayHello'>Click</button>
</view>
</view>
Add the sayHello method to the [Link] file. The method is to
change the value of motto to Hello John.
// [Link]
Page({
data: {
motto: 'Hello World'
},
onLoad(options) { },
onReady() { },
onShow() { },
onHide() { },
onUnload() { },
onShareAppMessage() {
return {
title: ''
};
},
sayHello() {
[Link]('Hello John');
[Link]({
motto: 'Hello John!'
});
}
});

2025-3-26 华为保密信息,未经授权禁止扩散 第 7 页, 共 16 页
 文档名称 文档密级

Run the simulator and click Click. The text has changed：

The [Link] method is added to the code. How to view the

logs generated by the method for commissioning? Click the icon in
the upper right corner of the simulator to open DevTools.

2.4 Applet Advanced Functions

A game diamond to buy small procedures to demonstrate,

introduced some advanced features of the demonstration.
The following knowledge points are used:
1. List rendering (For details, see "MAML Syntax Reference\List
Rendering" in the development help.)
2. Bind user-defined attributes and events. For details, see
"Events" in the development help.
3. Conditional rendering (For details, see "MAML Syntax
Reference\List Rendering" in the development help.)

2025-3-26 华为保密信息,未经授权禁止扩散 第 8 页, 共 16 页
 文档名称 文档密级

4. Network request (For details, see "Applet API\Network" in the

development help.)

The running UI of the applet is as follows. Users can select

different prices of diamonds and purchase them.

2025-3-26 华为保密信息,未经授权禁止扩散 第 9 页, 共 16 页
 文档名称 文档密级

[Link]
<!--[Link]-->
<view class="container">
<view class="home">
<view class="content">
<p>Amount</p>
<view class="amount">
<view bind:tap="waresSelect" data-
itemid="{{[Link]}}" ma:for="{{waresList}}" ma:key="id"
class="{{[Link]}}">
<view class="tips">
<image ma:if="{{[Link] ==
1}}" src="../../res/images/diamonds_1.png" />
<image ma:elif="{{[Link]
== 2}}" src="../../res/images/diamonds_2.png" />
<image ma:elif="{{[Link]
== 3}}" src="../../res/images/diamonds_3.png" />
<image ma:elif="{{[Link]
== 4}}" src="../../res/images/diamonds_4.png" />
<image ma:elif="{{[Link]
== 5}}" src="../../res/images/diamonds_5.png" />
<image ma:elif="{{[Link]
== 6}}" src="../../res/images/diamonds_6.png" />
<image ma:elif="{{[Link]
== 7}}" src="../../res/images/diamonds_7.png" />
<image ma:elif="{{[Link]
== 8}}" src="../../res/images/diamonds_1.png" />
</view>
<view class="dscription">
<view
class="bg1">{{ [Link] }}</view>
<view class="bg2
fn2">{{ [Link] }}{{ [Link] }}</view>
</view>
</view>
</view>
</view>
<view class="footer" id="foot">
<button class="c"
ma:if="{{selectedWaresInfo !== undefined}}" type="button"
@click="createOrder">Recharge:
{{ [Link] }}
{{ [Link] }}
2025-3-26 华为保密信息,未经授权禁止扩散 第 10 页, 共 16 页
 文档名称 文档密级

</button>
<button class="b" ma:else type="button"
id="buy">
Recharge
</button>
<view class="p">[Link]</view>
</view>
</view>
</view>

[Link]
// [Link]
Page({
data: {
baseUrl: '[Link]
selectedWaresInfo: undefined,
waresList: [
{
id: 1,
imageType: 1,
price: 1000,
currency: "USD",
title: "diamond_1",
className: 'per perb'
},
{
id: 2,
imageType: 2,
price: 2000,
currency: "USD",
title: "diamond_2",
selected: false,
className: 'per perb'
},
{
id: 3,
imageType: 3,
price: 5000,
currency: "USD",
title: "diamond_3",
selected: false,
className: 'per perb'

2025-3-26 华为保密信息,未经授权禁止扩散 第 11 页, 共 16 页
 文档名称 文档密级

},
{
id: 4,
imageType: 4,
price: 10000,
currency: "USD",
title: "diamond_4",
selected: false,
className: 'per perb'
},
{
id: 5,
imageType: 5,
price: 20000,
currency: "USD",
title: "diamond_5",
selected: false,
className: 'per perb'
},
{
id: 6,
imageType: 6,
price: 50000,
currency: "USD",
title: "diamond_6",
selected: false,
className: 'per perb'
},
{
id: 7,
imageType: 7,
price: 100000,
currency: "Ks",
title: "diamond_7",
selected: false,
className: 'per perb'
},
],
},
onLoad(options) { },
onReady() { },
onShow() { },
onHide() { },
2025-3-26 华为保密信息,未经授权禁止扩散 第 12 页, 共 16 页
 文档名称 文档密级

onUnload() { },
onShareAppMessage() {
return {
title: ''
};
},
waresSelect(e) {
let itemid = [Link];
let selectedItem;
[Link]((el) => {
if ([Link] == itemid) {
selectedItem = el;
[Link] = 'per per-act';
} else {
[Link] = 'per perb';
}
});
[Link]({
selectedWaresInfo: selectedItem,
waresList: [Link]
});
},
buyGoods() {
if(![Link]){
[Link]({title:"please select a ware"});
return;
}
[Link]({
url: [Link] + '/create/order',
method: 'POST',
data: {
title: [Link],
amount: [Link]
},
success: (res) => {
[Link]([Link]);
}
});
},
startPay(rawRequest){
[Link]({
rawRequest: rawRequest,
success: (res) => {
2025-3-26 华为保密信息,未经授权禁止扩散 第 13 页, 共 16 页
 文档名称 文档密级

[Link]({title:"res = " + [Link]});

}
});
}
});

[Link]
Omitted. For details, see the code.

[Link]
The <view> tag is used throughout the page instead of the
<div> tag of H5, and the syntax related to list rendering and
conditional rendering is used.

2.4.1 List Rendering

Before we talk about data binding, let's talk about list

[Link] rendering uses the ma:for syntax as follows:
<view bind:tap="waresSelect" data-itemid="{{[Link]}}"
ma:for="{{waresList}}" ma:key="id" class="{{[Link]}}">
……………
</view>
Bind an array on a component using the ma:for control property
to render the component repeatedly using the data for the items
in the array. The default subscript variable name of the current
item in the default array is index, and the default variable name
of the current item in the array is item. Ma:key needs to be
specified. Otherwise, an error will be reported during
compilation.

2.4.2 Custom Attribute and Event Bindings

With list rendering, we get a list of diamonds. We'll see that there
are several other attributes in the view.
data-itemid="{{[Link]}}"
We bind a custom attribute itemid to the [Link] of the data.
We also found another code snippet
bind:tap="waresSelect"

2025-3-26 华为保密信息,未经授权禁止扩散 第 14 页, 共 16 页
 文档名称 文档密级

Bind the tap event of the current view to the waresSelect

method in [Link].
waresSelect(e) {
let itemid = [Link];
let selectedItem;
[Link]((el) => {
if ([Link] == itemid) {
selectedItem = el;
[Link] = 'per per-act';
} else {
[Link] = 'per perb';
}
});
[Link]({
selectedWaresInfo: selectedItem,
waresList: [Link]
});
},

In the wareSelect method, we can use the following statement to

obtain the ID of the diamond product currently clicked, and then
perform other operations.
let itemid = [Link];

2.4.3 Conditional Rendering

Conditional renderingUse ma:if, ma:elif, ma:else to conditionally

render
<image ma:if="{{[Link] == 1}}"
src="../../res/images/diamonds_1.png" />
<image ma:elif="{{[Link] == 2}}"
src="../../res/images/diamonds_2.png" />
The image tag is used to replace the img tag of H5. For details
about other tags, see the help document.

2.4.4 Network Requests

Network requests use the applet's [Link] API.

2025-3-26 华为保密信息,未经授权禁止扩散 第 15 页, 共 16 页
 文档名称 文档密级

The network request order placement logic is implemented in

the buyGoods file in the [Link] file.
buyGoods() {
if(![Link]){
[Link]({title:"please select a ware"});
return;
}
[Link]({
url: [Link] + '/create/order',
method: 'POST',
data: {
title: [Link],
amount: [Link]
},
success: (res) => {
[Link]([Link]);
}
});
},
startPay(rawRequest){
[Link]({
rawRequest: rawRequest,
success: (res) => {
[Link]({title:"res = " + [Link]});
}
});
}

2025-3-26 华为保密信息,未经授权禁止扩散 第 16 页, 共 16 页