小程序的变量使用,全局变量,其他函数的变量
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;
}