授權(quán)地址

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

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

坑一：canvas適配

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

success的情況下會(huì)返回：

示例代碼：

1. wx.getSystemInfo({
2. success: function(res) {
3. console.log(res.model)
4. console.log(res.pixelRatio)
5. console.log(res.windowWidth)
6. console.log(res.windowHeight)
7. console.log(res.language)
8. console.log(res.version)
9. }
10. })

不管其他的，看見(jiàn)那個(gè)windowWidth，我的眼睛瞬間就亮了，自然而然，canvas的適配問(wèn)題也就解決了。

坑二：wx.canvasToTempFilePath()

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

一開(kāi)始我是寫(xiě)成這樣的：

1. wx.canvasToTempFilePath("1");

然后就是各種報(bào)錯(cuò)各種郁悶，不知道大家是不是一開(kāi)始就寫(xiě)對(duì)了，反正我是找到正確方法后有一種想掐死小編的沖動(dòng)，好歹舉個(gè)代碼實(shí)例，不然憑那一句話，我是想不到那么多的。下面是正確寫(xiě)法：

1. wx.canvasToTempFilePath({
2. canvasId: '1',
3. success: function (res) {
4. var tempFilePath = res.tempFilePath;
5. console.log(tempFilePath);
6. },
7. fail: function (res) {
8. console.log(res);
9. }
10. });

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

坑三：canvas畫(huà)筆粗細(xì)

當(dāng)時(shí)做了畫(huà)畫(huà)的功能，在微信開(kāi)發(fā)者工具上都是好好的，但一到真機(jī)上，每次一選擇畫(huà)筆粗細(xì)的時(shí)候，就畫(huà)不出來(lái)東西了，當(dāng)時(shí)也是郁悶好久，后來(lái)也不知道怎么找到原因的，但最后解決了。因?yàn)楫?dāng)時(shí)畫(huà)筆的粗細(xì)我傳的是字符串類(lèi)型的，后來(lái)改成數(shù)字類(lèi)型的就好了，不知道是微信太嚴(yán)格，還是沒(méi)注意到這個(gè)小缺口。同樣的，畫(huà)筆顏色也只能是16進(jìn)制的寫(xiě)法，直接red，green或者縮寫(xiě)成#ccc這樣的都不生效，大家注意點(diǎn)就行了。

坑四：context.clearActions()

不知道是不是我寫(xiě)的有問(wèn)題，這個(gè)方法一直不生效，所以我就用另外一個(gè)方法代替了：

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

也是同樣的效果，清除畫(huà)布。

坑五：wx.drawCanvas()

1. context.clearRect(0, 0, 320, 320);wx.drawCanvas({
2. canvasId: 'firstCanvas',
3. actions: context.getActions() // 獲取繪圖動(dòng)作數(shù)組
4. })

官方文檔上舉的栗子一直是這樣的，所以我覺(jué)得是誤導(dǎo)了n+1個(gè)人，出現(xiàn)的問(wèn)題就是：后面畫(huà)的一筆會(huì)把前面畫(huà)的一筆給覆蓋掉。我一開(kāi)始也是這樣，所以還癡癡的認(rèn)為微信機(jī)制和js機(jī)制不一樣，后來(lái)還想著每畫(huà)一筆就把這一筆保存到一個(gè)數(shù)組中，然后畫(huà)第二筆的時(shí)候，將這個(gè)數(shù)組全都展示出來(lái)，肉眼上看起來(lái)就像是一筆一筆畫(huà)上去的一樣，實(shí)際上是每畫(huà)一筆，就把整個(gè)數(shù)組都渲染一遍。

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

reverse方法置為true就可以解決這個(gè)問(wèn)題了。

1. wx.drawCanvas({
2. canvasId: id,
3. actions: context.getActions(),
4. reverse:true
5. })

canvas的坑就暫時(shí)告一段落，接著說(shuō)一說(shuō)其他方面的坑吧。

坑六：post請(qǐng)求不生效

記得當(dāng)時(shí)我是這樣寫(xiě)的：

1. wx.request({
2. url: url,
3. method:"POST",
4. data: {
5. "paintId":0,
6. "limit":10,
7. "openId":openid
8. },
9. header:{'content-type': 'application/json'},
10. success: function(res) {
11. console.log(res)
12. }
13. })

