原標(biāo)題：鴻蒙遠(yuǎn)程交互應(yīng)用 vs 微信小程序遠(yuǎn)程交互應(yīng)用

鴻蒙的遠(yuǎn)程交互組件應(yīng)用相對復(fù)雜，訪問網(wǎng)絡(luò)時(shí)，首先要配置網(wǎng)絡(luò)權(quán)限，華為官方文檔有問題，在此引用我老師配置的模板，見附件。

過程：

導(dǎo)入鴻蒙的網(wǎng)絡(luò)請求模塊 fetch。

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

01

js 業(yè)務(wù)邏輯層

//導(dǎo)入鴻蒙的網(wǎng)絡(luò)請求模塊fetch

importfetch from'@system.fetch';

exportdefault{

data: {

title: 'World',

currentTime: '',

temperature1: '',

text: '',

},

onInit {

//發(fā)起對心知天氣服務(wù)器的請求

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(字符串)轉(zhuǎn)換成json數(shù)據(jù)格式

letweatherInfo= 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;

}

});

}

}

02

渲染層

{{currentTime}}{{temperature1}}

{{temperature1}}

{{text}}

03

css 樣式屬性設(shè)置

.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)：

04

微信小程序的遠(yuǎn)程交互應(yīng)用

js 業(yè)務(wù)邏輯層：

// pages/images/weather/weather.js

Page({

/**

* 頁面的初始數(shù)據(jù)

*/

data: {

weatherInfo:{},

nextweatherInfo:{}

},

/**

* 生命周期函數(shù)--監(jiān)聽頁面加載

*/

: 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)=>{

letinfo=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)=>{

letlive=resp.data

console.log(live)

}

})

//微信請求未來三天氣預(yù)報(bào)

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)=>{

lettime=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( ){

},

/**

* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

*/

onPullDownRefresh: function( ){

},

/**

* 頁面上拉觸底事件的處理函數(shù)

*/

onReachBottom: function( ){

},

/**

* 用戶點(diǎn)擊右上角分享

*/

onShareAppMessage: function( ){

}

})

渲染層：

< text>{{weatherInfo.results[0].last_update}}{{weatherInfo.results[0].location.name}}{{weatherInfo.results[0].now.text}}{{weatherInfo.results[0].now.temperature}} text>

< viewclass= "margin"> view>

< viewclass= "top">

< blockwx:for= "{{nextweatherInfo}}">

< viewclass= "three">

< view>

< textclass= "txt1">{{item.date}} text>

view>

< view>

< textclass= "txt1">{{item.text_day}} text>

view>

< view>

< textclass= "txt1">{{item.wind_direction}} text>

view>

view>

block>

view>

wxss 樣式屬性設(shè)置：

/* 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: 1pxsolid blue;

margin: 5px;

}

.txt1{

font-weight: bold;

font: size 15px;

}

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

責(zé)任編輯：

總結(jié)

以上是生活随笔為你收集整理的鸿蒙与微信小程序,鸿蒙远程交互应用 vs 微信小程序远程交互应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。