嬌嬌jojojojo：微信小程序踩坑錄：canvas，post請求，頁面刷新
|
授權地(di)址 現在(zai)也不知(zhi)道距離(li)微信公(gong)測(ce)多少(shao)日子了(le)，反(fan)正感覺我是埋在(zai)微信小程序(xu)這個(ge)坑里(li)很久(jiu)了(le)，公(gong)司(si)的項目終于快(kuai)接近尾(wei)聲(sheng)，現在(zai)就騰(teng)點(dian)時間記錄(lu)下我的收獲，希望(wang)能給大家一點(dian)點(dian)幫助吧。 我做的(de)幾乎(hu)都是canvas的(de)東西，所(suo)以(yi)先(xian)說說這方面(mian)的(de)坑以(yi)及一些解(jie)決(jue)(jue)辦法，還有一些解(jie)決(jue)(jue)不了(le)的(de)希望(wang)大(da)家多多提出解(jie)決(jue)(jue)方案(an)哈。 坑一：canvas適配 剛開(kai)始(shi)做這方面(mian)的時候(hou)，我一直以(yi)為獲取不到(dao)機型以(yi)及手(shou)機的寬高，所以(yi)硬生生的把canvas的寬高都(dou)設成了(le)(le)固定(ding)的320px，想想偌大的平板上就320那么大有(you)多丑，產品估計也(ye)想把我活(huo)活(huo)掐死。好在無意間翻文檔，看(kan)到(dao)了(le)(le)wx.getSystemInfo(OBJECT)這個(ge)方法，OBJECT參數有(you)三種(zhong)：
success的情況下會返(fan)回：
示例代(dai)碼(ma)：
不管其他的(de)，看見那個windowWidth，我的(de)眼睛瞬間就亮了，自然(ran)而然(ran)，canvas的(de)適配問題也就解決了。 坑(keng)二：wx.canvasToTempFilePath()
官(guan)方文檔上就這樣(yang)草草了事，所以我也是陷在坑里好久(jiu)，后(hou)來才找到正(zheng)確的方法。 一開(kai)始我是寫成這樣的：
然(ran)(ran)后就是(shi)(shi)各(ge)(ge)種(zhong)報錯各(ge)(ge)種(zhong)郁(yu)悶，不知道大家是(shi)(shi)不是(shi)(shi)一開始(shi)就寫(xie)對了，反正(zheng)我(wo)是(shi)(shi)找(zhao)到正(zheng)確方法后有一種(zhong)想掐死(si)小(xiao)編(bian)的沖(chong)動，好(hao)歹舉個代碼實(shi)例(li)，不然(ran)(ran)憑那一句話，我(wo)是(shi)(shi)想不到那么多的。下(xia)面是(shi)(shi)正(zheng)確寫(xie)法：
話說，忽然想起由這(zhe)個(ge)(ge)問題(ti)引發(fa)的(de)另(ling)一(yi)個(ge)(ge)問題(ti)，就是當把(ba)canvas置為hidden的(de)時候(hou)，這(zhe)個(ge)(ge)方(fang)法就不(bu)生效了。按(an)理說，文檔上描述hidden只(zhi)是簡單的(de)控制顯示與隱藏，組(zu)件始終(zhong)會被渲染，既然被渲染，wx.canvasToTempFilePath()這(zhe)個(ge)(ge)方(fang)法不(bu)生效我是十分郁悶的(de)，現在是沒做這(zhe)方(fang)面的(de)功能，所以也(ye)沒去(qu)深(shen)入研究(jiu)了，有(you)遇到同樣(yang)情況的(de)可以給我回復的(de)。 坑三：canvas畫(hua)筆粗細 當時(shi)(shi)做了畫(hua)畫(hua)的(de)功能，在(zai)微(wei)信(xin)開發者(zhe)(zhe)工具上都是(shi)好(hao)好(hao)的(de)，但一到(dao)真機上，每次一選(xuan)擇(ze)畫(hua)筆粗細的(de)時(shi)(shi)候，就(jiu)畫(hua)不出(chu)來(lai)東(dong)西了，當時(shi)(shi)也是(shi)郁悶(men)好(hao)久，后(hou)來(lai)也不知道怎么找到(dao)原因(yin)(yin)的(de)，但最后(hou)解決了。因(yin)(yin)為當時(shi)(shi)畫(hua)筆的(de)粗細我傳(chuan)的(de)是(shi)字符串類型的(de)，后(hou)來(lai)改(gai)成數字類型的(de)就(jiu)好(hao)了，不知道是(shi)微(wei)信(xin)太嚴格，還是(shi)沒注(zhu)意到(dao)這(zhe)個小缺口。同樣的(de)，畫(hua)筆顏色也只能是(shi)16進制的(de)寫法，直接(jie)red，green或者(zhe)(zhe)縮寫成#ccc這(zhe)樣的(de)都不生效，大家注(zhu)意點(dian)就(jiu)行了。 坑四(si)：context.clearActions() 不(bu)(bu)知(zhi)道是(shi)不(bu)(bu)是(shi)我(wo)寫的有問(wen)題，這個方法一直(zhi)不(bu)(bu)生效，所(suo)以我(wo)就用(yong)另外一個方法代替(ti)了：
也是同樣的效果，清除畫(hua)布。 坑五：wx.drawCanvas()
官(guan)方文檔上(shang)舉的(de)(de)栗子一(yi)(yi)直是(shi)(shi)這(zhe)樣(yang)的(de)(de)，所(suo)(suo)以(yi)我覺得是(shi)(shi)誤(wu)導了n+1個(ge)人(ren)，出現的(de)(de)問題就(jiu)是(shi)(shi)：后(hou)(hou)面畫(hua)的(de)(de)一(yi)(yi)筆(bi)會把前面畫(hua)的(de)(de)一(yi)(yi)筆(bi)給(gei)覆蓋掉。我一(yi)(yi)開始也是(shi)(shi)這(zhe)樣(yang)，所(suo)(suo)以(yi)還癡癡的(de)(de)認為微信(xin)機(ji)制和js機(ji)制不一(yi)(yi)樣(yang)，后(hou)(hou)來還想著每畫(hua)一(yi)(yi)筆(bi)就(jiu)把這(zhe)一(yi)(yi)筆(bi)保存到一(yi)(yi)個(ge)數組(zu)(zu)中(zhong)，然后(hou)(hou)畫(hua)第二筆(bi)的(de)(de)時候，將這(zhe)個(ge)數組(zu)(zu)全都(dou)展(zhan)示出來，肉眼上(shang)看起來就(jiu)像是(shi)(shi)一(yi)(yi)筆(bi)一(yi)(yi)筆(bi)畫(hua)上(shang)去的(de)(de)一(yi)(yi)樣(yang)，實際上(shang)是(shi)(shi)每畫(hua)一(yi)(yi)筆(bi)，就(jiu)把整個(ge)數組(zu)(zu)都(dou)渲染一(yi)(yi)遍。 直到有(you)天又看了下官方(fang)文檔，才發現(xian)大可不必那么(me)麻煩(fan)，微信有(you)現(xian)成(cheng)的方(fang)法：
reverse方法置(zhi)為true就可以解(jie)決(jue)這個問題了。
canvas的坑就暫(zan)時告一段(duan)落，接著說一說其他方(fang)面(mian)的坑吧。 坑六：post請求(qiu)不(bu)生效 記得當時我是這樣寫的：
每次都會返回下面這個結果：
提示request:ok，但data偏偏是Array[0]。后來微信開發者工(gong)具升級了(le)好幾(ji)次說是修復了(le)post請求問題，但實際上(shang)還(huan)是沒完全修復，得再(zai)改一點(dian)點(dian)東西就可(ke)以(yi)了(le)：將header的content-type改成application/x-www-form-urlencoded就可(ke)以(yi)了(le)。
之前有(you)各種(zhong)說(shuo)法，說(shuo)application/json會被自動過(guo)濾掉，或者(zhe)又(you)加上一(yi)個(ge)application/json，成(cheng)了(le)2個(ge)，所以之前的解決(jue)辦法是直接將header去掉不寫就(jiu)可以請求成(cheng)功了(le)。現在微信修復了(le)bug后，要把content-type改成(cheng)application/x-www-form-urlencoded才可以。 坑七：刷新頁面 刷新頁(ye)面的(de)坑其實挺(ting)多的(de)，我羅(luo)列一下： 1、以(yi)前總有雙擊(ji)tabBar就能刷(shua)新(xin)頁面，現在沒法(fa)控制tabBar，這個也(ye)就沒辦法(fa)實現了； 2、只有(you)下(xia)拉刷(shua)新的(de)樣(yang)(yang)式(shi)（三個(ge)點轉(zhuan)呀(ya)轉(zhuan)那個(ge)），但沒有(you)上拉加載的(de)樣(yang)(yang)式(shi)（這個(ge)只能(neng)照著官(guan)方文檔的(de)樣(yang)(yang)式(shi)自己去(qu)設計了）； 3、下拉(la)(la)刷新在開發(fa)者工具(ju)上(shang)是好使的，3s后(hou)會自動(dong)拉(la)(la)回去(qu)，但在真機上(shang)就不生效(xiao)，那三個小點(dian)點(dian)就回不去(qu)了，必(bi)須手動(dong)拉(la)(la)回去(qu)； 4、從頁面(mian)A跳到(dao)頁面(mian)B，再從B返回到(dao)A，想讓A自動刷新，這個怎么做呢(ni)？ 先(xian)說下(xia)小程(cheng)序頁面(mian)(mian)(mian)刷(shua)新的(de)原理吧：小程(cheng)序的(de)框(kuang)架邏輯比(bi)較類似(si)react和vue框(kuang)架，屬于數據驅動界面(mian)(mian)(mian)刷(shua)新，所以想讓頁面(mian)(mian)(mian)刷(shua)新的(de)關鍵就(jiu)是setData()，但這只是被(bei)動的(de)讓頁面(mian)(mian)(mian)刷(shua)新。想讓頁面(mian)(mian)(mian)返回的(de)時候就(jiu)刷(shua)新，那就(jiu)要(yao)用到onShow這個生命周期(qi)函數了(le)，onShow是每(mei)次打開頁面(mian)(mian)(mian)都會(hui)調用一次，然(ran)后再(zai)和setData()結合(he)就(jiu)完美了(le)。 坑(keng)八：背景(jing)圖(tu)只能是絕(jue)對路(lu)徑 應該不止一(yi)個人遇到(dao)這個問題(ti)了(le)(le)(le)，背景(jing)圖(tu)寫(xie)的(de)相對路(lu)(lu)徑(jing)，在開發者工具(ju)上(shang)(shang)顯示是(shi)正常的(de)，但一(yi)到(dao)真機上(shang)(shang)就顯示不出來，其(qi)實只要改成絕對路(lu)(lu)徑(jing)就行了(le)(le)(le)，也(ye)就是(shi)將(jiang)圖(tu)片先(xian)上(shang)(shang)傳到(dao)自己(ji)的(de)服務器，然后寫(xie)這個路(lu)(lu)徑(jing)就可以(yi)了(le)(le)(le)。
|