每次都會(huì)返回下面這個(gè)結(jié)果：

提示request:ok，但data偏偏是Array[0]。后來(lái)微信開(kāi)發(fā)者工具升級(jí)了好幾次說(shuō)是修復(fù)了post請(qǐng)求問(wèn)題，但實(shí)際上還是沒(méi)完全修復(fù)，得再改一點(diǎn)點(diǎn)東西就可以了：將header的content-type改成application/x-www-form-urlencoded就可以了。

1. wx.request({
2. url: url,
3. method:"POST",
4. data: {
5. "paintId":0,
6. "limit":10,
7. "openId":openid
8. },
9. header:{'content-type': 'application/x-www-form-urlencoded'},
10. success: function(res) {
11. console.log(res)
12. }
13. })

之前有各種說(shuō)法，說(shuō)application/json會(huì)被自動(dòng)過(guò)濾掉，或者又加上一個(gè)application/json，成了2個(gè)，所以之前的解決辦法是直接將header去掉不寫(xiě)就可以請(qǐng)求成功了?，F(xiàn)在微信修復(fù)了bug后，要把content-type改成application/x-www-form-urlencoded才可以。

坑七：刷新頁(yè)面

刷新頁(yè)面的坑其實(shí)挺多的，我羅列一下：

1、以前總有雙擊tabBar就能刷新頁(yè)面，現(xiàn)在沒(méi)法控制tabBar，這個(gè)也就沒(méi)辦法實(shí)現(xiàn)了；

2、只有下拉刷新的樣式（三個(gè)點(diǎn)轉(zhuǎn)呀轉(zhuǎn)那個(gè)），但沒(méi)有上拉加載的樣式（這個(gè)只能照著官方文檔的樣式自己去設(shè)計(jì)了）；

3、下拉刷新在開(kāi)發(fā)者工具上是好使的，3s后會(huì)自動(dòng)拉回去，但在真機(jī)上就不生效，那三個(gè)小點(diǎn)點(diǎn)就回不去了，必須手動(dòng)拉回去；

4、從頁(yè)面A跳到頁(yè)面B，再?gòu)腂返回到A，想讓A自動(dòng)刷新，這個(gè)怎么做呢？

先說(shuō)下小程序頁(yè)面刷新的原理吧：小程序的框架邏輯比較類(lèi)似react和vue框架，屬于數(shù)據(jù)驅(qū)動(dòng)界面刷新，所以想讓頁(yè)面刷新的關(guān)鍵就是setData()，但這只是被動(dòng)的讓頁(yè)面刷新。想讓頁(yè)面返回的時(shí)候就刷新，那就要用到onShow這個(gè)生命周期函數(shù)了，onShow是每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次，然后再和setData()結(jié)合就完美了。

坑八：背景圖只能是絕對(duì)路徑

應(yīng)該不止一個(gè)人遇到這個(gè)問(wèn)題了，背景圖寫(xiě)的相對(duì)路徑，在開(kāi)發(fā)者工具上顯示是正常的，但一到真機(jī)上就顯示不出來(lái)，其實(shí)只要改成絕對(duì)路徑就行了，也就是將圖片先上傳到自己的服務(wù)器，然后寫(xiě)這個(gè)路徑就可以了。

坑九：傳對(duì)象到后臺(tái)不生效

當(dāng)時(shí)傳了一組對(duì)象到后臺(tái)，結(jié)果后臺(tái)收到的就是[Object Object]這個(gè)鬼樣子，一直很郁悶，后來(lái)知道了JSON.stringify()方法，用了這個(gè)方法就OK了，因?yàn)閭鹘o后臺(tái)的數(shù)據(jù)要提前字符串化。雖然現(xiàn)在是好使的，但中間其實(shí)也是波折不斷，不過(guò)結(jié)果是好的，也就開(kāi)心了，哈哈哈。順便普及一下字符串轉(zhuǎn)對(duì)象的方法：JSON.parse()。

今天就寫(xiě)這么多吧，一直在踩坑中，上面也還有很多沒(méi)解決的問(wèn)題以及可能不對(duì)的地方，希望大家多多給我提意見(jiàn)哈。