微信小程序開發問答《七十》微信小程序的(de)for循環 & 小程序效果處理技巧 ... ... . - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

微信小程序開發問答《七十》微信小程序的(de)for循環 & 小程序效果處理技巧 ... ... .

發表時(shí)間:2021-5-11

發布人(rén):融晨科技

浏覽次數:107

1、微信小程序 session_key 的(de)作用是(shì)什麽

文檔上(shàng)說(shuō)是(shì)對用戶數據的(de)加密簽名的(de)密鑰,,是(shì)不(bù)是(shì)就(jiù)是(shì)對encryptedData解密用的(de),,也(yě)僅此而(ér)已,沒有其他(tā)作用吧!

如果後台并不(bù)需要(yào / yāo)解密encryptedData呢,因爲(wéi / wèi)openid和(hé / huò)unionid都已經拿到(dào)了(le/liǎo),其他(tā)的(de)資料信息不(bù)需要(yào / yāo)。

那麽,wx.checksession豈不(bù)是(shì)都用不(bù)上(shàng)了(le/liǎo),因爲(wéi / wèi)wx.checksession就(jiù)是(shì)檢查session_key是(shì)否過期的(de)。


答:A.session_key 有兩個(gè)作用:

  1. 校驗用戶信息(wx.getUserInfo(OBJECT)返回的(de)signature);

  2. 解密(wx.getUserInfo(OBJECT)返回的(de)encryptedData);

B.按照官方的(de)說(shuō)法,wx.checksession是(shì)用來(lái)檢查 wx.login(OBJECT) 的(de)時(shí)效性,判斷登錄是(shì)否過期;

疑惑的(de)是(shì)(openid,unionid )都是(shì)用戶唯一标識,不(bù)會因爲(wéi / wèi)wx.login(OBJECT)的(de)過期而(ér)改變,所以(yǐ)要(yào / yāo)是(shì)沒有使用wx.getUserInfo(OBJECT)獲得的(de)用戶信息,确實沒必要(yào / yāo)使用wx.checksession()來(lái)檢查wx.login(OBJECT) 是(shì)否過期;

如果使用了(le/liǎo)wx.getUserInfo(OBJECT)獲得的(de)用戶信息,還是(shì)有必要(yào / yāo)使用wx.checksession()來(lái)檢查wx.login(OBJECT) 是(shì)否過期的(de),因爲(wéi / wèi)用戶有可能修改了(le/liǎo)頭像、昵稱、城市,省份等信息,可以(yǐ)通過檢查wx.login(OBJECT) 是(shì)否過期來(lái)更新着些信息;

2、小程序效果處理技巧

巧用Console.log(event)

Event::事件對象,方法在(zài)執行的(de)時(shí)候,當前環境攜帶的(de)一些信息

可以(yǐ)打印出(chū)來(lái)、獲取很多信息,根據這(zhè)些信息再度尋找你需要(yào / yāo)的(de)信息的(de)路徑。如小程序裏的(de)event.detail.width;;;;

 

頁面加載後切換一次類名,實現初始頁動畫展示、初始頁切換類名、配合一次性定時(shí)器切換類名

 js下的(de)page内

 

返回頂部 效果

 要(yào / yāo)配合scroll-view組件、wx:if功能、、、、具體代碼如下:

主要(yào / yāo)是(shì)scroll-top這(zhè)個(gè)屬性目前在(zài)微信中是(shì)scroll-view組件支持的(de),所以(yǐ)需要(yào / yāo)他(tā)配合完成。

 過程代碼及說(shuō)明

 

動态的(de)添加内容、渲染結構

Wx:for功能——列表渲染!!

重複的(de)結構都可以(yǐ)用其配置,然後傳數據就(jiù)ok;

另外,配合wx:if、wx:else來(lái)判斷并動态選擇将參數傳入哪個(gè)結構中

 

巧用if判斷和(hé / huò)for循環搭建結構

判斷真的(de)好用,在(zài)這(zhè)個(gè)代碼中,沒有數據的(de)時(shí)候,下邊的(de)結構就(jiù)不(bù)會渲染出(chū)來(lái)。

還可以(yǐ)利用判斷顯示隐藏、添加删除類名啥的(de),達到(dào)自己想要(yào / yāo)的(de)效果。

 

關于(yú)rpx單位的(de)用法:

rpx是(shì)用來(lái)自适應的(de),設計圖是(shì)750px的(de)模式下,用rpx直接一比一複刻建模,出(chū)來(lái)後就(jiù)是(shì)标準的(de)i6的(de)界面,也(yě)能自适應絕大(dà)多數頁面了(le/liǎo)

不(bù)過有些小的(de)5px、3px、1px啥的(de)間距或border,我就(jiù)用px了(le/liǎo),

可以(yǐ)大(dà)概記憶:1px = 2rpx;當然這(zhè)麽說(shuō)很不(bù)科學,他(tā)們并不(bù)全等,但是(shì)做頁面的(de)時(shí)候這(zhè)麽想着可以(yǐ)很快地(dì / de)計算粗大(dà)概的(de)數值。

 

終于(yú)研究出(chū)來(lái)怎麽讓Scroll-x實現橫向滾動拉!! 

 代碼及解析

3、微信小程序的(de)for循環

怎麽又是(shì)item 又是(shì)items的(de)?

答:wx:for-items是(shì)官網文檔裏沒提到(dào)的(de),實際上(shàng)這(zhè)個(gè)items沒起到(dào)什麽作用,你就(jiù)把他(tā)當做wx:for好了(le/liǎo)。

wx:for-item裏面的(de)item是(shì)定義循環裏面的(de)這(zhè)個(gè)變量,也(yě)就(jiù)是(shì)給列表賦别名,就(jiù)好比你的(de)例子(zǐ)裏wx:for-item = page,後續使用的(de)就(jiù)是(shì)page


4、微信小程序:scroll-view 橫向滾動 怎樣出(chū)現 滾動條并帶有回彈效果?


答:https://mp.weixin.qq.com/debu...
文檔裏說(shuō)的(de)很清楚了(le/liǎo)。

回彈效果,在(zài)app.json中把enablePullDownRefresh的(de)值改爲(wéi / wèi)false,或者直接去掉,這(zhè)是(shì)用來(lái)刷新是(shì)才會用到(dào)的(de)屬性,
如果隻是(shì)某個(gè)頁面就(jiù)在(zài)相應的(de)json頁面修改




相關案例查看更多