乾貨 | 這些小程序技巧，你至少會用到一個！你
- 2019 年 11 月 12 日
- 筆記
- 分享一些之前記錄的常用小技巧
- 解決小問題，歡迎討論指正
改變小程序原生組件大小
微信官方提供了一些基本組件，但是有的組件沒有提供類似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個：
- 一開始考慮使用單行超出省略號的方式來做：
這是單行文本的方式，一開始想着加固定高度，後來發現設備像素問題，出現有的設備會遮住半行，突然覺得不對，應該不是這樣做。
- 被設備像素問題誤導，去查找是不是不同設備里行高變化了 後來查詢到的多行注釋文本里，使用偽類太麻煩，於是查到一種樣式：
這種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你發現 他就是一個方塊，點了也是那樣靜靜的呆在那裡，沒有視覺點擊感……往往大多數情況下，我們都要自己定義按鈕樣式 於是自己寫了一套通用的小程序點擊按鈕效果
終於不再那麼死板……
