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

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

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

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

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

onLoad: function (options) {
    var app=getApp()  //如果不写这句就将下句改成getApp().globalData.global
    var global=app.globalData.global
    console.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=123
    wx.navigateTo({
      url: '../next/next?now1='+now
    })


  },


  onLoad() {
    var app=getApp()  //如果不写这句就将下句改成getApp().globalData.global
    var global=app.globalData.global
    console.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=3
    wx.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;
}