注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件
过程:1.导入鸿蒙的网络请求模块fetch
2.发起对服务器的请求(在这过程中需要用JSON.parse将括号中的数据转换成json数据格式,具体见代码中标注)
js业务逻辑层
//导入鸿蒙的网络请求模块fetch
import fetch from '@system.fetch';
export default {
data: {
title: 'World',
currentTime:'',
temperature1:'',
text:'',
},
onInit() {
//发起对心知天气服务器的请求
fetch.fetch({
url:'https://api.seniverse.com/v3/weather/now.json?key=S0YbU_VLcvXz-4LZx&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.temperature1=weatherInfo.results[0].now.temperature;
}
});
}
}
渲染层
<div class="container">
<text class="time">
{{currentTime}}{{temperature1}}
</text>
<text class="time">
{{temperature1}}
</text>
<text class="time">
{{text}}
</text>
</div>
css样式属性设置
.container {
display: flex;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.time {
font-size: 50px;
text-align: center;
width: 200px;
height: 1200px;
}
最终效果呈现:
微信小程序的远程交互应用:
js业务逻辑层
// pages/images/weather/weather.js
Page({
/**
* 页面的初始数据
*/
data: {
weatherInfo:{},
nextweatherInfo:{}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//微信小程序请求天气
wx.request({
url: 'https://api.seniverse.com/v3/weather/now.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans&unit=c',
success:(resp)=>{
let info=resp.data;
console.log(info);
this.setData({weatherInfo:info})
}
})
//微信小程序请求生活指数
wx.request({
url: 'https://api.seniverse.com/v3/life/suggestion.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans',
success:(resp )=>{
let live=resp.data
console.log(live)
}
})
//微信请求未来三天气预报
wx.request({
url: 'https://api.seniverse.com/v3/weather/daily.json?key=S0YbU_VLcvXz-4LZx&location=成都&language=zh-Hans&unit=c&start=-1&days=5',
success:(resp)=>{
let time=resp.data;
console.log(time)
this.setData({nextweatherInfo:time.results[0].daily})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
渲染层
<!--pages/images/weather/weather.wxml-->
<text>{{weatherInfo.results[0].last_update}}{{weatherInfo.results[0].location.name}}{{weatherInfo.results[0].now.text}}{{weatherInfo.results[0].now.temperature}}</text>
<view class="margin"></view>
<view class="top">
<block wx:for="{{nextweatherInfo}}">
<view class="three">
<view>
<text class="txt1">{{item.date}}</text>
</view>
<view>
<text class="txt1">{{item.text_day}}</text>
</view>
<view >
<text class="txt1">{{item.wind_direction}}</text>
</view>
</view>
</block>
</view>
wxss样式属性设置
/* pages/images/weather/weather.wxss */
.margin{
width: 100%;
height: 30px;
background-color: rgb(56, 168, 202);
}
.top{
width: 100%;
height: 50vh;
display: flex;
flex-direction: row;
justify-content: center;
margin: 5px;
}
.three{
width: 27%;
height: 50%;
border: 1px solid blue;
margin: 5px;
}
.txt1{
font-weight: bold;
font: size 15px;
}
最终效果呈现:
下载源码
作者：noutsider
想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/
