這些小程序技巧，你敢說你一個用不到？

都是小技巧，廢話不多說，上代碼！

改變小程序原生組件大小

微信官方提供了一些基本組件，但是有的組件沒有提供類似size的屬性，我們只需要一個css就可以解決,以radio為例：

小程序picker組件的range-key不生效

小程序picker使用過程中發(fā)現(xiàn)按官方文檔寫完，提示列表渲染為[Object Object]，先看文檔：

使用場景為如果傳入組件是對象數(shù)組，你需要設(shè)置range-key來設(shè)置顯示該數(shù)組中的哪個value為列表顯示內(nèi)容

按照官方文檔，問題出在range-key的類型，因為在{{}}中使用的都是相應(yīng)數(shù)據(jù)，也就導(dǎo)致傳入組件的不是一個string值，正確的使用方法為：

為range-key使用一個單引號包起來，或者直接使用nickname，不使用{{}}

小程序修改單頁面的背景顏色

設(shè)置小程序的頁面背景顏色，一開始設(shè)置了一個全局的背景顏色，在app.json的widows對象中進行設(shè)置

后來在頁面中第一反應(yīng)也是使用單獨的json文件設(shè)置，

果斷發(fā)現(xiàn)，沒有卵用啊，頁面背景還是灰色:

解決方法，在對應(yīng)的wxss文件中設(shè)置一個page類：

小程序路由傳參，傳遞對象參數(shù)

小程序的傳參方式都是通過拼接在url后面進行傳參，通常只需要綁定傳參id，將id綁定為{{item.id}}，在點擊事件里面使用event.currentTarget的方式接受

但當(dāng)你確實像要傳遞的參數(shù)為對象時，尤其是父子對象， 傳輸之前可以將對象轉(zhuǎn)為json字符串

" />

" />

但是因為url的長度有限，對象太長，結(jié)果發(fā)現(xiàn)拼接在URL之后不完整，導(dǎo)致之后解析不出來， 所以路由傳參對象時要注意，傳參的對象不能太長。

接收方式：

小程序單獨設(shè)置data中對象的具體屬性值

這是一個新手和老手可能都會遇到的問題，因為小程序所有數(shù)據(jù)要響應(yīng)，必須使用this.setData()方法， 那現(xiàn)在假設(shè)我有這樣一個數(shù)據(jù)：

我執(zhí)行只想為addressData的address屬性賦一個值該怎么做？ 也許你會這樣：

No，No，你不需要這樣，你只需要：

就這么簡單，如果你沒用過你一定很興奮，不要著急我們把問題升級！假設(shè)我現(xiàn)在的數(shù)據(jù)變成了這樣：

我們現(xiàn)在只想把discountList數(shù)組中選中對象的click值變?yōu)?，怎么辦？

No，No，你會發(fā)現(xiàn)這樣是不行的，我教你一個簡單方法：

但是！每次都要定義變量看起來就躁！所以還要再簡單！再簡單！

小程序接口加密時去除昵稱數(shù)據(jù)含有的reshuffle表情（例如emoji）

你有沒有遇見過，你要對每個用戶的微信昵稱就行接口發(fā)送給后臺，但是他隨機的報錯了…… 我的天，因為每次接口都要經(jīng)過MD5加密，需要將獲取的用戶昵稱一起加密發(fā)送到后臺，開始毫無知覺拿過來直接扔進去加密，直到用后臺人員的微信測試，中文驗簽失敗，幾周前已經(jīng)調(diào)整過中文驗簽的簽名算法，后來發(fā)現(xiàn)……

他的微信昵稱里有3個“屁”……

具體是什么屁……

你打開你的輸入法的emoji你會發(fā)現(xiàn)，里面有各種表情，其中就有一個屁…… 于是想到的方法，將特殊符號先去除，替換成指定符號，再扔進去加密，上代碼：

至于為什么不是去除特殊表情，一開始第一反應(yīng)是去除就好了，后來想到萬一還有人只用特殊表情做昵稱……那存進去的就是空字符串，到時候拿出來顯示為空的，視覺不好看。

小程序class中使用三元表達式

代碼簡單至極，和vue通用

去除小程序swiper組件的滾動條

小程序自帶swiper組件在滾動到時候會用滾動條出現(xiàn)，有時候為了頁面的干凈，所以……干掉它！

小程序跳轉(zhuǎn)寫絕對路徑

忘記為啥用到了，反正最后弄明白了，路徑拼接以‘/’開始，你總會用到

小程序多行文本溢出顯示省略號

這個問題，其實問題不大，但是解決了一會，主要原因有2個：

1. 一開始考慮使用單行超出省略號的方式來做：

這是單行文本的方式，一開始想著加固定高度，后來發(fā)現(xiàn)設(shè)備像素問題，出現(xiàn)有的設(shè)備會遮住半行，突然覺得不對，應(yīng)該不是這樣做。

2.被設(shè)備像素問題誤導(dǎo)，去查找是不是不同設(shè)備里行高變化了 后來查詢到的多行注釋文本里，使用偽類太麻煩，于是查到一種樣式：

這種css只適用于webkit和移動端，于是完美使用在小程序上，但是記得不能設(shè)置固定高度?。?/p>

小程序頁面設(shè)置頁面高度100%

放代碼：

關(guān)鍵代碼是父元素設(shè)置position: fixed;height: 100%;width: 100%; 注意了里面的子元素不要再使用fixed，使用absolute基于父元素定位

小程序點擊事件阻止冒泡處理

這個時候會出現(xiàn)一種情況，當(dāng)我點擊view時，他會跳轉(zhuǎn)到指定頁面，當(dāng)我點擊view里面的image時，他會跳轉(zhuǎn)2遍指定頁面，第一反應(yīng)就是當(dāng)年做的第一個前端項目出現(xiàn)的新的認知，事件冒泡。

解決方法：

在小程序中事件分為冒泡事件和非冒泡事件：

冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。 非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

其中有一行字單獨說明了：

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

小程序map組件不顯示坐標(biāo)，且出現(xiàn)了bing地圖的標(biāo)識

map地圖組件使用:

使用map的過程中出現(xiàn)一個問題，在onload方法中調(diào)用接口，對data中的lng和lat進行賦值，然后發(fā)現(xiàn)，map實際顯示地圖為空，沒有坐標(biāo)，而且下方出現(xiàn)了bing地圖的標(biāo)志，頓時懵逼，難道m(xù)ap組件使用的不是騰訊地圖的坐標(biāo)？是bing地圖的坐標(biāo)？不會這么喪良心吧……

后來研究發(fā)現(xiàn)，map組件的組件渲染是優(yōu)先于接口setData的異步賦值的，導(dǎo)致map的渲染過程中實際上longitude和latitude值都為空，且map只渲染一次。

最后拯救的方法是使用wx:if

初始化mapOn為false，接口賦值lng和lat之后將mapOn賦值true，渲染map！

小程序按鈕點擊css效果

小程序自帶的button組件是有點擊效果的，但是一旦自定義了class你發(fā)現(xiàn) 他就是一個方塊，點了也是那樣靜靜的呆在那里，沒有視覺點擊感……往往大多數(shù)情況下，我們都要自己定義按鈕樣式 于是自己寫了一套通用的小程序點擊按鈕效果

終于不再那么死板……