鴻蒙的遠程交互組件應用及微信小程序的遠程交互組件應用

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

過程:1.導入鴻蒙的網絡請求模塊fetch json

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

渲染層api

<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業務邏輯層xss

// 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 () {

  }
})

渲染層ide

<!--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