基于鸿蒙《查询天气》项目中遇到的问题集合

查询天气项目中遇到的问题及解决措施

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

本篇文章是作者编写鸿蒙项目时遇到的问题并解决方法，如果遇到以下问题可以参考解决问题。

1.在构建类的时候

问题：没有办法传入数据：类的变量名字没有与传入的数据名字一致，导致数据识别不出来

解决：因此，要保证传入数据的名字和变量的名字一致。

2.获取天气的数据，使用异步获取时，为什么不直接使用request.then()？

request.request(url) 表示调用了 request 对象的 request 方法，并且传入了 url 参数。

这个方法返回的 result 应该是一个 Promise 对象，因此可以使用 .then() 方法来处理这个 Promise。

request.then() 这种写法是不正确的，因为 .then() 是 Promise 对象的方法，而不是 request 对象的方法。

3.插入背景图片

要使用stack，不能直接使用image或者background()

Stack(){
 Image($r('app.media.backgroud'))
 .width("100%")
 .height("100%")
   .opacity(0.5) }}

4.如何将页面城市变化时，表头的城市也跟着变化（即黑色的和棕色城市一起改变）

如图：

解决办法：

根据城市编号，调用getWeather方法，然后用所需要的集合进行接受，最后得到需要取得的结果
比如需要城市名字：cityName=result[i].forecasts[0].city
除此之外，当滑动时需要获取城市名称的编号

.onChange((index:number)=>{
  this.cityIndex=index
})

因为直接影响该行代码

Text(this.cityNameList[this.cityIndex])

这样就可以根据名称的编号再对棕色城市进行改变

5.为什么添加完成之后不能返回了？

原因一：因为没有在完成按钮之后添加点击事件

Button("完成").backgroundColor("").fontSize(26)
  .onClick(()=>{
    router.back({
      url:"pages/Index",
      params:{
        Codes:this.cityCodeList
      }
    })
  })

原因二：数据传输时，出现了问题。比如完成按钮后的点击事件传的参数是Codes那么在主页面接收也应该是Codes

如以下代码：

onPageShow() {
 let params = router.getParams()
  if (params) {
    this.cityCodeList = params["Codes"]
    this.cityWeatherList = []
    this.cityNameList = []
    this.initData()
  }
}

保证传入传出的一致性

6.两个text之间怎么空行

1.使用

组件：Blank组件是一个没有边框、背景和内容的占位组件，可以用来增加空间，从而实现空行的效果。

Text("第一行文本")
Blank().height(20) // 20px 的空白高度
Text("第二行文本")

2.使用

使用组件的margin属性：通过给text组件的下方添加外边距（margin），也可以实现空行的效果。

Text("第一行文本").margin({ bottom: 20 }) // 20px 的外边距
Text("第二行文本")

3.使用

使用column或row布局：将每个text组件放在单独的row或column内，并通过布局height属性来控制空行大小。

Column() {
  Text("第一行文本")
}.height("auto")

Column() {
  // 空行大小通过这个Column的高度控制
}.height(20)

Column() {
  Text("第二行文本")
}.height("auto")

4.使用

Line组件：如果需要在文本之间添加分隔线，可以使用Line组件，并设置其Line属性的长宽高来实现空行。

Text("第一行文本")
Line().width("100%").height(20) // 20px 的分隔线高度
Text("第二行文本")

5.调整

text组件的fontSize属性：如果只是需要视觉上的空行，可以通过调整字体大小来模拟空行。

Text("第一行文本")
Text("").fontSize(20) // 空的Text组件，字体大小为20px
Text("第二行文本")