【05】鸿蒙实战应用开辟-点击事件测试-arkui常用组件进度条 (Progress)按钮 ...

【05】鸿蒙实战应用开辟-点击事件测试-arkui常用组件进度条 (Progress)按钮 (Button)显示图片 (Image)切换按钮 (Toggle)单选框 (Radio)测试-全过程实战项目分享-从零开辟到上线-优雅草卓伊凡

章节设定

点击事件测试-arkui常用组件进度条 (Progress)按钮 (Button)显示图片 (Image)切换按钮 (Toggle)单选框 (Radio)测试
开辟背景

没有背景，预备活动，现在是
实战开始

调试换previewer调试

开辟前我们调试可以使用previewer调试，这个不是真机模拟器，有区别，真机很占内存，必要团体调试的时间用到比较好，

看也能很好的打开

在华为应用开辟过程中，真机调试和 Previewer 调试是两种常用的调试方式，它们各自有不同的特点，以下为你具体先容两者的区别：
运行情况

• 真机调试：是将应用步伐部署到真实的华为设备上举行测试。真机具有真实的硬件情况，包括处置惩罚器、内存、屏幕、传感器等，能完全模拟用户实际使用场景。例如，在测试具有拍照功能的应用时，真机可以调用真实的摄像头硬件举行拍摄操纵。
  
• Previewer 调试：是在开辟工具（如 DevEco Studio）内的模拟器情况中运行应用。Previewer 模拟了华为设备的部分特性和界面，但它是基于软件模拟的，并非真实的硬件情况。固然可以模拟一些基本的操纵和显示效果，但在某些硬件相关的功能上可能存在一定的局限性。
  

调试功能

• 真机调试：
  

• 
  
  
  
  • 硬件功能测试：可以全面测试应用与设备硬件的交互情况，如使用指纹识别、NFC 功能、蓝牙连接等。例如，对于一款支持指纹解锁的支付应用，真机调试能够正确验证指纹识别功能的正确性和安全性。
    
  • 性能测试：能更正确地评估应用在真实设备上的性能体现，包括应用的启动时间、内存占用、电池消耗等。由于真机的硬件资源是有限的，通过真机调试可以发现应用在实际运行中可能出现的性能瓶颈。
    
  • 兼容性测试：可以测试应用在不同型号、不同版本的华为设备上的兼容性。不同的华为设备可能具有不同的屏幕分辨率、处置惩罚器性能等，真机调试能够确保应用在各种设备上都能正常显示和运行。
    
  
  

• Previewer 调试：
  

• 
  
  
  
  • 快速界面预览：提供快速的界面预览功能，开辟者可以在不连接真机的情况下，快速查看应用界面的布局和样式。当对界面举行修改时，Previewer 可以实时更新显示效果，大大提高开辟效率。
    
  • 基本交互模拟：可以模拟一些基本的用户交互操纵，如点击、滑动、输入等。通过这些模拟操纵，开辟者可以初步验证应用的交互逻辑是否正确。
    
  • 多设备模拟：支持模拟不同型号和尺寸的华为设备，方便开辟者查看应用在不同设备上的显示效果。但这种模拟只是基于软件的近似模拟，与真机的实际显示效果可能存在一定的差异。
    
  
  

调试效率

• 真机调试：部署应用到真机上必要一定的时间，尤其是在设备性能较低或者应用包较大的情况下，部署时间可能会更长。别的，真机调试还必要连接设备、安装应用等步调，相对来说调试效率较低。但一旦应用部署到真机上，就可以举行全面而正确的测试。
  
• Previewer 调试：启动速率快，能够快速展示应用的界面和基本交互效果。开辟者可以在短时间内对界面举行多次修改和预览，调试效率较高。但由于其是模拟情况，对于一些复杂的功能和性能问题，可能无法提供正确的测试效果。
  

调试成本

• 真机调试：必要拥有真实的华为设备，对于开辟者来说可能必要购买多台不同型号的设备，以确保应用的兼容性。别的，真机调试过程中还可能会消耗设备的电量和存储空间。
  
