小程序模板網(wǎng)

嬌嬌jojojojo:微信小程序踩坑錄:canvas,post請(qǐng)求,頁(yè)面刷新

發(fā)布時(shí)間:2018-03-30 16:00 所屬欄目:小程序開(kāi)發(fā)教程

授權(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)哈。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/22984.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)