現在也不知道距離微信公測多少日子了，反正感覺我是埋在微信小程序這個坑里很久了，公司的項目終于快接近尾聲，現在就騰點時間記錄下我的收獲，希望能給大家一點點幫助吧。

我做的幾乎都是canvas的東西，所以先說說這方面的坑以及一些解決辦法，還有一些解決不了的希望大家多多提出解決方案哈。

坑一：canvas適配

剛開始做這方面的時候，我一直以為獲取不到機型以及手機的寬高，所以硬生生的把canvas的寬高都設成了固定的320px，想想偌大的平板上就320那么大有多丑，產品估計也想把我活活掐死。好在無意間翻文檔，看到了wx.getSystemInfo(OBJECT)這個方法，OBJECT參數有三種：

success的情況下會返回：

示例代碼：

wx.getSystemInfo({  success: function(res) {    console.log(res.model)    console.log(res.pixelRatio)    console.log(res.windowWidth)    console.log(res.windowHeight)    console.log(res.language)    console.log(res.version)  }})

不管其他的，看見那個windowWidth，我的眼睛瞬間就亮了，自然而然，canvas的適配問題也就解決了。

坑二：wx.canvasToTempFilePath()

官方文檔上就這樣草草了事，所以我也是陷在坑里好久，后來才找到正確的方法。

一開始我是寫成這樣的：

wx.canvasToTempFilePath("1");

然后就是各種報錯各種郁悶，不知道大家是不是一開始就寫對了，反正我是找到正確方法后有一種想掐死小編的沖動，好歹舉個代碼實例，不然憑那一句話，我是想不到那么多的。下面是正確寫法：

wx.canvasToTempFilePath({    canvasId: '1',    success: function (res) {        var tempFilePath = res.tempFilePath;        console.log(tempFilePath);    },    fail: function (res) {        console.log(res);    }});

話說，忽然想起由這個問題引發的另一個問題，就是當把canvas置為hidden的時候，這個方法就不生效了。按理說，文檔上描述hidden只是簡單的控制顯示與隱藏，組件始終會被渲染，既然被渲染，wx.canvasToTempFilePath()這個方法不生效我是十分郁悶的，現在是沒做這方面的功能，所以也沒去深入研究了，有遇到同樣情況的可以給我回復的。

坑三：canvas畫筆粗細

當時做了畫畫的功能，在微信開發者工具上都是好好的，但一到真機上，每次一選擇畫筆粗細的時候，就畫不出來東西了，當時也是郁悶好久，后來也不知道怎么找到原因的，但最后解決了。因為當時畫筆的粗細我傳的是字符串類型的，后來改成數字類型的就好了，不知道是微信太嚴格，還是沒注意到這個小缺口。同樣的，畫筆顏色也只能是16進制的寫法，直接red，green或者縮寫成#ccc這樣的都不生效，大家注意點就行了。

坑四：context.clearActions()

不知道是不是我寫的有問題，這個方法一直不生效，所以我就用另外一個方法代替了：

context.clearRect(0, 0, 320, 320);

也是同樣的效果，清除畫布。

坑五：wx.drawCanvas()

wx.drawCanvas({   canvasId: 'firstCanvas',   actions: context.getActions() // 獲取繪圖動作數組})

官方文檔上舉的栗子一直是這樣的，所以我覺得是誤導了n+1個人，出現的問題就是：后面畫的一筆會把前面畫的一筆給覆蓋掉。我一開始也是這樣，所以還癡癡的認為微信機制和js機制不一樣，后來還想著每畫一筆就把這一筆保存到一個數組中，然后畫第二筆的時候，將這個數組全都展示出來，肉眼上看起來就像是一筆一筆畫上去的一樣，實際上是每畫一筆，就把整個數組都渲染一遍。

直到有天又看了下官方文檔，才發現大可不必那么麻煩，微信有現成的方法：

reverse方法置為true就可以解決這個問題了。

  wx.drawCanvas({    canvasId: id,    actions: context.getActions(),    reverse:true  })

canvas的坑就暫時告一段落，接著說一說其他方面的坑吧。

坑六：post請求不生效

記得當時我是這樣寫的：

wx.request({    url: url,    method:"POST",    data: {       "paintId":0,       "limit":10,       "openId":openid    },    header:{'content-type': 'application/json'},    success: function(res) {        console.log(res)    }})

每次都會返回下面這個結果：

提示request:ok，但data偏偏是Array[0]。后來微信開發者工具升級了好幾次說是修復了post請求問題，但實際上還是沒完全修復，得再改一點點東西就可以了：將header的content-type改成application/x-www-form-urlencoded就可以了。

wx.request({    url: url,    method:"POST",    data: {       "paintId":0,       "limit":10,       "openId":openid    },    header:{'content-type': 'application/x-www-form-urlencoded'},    success: function(res) {        console.log(res)    }})

之前有各種說法，說application/json會被自動過濾掉，或者又加上一個application/json，成了2個，所以之前的解決辦法是直接將header去掉不寫就可以請求成功了。現在微信修復了bug后，要把content-type改成application/x-www-form-urlencoded才可以。

坑七：刷新頁面

刷新頁面的坑其實挺多的，我羅列一下：

1、以前總有雙擊tabBar就能刷新頁面，現在沒法控制tabBar，這個也就沒辦法實現了；

2、只有下拉刷新的樣式（三個點轉呀轉那個），但沒有上拉加載的樣式（這個只能照著官方文檔的樣式自己去設計了）；

3、下拉刷新在開發者工具上是好使的，3s后會自動拉回去，但在真機上就不生效，那三個小點點就回不去了，必須手動拉回去，或者當數據加載完的時候加上一個wx.stopPullDownRefresh()方法讓它停止刷新然后自動回去。

4、從頁面A跳到頁面B，再從B返回到A，想讓A自動刷新，這個怎么做呢？

先說下小程序頁面刷新的原理吧：小程序的框架邏輯比較類似react和vue框架，屬于數據驅動界面刷新，所以想讓頁面刷新的關鍵就是setData()，但這只是被動的讓頁面刷新。想讓頁面返回的時候就刷新，那就要用到onShow這個生命周期函數了，onShow是每次打開頁面都會調用一次，然后再和setData()結合就完美了。

坑八：背景圖只能是絕對路徑

應該不止一個人遇到這個問題了，背景圖寫的相對路徑，在開發者工具上顯示是正常的，但一到真機上就顯示不出來，其實只要改成絕對路徑就行了，也就是將圖片先上傳到自己的服務器，然后寫這個路徑就可以了。

坑九：傳對象到后臺不生效

當時傳了一組對象到后臺，結果后臺收到的就是[Object Object]這個鬼樣子，一直很郁悶，后來知道了JSON.stringify()方法，用了這個方法就OK了，因為傳給后臺的數據要提前字符串化。雖然現在是好使的，但中間其實也是波折不斷，不過結果是好的，也就開心了，哈哈哈。順便普及一下字符串轉對象的方法：JSON.parse()。

今天就寫這么多吧，一直在踩坑中，上面也還有很多沒解決的問題以及可能不對的地方，希望大家多多給我提意見哈。