鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用
注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件
过程: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/
鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用的更多相关文章
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架
使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...
- 微信小程序:JS 交互逻辑
微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置
1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发05-日历组件的实现
接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...
- 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题
1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...
随机推荐
- Linux简单复习
cd 命令:切换目录 ls命令:用于浏览目录下的文件或者文件夹 rm 命令:用于删除文件或者目录,用法 rm –rf test.txt (-r表示递归,-f表示强制) cp 命令:用于拷贝文件,用法, ...
- SQL 视图 临时表 存储过程 索引 事务
视图: 视图是按照你的sql语句生成的一个虚拟的东西,本身并不占数据库的空间 创建视图 create view view_1 as select id from table_1 当你表里的数据增加或者 ...
- EF快速入门--直接修改(简要介绍ObjectContext处理机制)
原博文 http://www.cnblogs.com/fly_dragon/archive/2011/06/05/2073084.html ObjectContext的处理机制 ObjectConte ...
- Unity UI适配 之 GridLayoutGroup组件下的内容适配(进度条适配)
好久没有更新博客了,蓝廋啊. 今天写一写关于GripLayoutGroup组件的屏幕适配问题,以在ARPG游戏中常用的经验条适配来举例子,以此来加深自己的记忆,以便在下次需要制作该功能时能够快速完成. ...
- 【electron+vue3+ts实战便笺exe】二、electron+vue3开发内容
不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂 ...
- Linux腾讯云下安装mysql
百度云盘下载地址https://pan.baidu.com/s/1MqUEdeqZuQbq-veLuVItQQ 将下载好的mysql-5.7.14-linux-glibc2.5-x86_64.tar. ...
- tcp上传学习二--文本文件上传
//暮雪超霸.加油!!!package tcp文本上传; import java.io.BufferedReader; import java.io.FileReader; import java.i ...
- Turtlebot3新手教程-应用-跟随
本文针对如何利用Turtlebot3可实现的各种应用进行讲解 具体步骤如下: [Remote PC]安装应用包 cd ~/catkin_ws/src git clone https://github. ...
- Eclipse 使用svn时出现 “Previous operation has not finished; run 'cleanup' if it was interrupted“问题
在执行svn操作的时候出现了下面的问题 commit -m "" E:/eclipse/workplace/BRobotAPP/blockly/googleDemo/blockly ...
- 每日一个linux命令3
Linux 中用pwd命令来查看"当前工作目录"的完整路径. 简单的说,每当你在终端进行操作时,你都会有一个当前工作目录,在不太确定当前位置时,就会使用pwd来判定当前目录在文件系 ...