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

本身從一手看官方文檔到擼過6個小程序，本身填了很多坑，也在微信社區見證了小程序一次次改版

• 分享一些以前記錄的經常使用小技巧
• 我的能力有限，解決小問題，歡迎討論指正

都是小技巧，廢話很少說，上代碼！

改變小程序原生組件大小

微信官方提供了一些基本組件，可是有的組件沒有提供相似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你發現 他就是一個方塊，點了也是那樣靜靜的呆在那裏，沒有視覺點擊感……每每大多數狀況下，咱們都要本身定義按鈕樣式 因而本身寫了一套通用的小程序點擊按鈕效果

終於再也不那麼死板……

最後

• 歡迎討論指正，歡迎點贊呀~
• 剛完成的博客：http://118.126.111.172/ ，基於Vue+Egg.js+MySql，歡迎訪問~~
• Github源碼：github.com/pangxiaolon… ，歡迎給星星~~