微信小程序的全局變量、頁面變量,你真的掌握了?

2019-12-11| 發布者: 潞向錢6| 查看: 73

開發微信小程序時,遇到的坑挺多的,別的不說,單是變量的應用,就夠你折騰一陣子的了,可能,或許是我不熟悉的緣故吧?1如果你認為你很熟悉的話,那你猜一下,下面的變量—userInfo,是屬于全局變量,還是頁面變量?v ...


微信小程序的全局變量、頁面變量,你真的掌握了?

開發微信小程序時,遇到的坑挺多的,別的不說,單是變量的應用,就夠你折騰一陣子的了,可能,或許是我不熟悉的緣故吧?

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的方式獲取了。

好了,今天就說到這里了,我發的文章大多是項目開發過程中的記錄,但愿對你有所幫助。


鮮花

握手

雷人

路過

雞蛋

0條評論 73人參與 網友評論 文明發言,請先登錄注冊

文明上網理性發言,請遵守國家法律法規。

最新評論

©2001-2018 巨推網 www.342748.live中國互聯網舉報中心京ICP備14033863號 非經營性網站yejienet.com公安網備
Archiver手機版小黑屋 廣告合作客服QQ:1430738212Comsenz Inc.
捕鱼积液怎么赚钱