小程序模板網(wǎng)

小程序開發(fā),那些我們跳過的坑

發(fā)布時間:2018-05-08 14:30 所屬欄目:小程序開發(fā)教程

最近,微信小程序 掃碼簽到工具 正式上線了。

回首過去一個月的歷程,是時候該停下來做個階段性的總結(jié)了,回顧得失,以便持續(xù)改進。這篇文章,就總結(jié)一下過去跳過的那些坑吧。

 

這些坑大致可以歸為如下幾類:

  • 小程序某些技術(shù)細節(jié)與常用技術(shù)存在不一致。文檔中雖有提及,如果不仔細看容易跳坑。

  • 小程序的文檔太簡略,沒有注明支持哪些功能,哪些不支持,只有用了才知道。

  • 小程序的bug。

列舉一下幾個比較典型的坑吧。  

1. Get和Post請求的返回數(shù)據(jù)不支持二進制流。

小程序支持通過post獲取小程序碼(有點像菊花)。嘗試通過 wx.request 向微信服務(wù)器獲取 小程序碼 的圖片,結(jié)果發(fā)現(xiàn)返回的結(jié)果無法顯示。開始懷疑代碼有問題,調(diào)試之后,發(fā)現(xiàn)微信服務(wù)器返回的結(jié)果正確,而小程序會自動把二進制結(jié)果轉(zhuǎn)碼。更郁悶的是,這種轉(zhuǎn)碼丟失了文件內(nèi)容,并且轉(zhuǎn)換是不可逆的。

于是,我們改方案,把服務(wù)器當中轉(zhuǎn)站,讓小程序使用 wx.downloadFile 從服務(wù)器下載圖片。在收到小程序下載圖片的請求之后,服務(wù)器直接和微信服務(wù)器獲取小程序碼的圖片,然后以附件的形式返回給小程序。

問題解決。

2. Canvas和Image對圖片的各種不支持。

①掃碼簽到中用到了二維碼。

在開始的版本中,我們準備在Canvas上直接繪制二維碼,接著使用 wx.canvasToTempImage 函數(shù)保存為image文件,然后通過Image組件加載。

經(jīng)過調(diào)試,一切順利。運行的時候呢,發(fā)現(xiàn)有時候 在繪制完圖片之后,調(diào)用 wx.canvasToTempImage 函數(shù)失敗。這種情況在調(diào)試無法重現(xiàn),運行的時候偶爾出現(xiàn),不穩(wěn)定。

仔細檢查了代碼,沒問題啊。Google之后,有網(wǎng)友提出了解決方案,在drawImage完成之后,最好等3秒鐘再調(diào)用 wx.canvasToTempImage ,以保證保存成功。 

② Canvas和Image都不支持Base64圖片,Image無法保存。

最初的方案中,我們自己生成二維碼,后來為了兼容微信的“掃一掃”功能,我們決定改用小程序碼。

開始,我們把Image的src設(shè)置為Base64格式,從服務(wù)器上通過request獲取圖片的Base64編碼。小程序開發(fā)工具和iPhone上面測試都沒有問題,唯獨Android手機上無法正常顯示圖片。哦,原來在Android上,Canvas和Image都不支持Base64圖片??墒?..小程序開發(fā)文檔中并沒有這方面的說明啊。 

怎么解決Android手機上的這個問題呢?如果把Image改成URL形式呢,小程序無法保存圖片,以致即使是相同的圖片,每次都要從服務(wù)器獲取,這又加重了服務(wù)器的負擔。這樣吧,使用 wx.downloadFile 把文件下載到本地,然后再處理。 

3. 小程序碼的識別率太低。

上文提到,最初我們使用的簽到二維碼是自己生成的二維碼 (QRCode) ,正方形的那種。識別率高,缺點是不支持微信“掃一掃”。在使用過程中,我們發(fā)現(xiàn),相當數(shù)量的用戶看見二維碼,第一反應(yīng)會使用微信“掃一掃”去掃二維碼。為了滿足這個需求,那就把二維碼替換成微信的小程序碼(有點像菊花)吧。

可是,和方形二維碼相比,識別小程序碼的成功率非常低。小程序碼距離遠點、稍微有些變形或方向沒有對正都可能造成識別失敗。一種典型的使用場景是:簽到發(fā)起者把小程序碼投影到大屏幕上,由于投影儀的分辨率和電腦不一致,圖片可能產(chǎn)生變形。這種情況下,簽到者怎么掃都無法識別。 而以上所有這些,對于方形的二維碼,全都不是問題。

由于小程序碼的實現(xiàn)和識別原理沒有開放,我們也沒法采取圖片糾錯、還原等措施改善識別效果。

魚和熊掌,真的很難兼得。

4. 轉(zhuǎn)發(fā)小程序時默認帶參數(shù)。

關(guān)于轉(zhuǎn)發(fā),在官方文檔里是這么寫的。

在 Page 中定義 onShareAppMessage 函數(shù),設(shè)置該頁面的轉(zhuǎn)發(fā)信息。

  • 只有定義了此事件處理函數(shù),右上角菜單才會顯示 “轉(zhuǎn)發(fā)” 按鈕

  • 用戶點擊轉(zhuǎn)發(fā)按鈕的時候會調(diào)用

于是,在實現(xiàn)中,我們定義了此方法,把方法體留空。然后紕漏出現(xiàn)了,當用戶簽到之后再分享,收到的人一點擊分享的鏈接會進入簽到狀態(tài)。

查了很久,才發(fā)現(xiàn)原因是在分享的時候,把當前頁面加載時候的參數(shù)也給分享過去了,可是,onShareAppMessage函數(shù)里面什么都沒做啊。

看來,什么都不做的話,它就會默認分享頁面加載時的參數(shù)。為了修復(fù)這個bug,就嘗試return一個object,并給這個object賦值path和title兩個參數(shù)。

終于解決了。

除了上面提到的之外,還有不少微小的bug,不一而足。雖然很快就解決了,相對開發(fā)源生代碼而言,還是有些影響開發(fā)效率的。

過去的這一個月,有些累。 

相對之前鋪天蓋地的小程序宣傳,其實它沒我們想象中的那么好。當然,不得不承認,微信平臺的龐大用戶量和小程序無需下載的便利性,這是國內(nèi)其他任何平臺無法做到的。

對于 掃碼簽到工具 這種輕量級的應(yīng)用,開發(fā)微信小程序或許是比較好的選擇。

至于復(fù)雜的應(yīng)用,是否要開發(fā)小程序版本,可能就得慎重了。



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