鸿蒙的远程交互组件应用和微信小程序的远程交互组件应用
时间：2023-03-20 13:52:14
科技观察
了解更多请访问：与华为官网共建鸿蒙科技社区https://harmonyos.51cto.com/#zz注：鸿蒙远程交互组件的应用比较复杂。访问网络时，首先要配置网络权限，华为官方文档有问题，这里是我老师配置的模板，见附件流程：1.导入鸿蒙的网络请求模块fetch2.发起请求到服务端（这个过程需要用到json，数据转成json数据格式，具体见代码）js业务逻辑层//导入鸿蒙的网络请求模块fetchimportfetchfrom'@system.fetch';exportdefault{data:{title:'World',currentTime:'',temperature1:'',text:'',},onInit(){//向天气服务器发起请求fetch.fetch({url:'https://api.seniverse.com/v3/weather/now.json?key=S0YbU_VLcvXz-4LZx&location=Chengdu&language=zh-Hans&unit=c',responseType:'json',success:(resp)=>{//JSON.parse(string)转换为json数据格式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;}});}}渲染层{{currentTime}}{{temperature1}}{{temperature1}}text>{{temperature1}}{{text}}}
css样式属性setting.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业务逻辑层//页面/图片/weather/weather.jsPage({/***页面初始数据*/data:{weatherInfo:{},nextweatherInfo:{}},/***生命周期函数--监控页面加载*/onLoad:function(options){//微信小程序请求天气wx.request({url:'https://api.seiverse.com/v3/weather/now.json?key=S0YbU_VLcvXz-4LZx&location=Chengdu&language=zh-Hans&unit=c',成功:(resp)=>{letinfo=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=Chengdu&language=zh-Hans',成功:(resp)=>{letlive=resp.dataconsole.log(live)}})//微信请求下三个我们天气预报wx.request({url:'https://api.seiverse.com/v3/weather/daily.json?key=S0YbU_VLcvXz-4LZx&location=Chengdu&language=zh-Hans&unit=c&start=-1&days=5',成功:(resp)=>{lettime=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.温度}}{{item.date}}<查看>{{item.text_day}}{{item.wind_direction}}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:1pxsolidblue;margin:5px;}.txt1{font-weight:bold;font:size15px;}最终效果图：更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto。com/#zz更多信息请访问：【编辑推荐】Incaseformat蠕虫大爆发！20多岁删除用户文件长文干货|手写自定义持久层框架！“远程删除照片”？个人信息安全不容践踏大年三十，让我们用JavaScript在你的网页上燃放烟花吧21世纪二十年过去了！十年前的这些场景，你还记得吗？
