小程序開發點滴記錄

1、微信小程序中列表item點擊之後的響應

昨天一直在糾結微信小程序中列表頁點擊之後的響應,按照傳統的思想,綁定的是同一個函數,點擊之後用this就可以知道具體點擊了哪個item,但是微信小程序不能操作dom,昨天糾結了一下,今天上班看了一下官方文檔,點擊事件對象裏面有個target屬性,target的dataset可以自己獲取到自己設置的“data-”的值,所以在渲染的數據裏面加上了mark,在點擊的時候獲取“data-”的值,跟數據列表做對比,匹配的就是相應的item數據,做相應的修改就可以了。百度無果,還是多看官方文檔啊,很多問題其實官方文檔裏面找得到線索的。

2、小程序循環列表的數據修改

小程序的setData方法可以對data對象中的數據進行修改,但是如果在for循環裏面要對匹配的數據進行修改就比較蛋疼了,setData方法是支持key用字符串進行設置值的,但是不能放變量。於是我用了曲線救國的方法,將要修改的數據對象放到data對象外聲明,然後操作這個對象的時候就不用setData方法了,數據修改完成之後在進行setData操作,這時候是將整個對象進行更新操作,所以就不存在key中有變量的情況了。

剛開始寫數據驅動,真心不習慣,慢慢學習吧,加油!


<---------------------------------------------------------------------->

華麗的分割線

後來查看別人的程序,發現其實只要設置一個data-index,將循環時的index設置進去,然後點擊的時候,拿到index,修改對應index的數組的數據再setData就可以了,不用做數據比較,節省運算量。

let index = e.currentTarget.dataset.index;
arr[index].isActive = true;
this.setData({
 arr: arr
})

3、text組件
在web開發中,編寫span的內容的時候,在編輯器裏面換行是不會影響正常的顯示,頂多多一點空格,小程序則不同,如果在編寫的過程中對text組件有換行的操作,會在頁面完完全全地顯示出來,找了挺久的,以爲小程序裏面的text組件的display也是block,找了很久,去掉換行才找到原因。

<text>1111
222
</text>

以上的代碼,顯示出來的結果是:
1111
222

如果換成以下的寫法就不會換行了
<text>1111222</text>
顯示結果是:1111222

4、小程序底部tabBar圖標大小
小程序在app.json中可以配置底部的tabBar欄的圖標跟文字,官方推薦圖標大小爲81x81,沒有寬高的配置項。
前幾天開發的時候想着好像大部分的圖標大小都是這麼大,官方也是這麼規定的,自己的小程序底部的圖標顯得大就沒理了,可是翻看了幾個小程序之後,發現有的大有的小,但是官方又沒有配置項,我心裏在想,到底是怎麼做到的呢。突然靈光乍現,可以把圖標的規格定爲81x81,然後留有一定的邊距,讓圖標的內容部分縮小顯示在正中間,就可以達到自己控制圖標大小的目的了。如下圖:



5、微信開發者工具獲取座標的問題
微信開發者工具用了很久,每次獲取座標都是0,不知道怎麼模擬座標進去,每次在代碼裏改又很挫,找啊找,後來就忘記去改了,今天找了一下設置,設置成功了,之前貌似設置的地方不對,說一下設置方法:
一、在開發者工具右側找到Sensor,選中

二、在Latitude跟Longitude填入模擬的值就可以了。


6、今天在不同頁面傳值時,使用了全局對象進行傳值,由於不想對對象的屬性進行遍歷,就直接將後臺返回的數據直接傳給全局對象的一個屬性,然後再對屬性內的數據進行遍歷處理,這麼做相當於淺拷貝,修改數組的內容的時候,原先的數組內容也發生了變化,這就導致,如果第二次打開相同的頁面,數組遍歷部分會出錯,找了好幾個方法,最後有一個最便捷的。就是使用JSON將對象轉換爲字符串,然後再將轉化後的字符串轉換爲對象,這樣就相當於深拷貝了。
首先:data = JSON.stringify(globalData);
然後:data = JSON.parse(data);
就完成深拷貝了。

7、小程序引用文件:include和import
import wxml文件這個沒什麼好說的,按照官方的寫就行了 。
include wxml文件的時候,要注意不要保留template標籤,同時,可以在要引入的文件裏面import其他wxml文件。

8、小程序頁面間的通訊
有個需求,列表頁每項都有顯示人數,進入詳情頁處理之後回來頁面對應項的人數要+1,剛開始想到的方法是返回的時候調用聲明週期的onShow方法,進行頁面刷新,但是這個方法很挫,如果我看到列表頁的最後一個數據,進去詳情頁,返回卻回到列表頁的第一個,就很不科學了,於是找啊找啊,找到一個不錯的庫,github地址:https://github.com/binnng/broadcast.js
在列表頁和詳情頁引入broadcast的包,在列表頁註冊函數:broadcast.on('fn_name',data => {//處理}),在詳情頁需要的地方寫上broadcast.fire('fn_name',{//id:id}),這樣操作的時候,就可以只修改列表頁對應的數據了,沒必要全部刷新。
這麼做有個bug,如果詳情頁可以分享,會報錯,原因是fn_name還沒註冊,所以需要在app.js的onLaunch的時候,把對應的函數名註冊上,這時候就可以解決這個問題了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章