• Previewer 调试：不必要额外的硬件设备，只必要在开辟工具中启动 Previewer 即可举行调试。因此，调试成本较低，尤其适合在开辟初期举行快速的界面调试和功能验证。
  

如今我们对常用组件来测试下，现在卓伊凡看了官方文档这些组件应该会比较常用，因此我们实验

点击事件测试

我们写一个点击事件

1. // xxx.ets
2. @Entry
3. @Component
4. struct ButtonCase1 {
5.   pathStack: NavPathStack = new NavPathStack();
7.   @Builder
8.   PageMap(name: string) {
9.     if (name === "first_page") {
10.       pageOneTmp()
11.     } else if (name === "second_page") {
12.       pageTwoTmp()
13.     } else if (name === "third_page") {
14.       pageThreeTmp()
15.     }
16.   }
18.   build() {
19.     Navigation(this.pathStack) {
20.       List({ space: 4 }) {
21.         ListItem() {
22.           Button("First").onClick(() => {
23.             this.pathStack.pushPath({ name: "first_page"})
24.           })
25.             .width('100%')
26.         }
28.         ListItem() {
29.           Button("Second").onClick(() => {
30.             this.pathStack.pushPath({ name: "second_page"})
31.           })
32.             .width('100%')
33.         }
35.         ListItem() {
36.           Button("Third").onClick(() => {
37.             this.pathStack.pushPath({ name: "third_page"})
38.           })
39.             .width('100%')
40.         }
41.       }
42.       .listDirection(Axis.Vertical)
43.       .backgroundColor(0xDCDCDC).padding(20)
44.     }
45.     .mode(NavigationMode.Stack)
46.     .navDestination(this.PageMap)
47.   }
48. }
50. // pageOne
51. @Component
52. export struct pageOneTmp {
53.   pathStack: NavPathStack = new NavPathStack();
55.   build() {
56.     NavDestination() {
57.       Column() {
58.         Text("first_page")
59.       }.width('100%').height('100%')
60.     }.title("pageOne")
61.     .onBackPressed(() => {
62.       const popDestinationInfo = this.pathStack.pop() // 弹出路由栈栈顶元素
63.       console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
64.       return true
65.     })
66.     .onReady((context: NavDestinationContext) => {
67.       this.pathStack = context.pathStack
68.     })
69.   }
70. }
72. // pageTwo
73. @Component
74. export struct pageTwoTmp {
75.   pathStack: NavPathStack = new NavPathStack();
77.   build() {
78.     NavDestination() {
79.       Column() {
80.         Text("second_page")
81.       }.width('100%').height('100%')
82.     }.title("pageTwo")
83.     .onBackPressed(() => {
84.       const popDestinationInfo = this.pathStack.pop() // 弹出路由栈栈顶元素
85.       console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
86.       return true
87.     })
88.     .onReady((context: NavDestinationContext) => {
89.       this.pathStack = context.pathStack
90.     })
91.   }
92. }
94. // pageThree
95. @Component
96. export struct pageThreeTmp {
97.   pathStack: NavPathStack = new NavPathStack();
99.   build() {
100.     NavDestination() {
101.       Column() {
102.         Text("third_page")
103.       }.width('100%').height('100%')
104.     }.title("pageThree")
105.     .onBackPressed(() => {
106.       const popDestinationInfo = this.pathStack.pop() // 弹出路由栈栈顶元素
107.       console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))
108.       return true
109.     })
110.     .onReady((context: NavDestinationContext) => {
111.       this.pathStack = context.pathStack
112.     })
113.   }
114. }

复制代码

另外我们可以直接只调试本页面，看到效果非常不错

以上代码直接就实现了 ，如许想起来 能做东西的方法着实太多了，关键我并没有新建这3个页面，本文没写完 时间不敷了， 明天再来更新 我先发布
ArkUI单选框 (Radio)组件测试

ArkUI单选框 (Radio)组件测试

ArkUI单选框 (Radio)组件测试


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。