短信预约-IT技能 免费直播动态提醒

2024-12-03 12:16

关注

 //导入鸿蒙的网络请求模块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; 
              } 
          }); 
        } 
} 

"container"> 
    "time"> 
       {{currentTime}}{{temperature1}} 
     
    "time"> 
      {{temperature1}} 
     
    "time"> 
        {{text}} 
     

.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--> 
{{weatherInfo.results[0].last_update}}{{weatherInfo.results[0].location.name}}{{weatherInfo.results[0].now.text}}{{weatherInfo.results[0].now.temperature}} 
<view class="margin">view> 
<view class="top"> 
  for="{{nextweatherInfo}}"> 
    <view class="three"> 
      <view> 
         "txt1">{{item.date}} 
      view> 
      <view> 
        "txt1">{{item.text_day}} 
      view> 
      <view > 
        "txt1">{{item.wind_direction}} 
      view> 
 
    view> 
   
view> 

 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; 
 
} 

 最终效果呈现:

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/想了解更多内容，请访问：

 【编辑推荐】