开发微信小程序时，遇到的坑挺多的，别的不说，单是变量的应用，就够你折腾一阵子的了，可能，或许是我不熟悉的缘故吧?
1
如果你认为你很熟悉的话，那你猜一下，下面的变量—userInfo，是属于全局变量，还是页面变量?
var userInfo= {
name: '小明',
age: 18
}
Page({
onReady: function() {
console.log(userInfo.name)
}
})
官网介绍时，说:在app.js里的是全局变量,在Page里的是页面(局部变量)。那在Page上的呢?—一开始我认为应该属于局部变量，可使用之后，发现这样使用，会存在一些Bug，有时会出现内容不清空的情况。奇怪的是，开发工具不提醒这种用法是不推荐的，从这些坑坑洼洼来说，微信小程序还是有一定难度的，呵呵~~
2
经过一段多次测试，一切按官网出现过的方式进行吧。如果还存在问题，就去社区找茬去。经调整如下，就不会出现数据不清空的现象了。因为这样是属于Page声明周期的变量，记得在通过this调用哦。
Page({
userInfo: {
name: '小明',
age: 18
},
onReady: function() {
console.log(this.userInfo.name)
}
})
有人就会问了，为什么不用data的方式的，因为有些数据是不属于同步到页面wxml上显示的，只是数据做一下过度而已。
如果js上的数据要同步到页面上,记得用setData的方式，否则又会踩坑了。
3
说完Page上的变量，现在说一下全局变量，第一种，就是常规的，在app.js中声明的这种，它比较适合在两个界面之间的传值方式。当然，如果你非得用缓存也是可以的，只是用全局变量会更简单一些。温馨提醒:在取完全局变量的值之后，记得把它还原为初始值。
app.js
App({
userInfo: null
})
index.js(为了让你看的更明白，我把全局放在一个页面上演示了。)
const app = getApp()
Page({
onReady: function() {
app.userInfo = {
name: '小明',
age: 18
}
console.log(app.userInfo.name)
app.userInfo = null
}
})
4
上面说到两个页面之间传值时，可采用全局或缓存的方式。可如果是整个app，大部分的页面都要用到全局变量时，如果还是用getApp()或缓存方式的话，那挺尴尬的。这里说一下，官网没提到的方式—变量挂载。
Page({
onReady: function() {
wx.userInfo = {
name: '小明',
age: 18
}
console.log(wx.userInfo.name)
}
})
没错，就是把变量挂载到wx中。这样在所有页面就可以通过wx.userInfo的方式获取了。
好了，今天就说到这里了，我发的文章大多是项目开发过程中的记录，但愿对你有所帮助。
网友评论