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

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

改變小程序原生組件大小

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

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

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

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

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

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

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

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

后來在頁面中第一反應也是使用單獨的json文件設置，

果斷發現，沒有卵用啊，頁面背景還是灰色:

解決方法，在對應的wxss文件中設置一個page類：

小程序路由傳參，傳遞對象參數

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

但當你確實像要傳遞的參數為對象時，尤其是父子對象， 傳輸之前可以將對象轉為json字符串

" />

" />

但是因為url的長度有限，對象太長，結果發現拼接在URL之后不完整，導致之后解析不出來， 所以路由傳參對象時要注意，傳參的對象不能太長。

接收方式：

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

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

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

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

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

我們現在只想把discountList數組中選中對象的click值變為1，怎么辦？

No，No，你會發現這樣是不行的，我教你一個簡單方法：

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

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

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

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

具體是什么屁……

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

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

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

代碼簡單至極，和vue通用

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

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

小程序跳轉寫絕對路徑

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

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

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

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

這是單行文本的方式，一開始想著加固定高度，后來發現設備像素問題，出現有的設備會遮住半行，突然覺得不對，應該不是這樣做。

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

這種css只適用于webkit和移動端，于是完美使用在小程序上，但是記得不能設置固定高度！！

小程序頁面設置頁面高度100%

放代碼：

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

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

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

解決方法：

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

冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。 非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。

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

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

小程序map組件不顯示坐標，且出現了bing地圖的標識

map地圖組件使用:

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

后來研究發現，map組件的組件渲染是優先于接口setData的異步賦值的，導致map的渲染過程中實際上longitude和latitude值都為空，且map只渲染一次。

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

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

小程序按鈕點擊css效果

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

終于不再那么死板……