注:鴻蒙的遠端互動元件應用相對複雜,訪問網路時,首先要配置網路許可權,華為官方文件有問題,在此引用我老師配置的模板,見附件

過程: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/