[[377872]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com/#zz

注:鴻蒙的遠程交互組件應用相對復雜 ,訪問網(wǎng)絡時,首先要配置網(wǎng)絡權限,華為官方文檔有問題,在此引用我老師配置的模板,見附件

過程:1.導入鴻蒙的網(wǎng)絡請求模塊fetch

         2.發(fā)起對服務器的請求(在這過程中需要用JSON.parse將括號中的數(shù)據(jù)轉換成json數(shù)據(jù)格式,具體見代碼中標注)

js業(yè)務邏輯層

 //導入鴻蒙的網(wǎng)絡請求模塊fetch 
import fetch from '@system.fetch'; 
export default { 
    data: { 
        title: 'World', 
        currentTime:'', 
        temperature1:'', 
        text:'', 
 
    }, 
        onInit() { 
            //發(fā)起對心知天氣服務器的請求 
          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數(shù)據(jù)格式 
                  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> 

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

 最終效果呈現(xiàn):

微信小程序的遠程交互應用:

js業(yè)務邏輯層

// pages/images/weather/weather.js 
Page({ 
 
  /** 
   * 頁面的初始數(shù)據(jù) 
   */ 
  data: { 
    weatherInfo:{}, 
    nextweatherInfo:{} 
 
  }, 
 
  /** 
   * 生命周期函數(shù)--監(jiān)聽頁面加載 
   */ 
  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}) 
       } 
     }) 
     //微信小程序請求生活指數(shù) 
     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}) 
 
       } 
     }) 
 
  }, 
 
  /** 
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 
   */ 
  onReady: function () { 
 
  }, 
 
  /** 
   * 生命周期函數(shù)--監(jiān)聽頁面顯示 
   */ 
  onShow: function () { 
 
  }, 
 
  /** 
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏 
   */ 
  onHide: function () { 
 
  }, 
 
  /** 
   * 生命周期函數(shù)--監(jiān)聽頁面卸載 
   */ 
  onUnload: function () { 
 
  }, 
 
  /** 
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作 
   */ 
  onPullDownRefresh: function () { 
 
  }, 
 
  /** 
   * 頁面上拉觸底事件的處理函數(shù) 
   */ 
  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; 
 
} 

 最終效果呈現(xiàn):

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

https://harmonyos.51cto.com/#zz想了解更多內(nèi)容，請訪問：

 【編輯推薦】