Get started making a Huawei Hongmeng Watch app 2-Add a button to the homepage and respond to click events

Continued from the previous article:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356376262560775&fid=0101303901040230869
Source code warehouse address:https://gitee.com/zhaoquan/harmonyoswatchdemo

Add a button to the homepage and respond to click events

<!-- index.hml -->
<div class="container">
    <text class="title">
        Hello {{title}}
    </text>
    <input type="button" class="btn" value="点我" onclick="clickAction"></input>
</div>

In the default code generated when index.hml is created, add: <input type="button" class="btn" value="点我" onclick="clickAction"></input>

---

/*index.css*/
.container {
    flex-direction: column;
/*    display: flex;*/
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.btn{
    width:200px;
    height:50px;
}

Modify the style of the container in the default code generated when the index.css page is created:

• No longer use flexible layout display: flex, change display: flex; comment and change to flex-direction: column; so that all components in the container are arranged vertically;

• Add btn style: .btn{width:200px;height:50px;}

---

//index.js
export default {
    data: {
        title: 'World'
    },
    clickAction(){
        console.log("我被点击了")
    }
}

---

Start debug

The first time I started the debug, it seemed like I was going to download something. I got an error message here. I didn’t have a screenshot at the time. I clicked a button in the lower right corner, and then windows gave a security reminder. If I want to connect to the Internet, I agree. Debug starts the Simulator (the simulator is not the same thing as the previewer).

After each startup, there will be a pop-up box as shown in the figure below, just click OK (the two figures below illustrate the two positions to start Debug'entry').

Start remote virtual device

Previewer, simulator, remote virtual device

• Previewer entrance: View -> Tool Windows -> Previewer (you need to enter the specific page to edit the code, and then open the menu to display Previewer)
• Simulator: Entry 1: Run -> Debug'entry', Entry 2: View -> Tool Windows -> simulator (you need entry 1 to execute successfully once)
• Remote virtual device: Tools -> HVD Manager (pay attention to the usage time limit)

Link to the next article:
Get started with a Huawei Hongmeng Watch Application 3-Add a training page and enable it to jump to the main page: https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid =0101303901040230869

---

Original link:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356408634880779&fid=0101303901040230869
Author: chatterzhao