catalog:
1. Menu pop up menu
This is a component that wechat applet does not have and provides a lightweight pop-up menu that can be aroused. The sub component of menu is option.
<menu id="userMenu" onselected="menuSelect">
<option value="login">Sign in</option>
<option value="register">register</option>
</menu>The menu is written in the hml, but when the app is started, it will not be displayed and will not occupy any page space.
Menu needs to be invoked in the method, so you need to set the id attribute. Here, click the "click login / registration" text box to evoke the menu:
<text if="{{ !userInfo }}" onclick="showUserMenu" class="info_hint">
Click login/register
</text>showUserMenu() {
this.$element("userMenu").show();
}Using the show() method without parameters, the menu will pop up in the upper left corner of the page.
The show method also has an overloaded method, which can set the x-axis and y-axis offsets that pop up in the menu. X and y need to be given value type, and the unit is px.
showUserMenu() {
this.$element("userMenu").show({
x: 100,
y: 100
});
}
The selected event of the menu item is bound through the onselect attribute, event Value is the value attribute of the selected option.
menuSelect(event) {
let value = event.value;
prompt.showToast({
message: "The value of the clicked menu item is" + value,
duration: 3000
})
}
option must set the value attribute, otherwise the compilation fails. Value repetition will not report an error, but it is impossible to judge which menu item is selected. It is not recommended.
2. Toast prompt box
Hongmeng js development mode can't pass console Log () and other methods print logs (as in mac system), but debugging is inevitable when writing programs. The prompt box is a good method.
Introduce prompt module into js file:
import prompt from '@system.prompt';
Call prompt Showtoast() pop up prompt box:
prompt.showToast({
message: "Prompt information",
duration: 3000
});This method can only pass two parameters: message and duration. The pop-up position is near the bottom and middle of the page, and the word is a little small.
The source code notes indicate that the duration value is 1500 to 10000. If it is not in the range, it will be automatically changed to the boundary value.
Take another look at the Toast of wechat applet. Use Wx Showtoast pops up.
wx.showToast({
title: 'Prompt information',
duration: 3000
})
The pop-up position is in the middle of the page, and you can switch presets or customize icons.
wx.showToast({
title: 'Often go home and have a look',
duration: 3000,
icon: 'none',
image: "/icon/index1.png"
})
This icon is located strangely, but I feel that this prompt pop-up window is more obvious and more scalable.
3. dialog of prompt module
The functions requiring user confirmation are very common, such as whether to delete, order, etc. Wx is used in wechat applet Showmodal(), pop-up contents, button contents and colors can be customized, and events are captured in the success function:
wx.showModal({
title: "Tips",
content: "Are you sure to delete?",
confirmColor: "#e20a0b",
confirmText: "Yes, delete it",
cancelColor: "#777777",
cancelText: "Think again",
success: res => {
if(res.confirm) {
console.log("Delete succeeded!");
} else if(res.cancel) {
console.log("Cancel the delete operation.")
}
}
})
In Hongmeng, the showDialog() method of prompt module provides a pop-up dialog box:
prompt.showDialog({
title: "Operation tips",
message: "Are you sure to delete?",
buttons: [
{
text: "I want to delete",
color: "#e20a0b"
},
{
text: "Cancel operation",
color: "#777777"
}
],
success: res => {
prompt.showToast({
message: "Click on page" + res.index + "Buttons"
})
}
})
The dialog box also pops up at the bottom, and the buttons can be defined by themselves. After clicking the button, the success method will obtain the index value of the button and write the business logic according to the index.
It is also possible to set three buttons. This function is not available in showModal() of wechat applet.
prompt.showDialog({
title: "Operation tips",
message: "Are you sure to delete?",
buttons: [
{
text: "I want to delete",
color: "#e20a0b"
},
{
text: "Cancel operation",
color: "#777777"
},
{
text: "Additional button",
color: "#333333"
}
],
success: res => {
prompt.showToast({
message: "Click on page" + res.index + "Buttons"
})
}
})
3. dialog component
prompt.showDialog() can only pop up dialog boxes with prompt text and buttons. If you need richer modal dialog functions, Hongmeng also provides a dialog component, which is not available in wechat applets. Like menu, the dialog written in hml will not be displayed and will not occupy page space. It needs to be invoked in the method through id.
<dialog id="loginDialog">
<div class="loginDialog">
<div class="formItem">
<image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input id="phoneInput" type="number" placeholder="Please enter your mobile number" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image>
<input id="pwdInput" type="password" placeholder="Please input a password" onchange="inputPwd"></input>
</div>
<button class="inputBtn" onclick="login">Sign in</button>
</div>
</dialog>It should be noted here that "supporting single sub component" in the official document means that there can only be one direct sub component in the dialog, that is, a div needs to be used to cover the content.
Similarly, use the show() method to find the dialog box element according to its id. The show() method of the dialog box is not overloaded and will pop up at the bottom of the page. The size of the dialog depends on the size of the sub component div, which can be styled.
menuSelect(event) {
let value = event.value;
if ("login" == value) {
this.phone = "";
this.pwd = "";
this.$element("loginDialog").show();
} else if ("register" == value) {
this.phone = "";
this.pwd = "";
this.$element("registerDialog").show();
}
},
You can close it with the close() method.
this.$element("registerDialog").close();Attach the code of this page. The background function has built its own Spring Boot server for interaction. The next part will explain the form components:
hml:
<!-- my -->
<div class="myPage">
<div class="userInfo">
<image src="{{ userInfo && userInfo.avatar != '0' ? userInfo.avatar : (imgUrl + 'user.png')}}"></image>
<div class="info_desc">
<text if="{{ !userInfo }}" onclick="showUserMenu" class="info_hint">
Click login/register
</text>
<text if="{{ userInfo }}" class="info_name">
{{ userInfo.nickname ? userInfo.nickname : userInfo.username }}
</text>
<text if="{{ userInfo }}" class="info_detail">
{{ userInfo.age }} {{ userInfo.gender == 1 ? 'male' : (userInfo.gender == 2 ? 'female' : 'Gender confidentiality') }}
</text>
</div>
</div>
<menu id="userMenu" onselected="menuSelect">
<option value="login">Sign in</option>
<option value="register">register</option>
</menu>
<dialog id="loginDialog">
<div class="loginDialog">
<div class="formItem">
<image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input id="phoneInput" type="number" placeholder="Please enter your mobile number" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image>
<input id="pwdInput" type="password" placeholder="Please input a password" onchange="inputPwd"></input>
</div>
<button class="inputBtn" onclick="login">Sign in</button>
</div>
</dialog>
</div>
<!-- my end -->css:
/*my*/
.userInfo {
width: 92%;
height: 240px;
margin: 20px 0 20px 0;
border-radius: 30px;
box-shadow: 5px 5px 15px #bbbbbb;
background-color: #eeeeee;
display: flex;
align-items: center;
}
.userInfo>image {
margin: 0 40px 0 40px;
width: 160px;
height: 160px;
border-radius: 90px;
object-fit: contain;
}
.info_desc {
height: 200px;
margin-right: 20px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.info_hint {
font-size: 48px;
font-weight: bold;
color: #333333;
}
.info_name {
font-size: 40px;
font-weight: 600;
height: 100px;
color: #333333;
}
.info_detail {
font-size: 34px;
color: #666666;
}
.loginDialog {
width: 80%;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.formItem {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.formItem>image {
width: 70px;
height: 70px;
margin: 0 10px 0 10px;
}
input {
flex: 1;
}
.inputBtn {
width: 200px;
height: 70px;
}js: (omit the data part)
// Pop-up Menu
showUserMenu() {
this.$element("userMenu").show();
},
// Menu selection
menuSelect(event) {
let value = event.value;
if ("login" == value) {
this.phone = "";
this.pwd = "";
this.$element("loginDialog").show();
} else if ("register" == value) {
this.phone = "";
this.pwd = "";
// this.$element("registerDialog").show();
}
},
// Mobile phone number input box
inputPhone(e) {
this.phone = e.value;
},
// Password input box
inputPwd(e) {
this.pwd = e.value;
},
// Sign in
login() {
fetch.fetch({
url: this.url + "/litemall/user/login?phone=" + this.phone + "&pwd=" + this.pwd,
responseType: "json",
success: res => {
let data = JSON.parse(res.data);
if (0 != data.code) {
prompt.showToast({
message: data.msg,
duration: 3000
})
} else {
this.userInfo = data.data;
this.$element("loginDialog").close();
}
}
})
}
Login success effect:
Author: Chris