鸿蒙与微信小程序,鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用...

注:鸿蒙的远程交互组件应用相对复杂,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件

过程: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;

}

});

}

}

渲染层

{{currentTime}}{{temperature1}}

{{temperature1}}

{{text}}

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

}

})

渲染层

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

{{item.date}}

{{item.text_day}}

{{item.wind_direction}}

wxss样式属性设置