鸿蒙js开发模式3 鸿蒙js开发模式下的fetch网络请求数据原创

lsfzzf

发布于 2021-1-19 00:54

浏览

2收藏

效果图：

鸿蒙js开发模式3 鸿蒙js开发模式下的fetch网络请求数据-鸿蒙开发者社区

1、配置网络访问权限

{
  "app": {
    "bundleName": "com.example.hmjs",
    "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"
              }
            ]
          }
        }
      }
    }
  },
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    "package": "com.example.hmjs",
    "name": ".MyApplication",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry"
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "name": "com.example.hmjs.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "鸿蒙js开发模式",
        "type": "page",
        "launchType": "standard"
      }
    ],
    "js": [
      {
        "pages": [
          "pages/weather/weather",
          "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.

2、页面视图及样式

<div class="pagediv">
    <div class="pagediv1">
        <text class="t1">天气：{{weather}}</text>
        <text class="t1">地点：{{path}}</text>
        <text class="t1">时间：{{time}}</text>
    </div>
</div>1.
2.
3.
4.
5.
6.
7.

.pagediv{
    width: 100%;
    height: 1600px;
}
.pagediv1{
    width: 100%;
    height: 100%;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.t1{
    font-size: 50px;
    font-weight: 300;
    font-family: sans-serif;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

3、逻辑层

//导入鸿蒙的网络请求模块
import fetch from '@system.fetch';
export default {
    data: {
        weather:0,
        path:0,
        time:0
    },
    onInit(){
       //发起对心知天气接口的网络请求
       fetch.fetch({
        url:"https://api.seniverse.com/v3/weather/now.json?key=SKNzF__vXSw35QKhp&location=nanjing&language=zh-Hans&unit=c",
        responseType:"json",
        success:(res)=>{
        //JSON.parse() 将数据转换成json格式
        let weather = JSON.parse(res.data);
        this.weather = weather.results[0].now.text;
        this.path = weather.results[0].location.path;
        this.time = weather.results[0].last_update;
        }
       });
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.