#2020征文-手机#鸿蒙js开发模式五：fetch请求心知天气

六合李欣

发布于 2021-1-18 15:32

浏览

2收藏

#2020征文-手机#鸿蒙js开发模式五：fetch请求心知天气-鸿蒙开发者社区

1.网络访问权限配置

{
  "app": {
    "bundleName": "com.example.jxjs1",
    "vendor": "example",
    "version": {
      "code": 1,
      "name": "1.0"
    },
    "apiVersion": {
      "compatible": 3,
      "target": 4,
      "releaseType": "Beta1"
    }
  },
  "deviceConfig": {
    "default": {
      "network": {
        "usesCleartext": true,
        "securityConfig": {
          "domainSettings": {
            "cleartextPermitted": true,
            "domains": [
              {
                "subDomains": true,
                "name": "api.seniverse.com"
              },
              {
                "subDomains": true,
                "name": "apis.juhe.cn"
              },
              {
                "subDomains": true,
                "name": "jv7b4a.natappfree.cc"
              }
            ]
          }
        }
      }
    }
  },
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "package": "com.example.jxjs1",
    "name": ".MyApplication",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "name": "com.example.jxjs1.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "鸿蒙js开发模式一",
        "type": "page",
        "launchType": "standard"
      }
    ],
    "js": [
      {
        "pages": [
          "pages/weather/weather",
          "pages/first/first",
          "pages/one/one",
          "pages/index/index"

        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }
    ]
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.

2.js业务逻辑部分导入fetch模块

//导入鸿蒙的网络请求模块fetch
import  fetch from  '@system.fetch';
export default {
    data: {
        title: 'World',
        currentTime:'',
        text:"",
        winfo:""
    },
    onInit() {
        //发起对心知天气服务器的网络请求
        fetch.fetch({
            url:"https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c",
            responseType:"json",
            success:(resp)=>
            {
                //JSON.parse(字符串)转换成json数据格式
                let  weatherInfo=JSON.parse(resp.data);
                this.currentTime=weatherInfo.results[0].last_update;
                this.text=weatherInfo.results[0].now.text;
                this.winfo=weatherInfo.results[0].now.temperature;
            }
        });

    }

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

3.页面视图

<div class="container">
  <div class="box1">
      <text  class="title">当前时间：{{currentTime}}</text>
  </div>
    <div class="box1">
        <text class="title">当前天气:{{text}}</text>
    </div>
    <div class="box1">
        <text class="title">当前温度:{{winfo}}</text>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

4.样式部分

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     background-color: #ff6a06;
    width: 100%;
    height: 1200px;
}
.title {
    font-size: 50px;
    text-align: center;
    width: 300px;
    height: 200px;
    color:green;

}
.box1{
    width: 100%;
    height: 20%;
    border-bottom: 5px  solid  powderblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.