小程序心知天气API获取数据

小程序的变量使用，全局变量，其他函数的变量
app中的global和page的data中的变量
小程序页面之间传递数据和变量，数据可以是写死的数据也可以是在A页面得到的变量值，传递给B页面

全局变量的使用：
在app.js中加入

App({globalData:{global:'global3'}
})

在任何一个页面都可以使用该变量，也可以更改

onLoad: function (options) {var app=getApp()  //如果不写这句就将下句改成getApp().globalData.globalvar global=app.globalData.globalconsole.log(global)   //此时虽然能显示global的内容，不使用setData也是不会显示在页面的}

此时可以看到调试器显示global3，
同一个页面，一个函数调用另一个函数的变量：
只要这个变量在该页面js的data里定义过，其他函数都可以进行调用this.data.变量名，按照代码运行的顺序，变量名进行改变，读取，
var that=this的使用：
this作用域分析：
1.在Page({})里面，this关键字指代Page({})整个对象
2.因此可以通过this关键字访问或者重新设置Page({})里data的变量
3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象
4.虽然在wx.request({})里没法使用this获取Page({})对象，但是可以在wx.request({})外面先把this存在某个变量中，所以就有了var that =this 这个声明。此时that指代Page({})整个对象，这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量

const app = getApp()Page({data: {region:['广东省',"中山市","中山"],now1:0},regionChange:function(e){this.setData({region:e.detail.value});console.log("123123",e);this.getWeather();},getWeather:function(){/*this作用域分析：
1.在Page({})里面，this关键字指代Page({})整个对象
2.因此可以通过this关键字访问或者重新设置Page({})里data的变量
3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象
4.虽然在wx.request({})里没法使用this获取Page({})对象，但是可以在wx.request({})外面先把this存在某个变量中，所以就有了var that =this 这个声明。此时that指代Page({})整个对象，这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量*/var that =this;wx.request({url:"https://api.seniverse.com/v3/weather/now.json",data:{location:that.data.region[1],key:'xxxxxx'},success:function(res){console.log("res"+res.data); //输出result：Array这行console.log(that.data.region[0]),that.setData({now1:res.data.results[0].now})}})console.log(this.data.now1)  //此时输出都还是0是初始值},//wx.navigateTo和 wx.redirectTo不允许跳转到 tab 所包含的页面，只能用 wx.switchTab跳转。需要注意的是， wx.switchTab中的 url不能传参数。bnt(){console.log(this.data.now1);//此时输出是已经获取到的天气数据，如果我们想用其他函数里更改过的变量，可以在data里设置，再其他函数里调用即可//var now=this.data.now1//console.log(now)let str={text:this.data.now1.text,temperature:this.data.now1.temperature,code:this.data.now1.code}//let now= JSON.stringify(str)let now=123wx.navigateTo({url: '../next/next?now1='+now})},onLoad() {var app=getApp()  //如果不写这句就将下句改成getApp().globalData.globalvar global=app.globalData.globalconsole.log(global)   //此时虽然if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}this.getWeather();},})

如果我们想将这个页面的数据或者获取的变量传递给下个页面：

  bnt(){let str={text:this.data.now1.text,temperature:this.data.now1.temperature,code:this.data.now1.code}let now= JSON.stringify(str)//let now=3wx.navigateTo({url: '../next/next?now1='+now})},

按钮功能跳转到下一个页面pages/next/next 将本页面的now1的值传输过去，如果是一个简单的给定的值可以直接写在url里，例如：‘…/next/next?now1=3’，也可以给一个变量赋值，比如，
let now=3， url: ‘…/next/next?now1=’+now，如果数据比较多，那么用json格式传输，在接收的页面进行解码，接受页面：

 onLoad: function (options) {console.log(options)let model = JSON.parse(options.now1)this.setData({num:model,global:global})},

效果如图：

此时我们传输成了字符串，页面进行调用即可

<view>{{num.text}}</view>

顺便说一下var和let的区别
let声明的变量是局部变量，该变量只会在最靠近{ }内的范围有效，出了{}之后，该变量就不能用了，否则会报该变量未定义的错误。
let声明的变量只在它所在的代码块有效。
var申明的变量是全局变量，其作用域为所在的函数内。
var命令会发生”变量提升“现象，即变量可以在声明之前使用。

界面文件：

<view class ='container'><picker mode='region' bindchange='regionChange'><view>{{region}}</view></picker><text>{{now1.temperature}} {{now1.text}}</text>
<view class='detail'><view class='bar'><view class ='box'>湿度</view><view class ='box'>气压</view><view class ='box'>能见度</view></view><view class='bar'><view class ='box'>0%</view><view class ='box'>0 hpa</view><view class ='box'>0 km</view></view><view class='bar'><view class ='box'>风向</view><view class ='box'>风速</view><view class ='box'>风力</view></view><view class='bar'><view class ='box'>0</view><view class ='box'>0 km</view><view class ='box'>0 级</view></view>
</view>
</view>
<button bindtap="bnt">next</button>

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}
text{font-size:80rpx;color:#3C5F81;
}
.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.usermotto {margin-top: 200px;
}
.detail{width:100%;display:flex;flex-direction:column;
}
.bar{display:flex;flex-direction: row;margin:20rpx 0;
}
.box{width:33.3%;text-align:center;
}

小程序心知天气API获取数据相关推荐

利用Arduino Esp8266 心知天气API 获取天气预报信息（修改后可以DIY一个小型的桌面气象台）
前期准备: 注册心知天气,获取API密钥 https://www.seniverse.com 生成API请求地址,北京今天和未来4天的预报请求地址如下: https://api.seniverse. ...
STM32使用ESP8266模块AT指令连接心知天气API获取天气信息
由于之前使用STM32单片机来开发一些物联网的小项目,接触到了WIFI模块ESP8266,所以写下来记录一下.本文主要介绍的是STM32通过发送AT指令集来控制ESP8266 WIFI模块连接WiFi ...
Android中基于心知天气API获取天气信息
Android中基于心知天气获取天气信息 JSON JSON简介 JSON对象 JSON数组 JSON解析 Android中获取天气获取天气的流程获取心知天气的API key 获取心知天气的API ...
c语言获取天气信息示例(通过心知天气api获取)
关于curl/curl.h库的使用,参考下述内容: VS2010编译libcurl库并简单使用(c语言)_西晋的no1的博客-CSDN博客 1.先在心知天气注册,获取私钥: https://www. ...
用cJSON解析心知天气返回的数据包
目录: 文章目录调用天气API接口获取天气信息解析天气信息字符串测试结果欢迎关注后台网友留言,说参考这个链接天气数据解析1–JSON格式数据处理天气API接口返回的数据,中间遇到了点问题 ...
心知天气api接口怎么用？
心知天气是什么?心知天气提供API吗? 心知天气是国内领先的气象服务商,由中国气象局官方授权的商业气象服务公司,基于气象数值预报和人工智能技术,提供高精度气象数据.天气监控机器人.气象数据可视化产品, ...
心知天气api，根据城市名/id查询天气
心知天气api可以根据城市名/id查询天气,向开发者提供的准确.稳定.丰富的天气数据云服务. 接口名称:心知天气api 接口平台:聚合数据接口地址:http://v.juhe.cn/weather/ ...
心知天气API如何调用与json数据如何显示
心知天气官网:https://www.seniverse.com/doc 首先需要注册获得密钥和ID. 因为我不是会员,这里就简单介绍下,怎么调用并显示. Json数据如下图所示: { results ...
抖音小程序｜基于天气API实现天气预报功能
文章目录一.前言包含了功能 UI展示二.开发前的准备三.开发步骤 1.app.js 配置 2.pages/index.js 演示二维码源码在百度网盘下载一.前言参考老版iPhone自带的 ...
微信小程序搞一个天气api
最近在搞微信小程序,突然想来搞一个天气API,来获取实时的天气.话不多说,直接开搞.. 1. 选择一个天气API 百度上随便一搜,都是天气API,但是我感觉用起来都太烦了, 无论是注册,还是说要付费, ...

小程序心知天气API获取数据

小程序心知天气API获取数据相关推荐

最新文章

热门文章