
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
效果图:
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
}
}
]
}
}
2、页面视图及样式
<div class="pagediv">
<div class="pagediv1">
<text class="t1">天气:{{weather}}</text>
<text class="t1">地点:{{path}}</text>
<text class="t1">时间:{{time}}</text>
</div>
</div>
.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;
}
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;
}
});
}
}