微信小程序開發(fā)需要注意的坑有哪些
這些坑大致可以歸為如下幾類:
小程序某些技術(shù)細(xì)節(jié)與常用技術(shù)存在不一致。文檔中雖有提及,如果不仔細(xì)看容易跳坑。
小程序的文檔太簡(jiǎn)略,沒有注明支持哪些功能,哪些不支持,只有用了才知道。
小程序的bug。
列舉一下幾個(gè)比較典型的坑吧。
1、小程序名稱可以由中文、數(shù)字、英文。長(zhǎng)度在3-20個(gè)字符之間,一個(gè)中文字等于2個(gè)字符。
2、小程序名稱不得與公眾平臺(tái)已有的訂閱號(hào)、服務(wù)號(hào)重復(fù)。如提示重名,請(qǐng)更換名稱進(jìn)行設(shè)置。
3、小程序名稱在帳號(hào)信息設(shè)置時(shí)完成,請(qǐng)謹(jǐn)慎設(shè)置,一旦設(shè)置暫不支持修改。
4、更換名稱進(jìn)行設(shè)置。如果企業(yè)商標(biāo),組織名稱等名稱被侵權(quán),可通過公眾平臺(tái)侵權(quán)投訴流程發(fā)起投訴,取回名稱使用權(quán)。
5、個(gè)人開發(fā)者無法申請(qǐng)微信小程序;目前微信僅支持企業(yè)、政府、媒體、其他組織申請(qǐng)。
6、一個(gè)主體可以注冊(cè)30個(gè),一個(gè)綁定身份的開發(fā)者只能創(chuàng)建5個(gè)微信小程序。
對(duì)于員工來說,請(qǐng)不要隨便借給你的老板你的微信來注冊(cè)微信小程序,因?yàn)槟氵@樣就沒有機(jī)會(huì)了。
對(duì)于老板來說,請(qǐng)不要隨便借給你的員工微信來注冊(cè)微信小程序,因?yàn)槟憧赡芤换貋怼?/p>
7、如果你不是特殊組織,你還是要花300元進(jìn)行認(rèn)證。
即使你對(duì)公帳號(hào)已經(jīng)驗(yàn)證,你也需要繳納300****元(支持微信支付)進(jìn)行驗(yàn)證,這樣才能夠打開審核開關(guān),發(fā)布小程序。
微信支付需要微信認(rèn)證后才能使用。
8、服務(wù)器配置每月只有3次修改機(jī)會(huì),省著點(diǎn)用,小心沒機(jī)會(huì)。
沒事別亂動(dòng)下面的配置,一定確定了再動(dòng),并且一次性寫完整,不然你改個(gè)小標(biāo)點(diǎn)都會(huì)浪費(fèi)你的一次機(jī)會(huì)。
9、你的域名、備案、https要準(zhǔn)備好,不然做不了。(服務(wù)器域名需進(jìn)過ICP備案、新備案域名需24小時(shí)候才能配置。域名格式只支持雅文大小寫字母、數(shù)字及“-”,不支持IP地址及端口號(hào))
10、小程序頭像、介紹每月只能修改5次,服務(wù)范圍每月只能修改1次。小程序二維碼在第一個(gè)版本上線后才能獲得。
11、選用模板消息時(shí),你可用該標(biāo)題的模板搭配不同的關(guān)鍵詞使用,配置提交后關(guān)鍵詞種類和順序?qū)⒉荒苄薷摹?/p>
12、找不到模板關(guān)鍵詞的時(shí)候,可以進(jìn)行申請(qǐng)?zhí)砑?。每月可以提?次新關(guān)鍵詞,通過后會(huì)被共享。(堆自家關(guān)鍵詞的好機(jī)會(huì)呀!!)
13、一個(gè)小程序賬號(hào)只有一個(gè)管理員(可修改),可以綁定10位開發(fā)者。
14、重點(diǎn)注意:
開發(fā)版本:使用開發(fā)者工具,可將代碼上傳到開發(fā)版本中。 開發(fā)版本只保留每人最新的一份上傳的代碼。點(diǎn)擊提交審核,可將代碼提交審核。開發(fā)版本可刪除,不影響線上版本和審核中版本的代碼。
審核中版本:只能有一份代碼處于審核中。有審核結(jié)果后可以發(fā)布到線上,也可直接重新提交審核,覆蓋原審核版本。
線上版本:線上所有用戶使用的代碼版本,該版本代碼在新版本代碼發(fā)布后被覆蓋更新。
15、小程序AppSecret只有管理員才能查看,平臺(tái)不會(huì)明文保存AppSecret。
16、數(shù)據(jù)分析只統(tǒng)計(jì)已發(fā)布線上版本使用數(shù)值,同時(shí)提供實(shí)時(shí)統(tǒng)計(jì)數(shù)據(jù)。
17、開發(fā)者工具目前提供windows 64 、 windows 32 、 mac版本(版本目前持續(xù)更新迭代中,可能需要常常去update)。
18、內(nèi)測(cè)階段,代碼上傳功能僅管理員微信號(hào)可操作。
19、書寫代碼后,工具會(huì)自動(dòng)幫助用戶保存當(dāng)前的代碼編輯狀態(tài),直接關(guān)閉工具或者切換到別的項(xiàng)目,并不會(huì)丟失已經(jīng)編輯的文件狀態(tài),但需要注意的是,只有保存文件,修改內(nèi)容才會(huì)真實(shí)的寫到硬盤上,并觸發(fā)實(shí)時(shí)預(yù)覽。
20、獲取用戶輸入:需要使用組件的屬性bindchange將用戶的輸入內(nèi)容同步到 AppService。
21、腳本內(nèi)不能使用window等對(duì)象:
JsCore是一個(gè)沒有窗口對(duì)象的環(huán)境,所以不能在腳本中使用window,也無法在腳本中操作組件。
22、zepto/jquery 會(huì)使用到window對(duì)象和document對(duì)象,所以無法使用。
23、一個(gè)應(yīng)用同時(shí)只能打開5個(gè)頁面,當(dāng)已經(jīng)打開了5個(gè)頁面之后,wx.navigateTo不能正常打開新頁面。請(qǐng)避免多層級(jí)的交互方式,或者使用wx.redirectTo。
24、樣式表不支持級(jí)聯(lián)選擇器:
WXSS支持以.開始的類選擇器;可以使用標(biāo)簽選擇器,控制同一類組件的樣式。
25、本地資源無法通過 css 獲?。?/p>
background-image:可以使用網(wǎng)絡(luò)圖片,或者 base64,或者使用標(biāo)簽。
26、修改窗口的背景色:
使用 page 標(biāo)簽選擇器,可以修改頂層節(jié)點(diǎn)的樣式。
27、前臺(tái)、后臺(tái)定義:
當(dāng)用戶點(diǎn)擊左上角關(guān)閉,或者按了設(shè)備Home 鍵離開微信,小程序并沒有直接銷毀,而是進(jìn)入了后臺(tái);
當(dāng)再次進(jìn)入微信或再次打開小程序,又會(huì)從后臺(tái)進(jìn)入前臺(tái),只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間,或者系統(tǒng)資源占用過高,才會(huì)被真正的銷毀。
28、App() 必須在 app.js 中注冊(cè),且不能注冊(cè)多個(gè)。
不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ,使用 this 就可以拿到 app 實(shí)例。
不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage(),此時(shí) page 還沒有生成。
通過 getApp() 獲取實(shí)例之后,不要私自調(diào)用生命周期函數(shù)。
29、tabBar 是一個(gè)數(shù)組,只能配置最少2個(gè)、最多5個(gè)tab,tab 按數(shù)組的順序排序。(底部導(dǎo)航欄)
30、可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。
1. Get和Post請(qǐng)求的返回?cái)?shù)據(jù)不支持二進(jìn)制流。
小程序支持通過post獲取小程序碼(有點(diǎn)像菊花)。嘗試通過wx.request向微信服務(wù)器獲取小程序碼的圖片,結(jié)果發(fā)現(xiàn)返回的結(jié)果無法顯示。開始懷疑代碼有問題,調(diào)試之后,發(fā)現(xiàn)微信服務(wù)器返回的結(jié)果正確,而小程序會(huì)自動(dòng)把二進(jìn)制結(jié)果轉(zhuǎn)碼。更郁悶的是,這種轉(zhuǎn)碼丟失了文件內(nèi)容,并且轉(zhuǎn)換是不可逆的。
于是,我們改方案,把服務(wù)器當(dāng)中轉(zhuǎn)站,讓小程序使用wx.downloadFile從服務(wù)器下載圖片。在收到小程序下載圖片的請(qǐng)求之后,服務(wù)器直接和微信服務(wù)器獲取小程序碼的圖片,然后以附件的形式返回給小程序。
問題解決。
2. Canvas和Image對(duì)圖片的各種不支持。
①掃碼簽到中用到了二維碼。
在開始的版本中,我們準(zhǔn)備在Canvas上直接繪制二維碼,接著使用wx.canvasToTempImage函數(shù)保存為image文件,然后通過Image組件加載。
經(jīng)過調(diào)試,一切順利。運(yùn)行的時(shí)候呢,發(fā)現(xiàn)有時(shí)候在繪制完圖片之后,調(diào)用wx.canvasToTempImage函數(shù)失敗。這種情況在調(diào)試無法重現(xiàn),運(yùn)行的時(shí)候偶爾出現(xiàn),不穩(wěn)定。
仔細(xì)檢查了代碼,沒問題啊。Google之后,有網(wǎng)友提出了解決方案,在drawImage完成之后,最好等3秒鐘再調(diào)用wx.canvasToTempImage,以保證保存成功。
?、?Canvas和Image都不支持Base64圖片,Image無法保存。
最初的方案中,我們自己生成二維碼,后來為了兼容微信的“掃一掃”功能,我們決定改用小程序碼。
開始,我們把Image的src設(shè)置為Base64格式,從服務(wù)器上通過request獲取圖片的Base64編碼。小程序開發(fā)工具和iPhone上面測(cè)試都沒有問題,唯獨(dú)Android手機(jī)上無法正常顯示圖片。哦,原來在Android上,Canvas和Image都不支持Base64圖片??墒?..小程序開發(fā)文檔中并沒有這方面的說明啊。
怎么解決Android手機(jī)上的這個(gè)問題呢?如果把Image改成URL形式呢,小程序無法保存圖片,以致即使是相同的圖片,每次都要從服務(wù)器獲取,這又加重了服務(wù)器的負(fù)擔(dān)。這樣吧,使用wx.downloadFile把文件下載到本地,然后再處理。
3. 小程序碼的識(shí)別率太低。
上文提到,最初我們使用的簽到二維碼是自己生成的二維碼(QRCode),正方形的那種。識(shí)別率高,缺點(diǎn)是不支持微信“掃一掃”。在使用過程中,我們發(fā)現(xiàn),相當(dāng)數(shù)量的用戶看見二維碼,第一反應(yīng)會(huì)使用微信“掃一掃”去掃二維碼。為了滿足這個(gè)需求,那就把二維碼替換成微信的小程序碼(有點(diǎn)像菊花)吧。
可是,和方形二維碼相比,識(shí)別小程序碼的成功率非常低。小程序碼距離遠(yuǎn)點(diǎn)、稍微有些變形或方向沒有對(duì)正都可能造成識(shí)別失敗。一種典型的使用場(chǎng)景是:簽到發(fā)起者把小程序碼投影到大屏幕上,由于投影儀的分辨率和電腦不一致,圖片可能產(chǎn)生變形。這種情況下,簽到者怎么掃都無法識(shí)別。而以上所有這些,對(duì)于方形的二維碼,全都不是問題。
由于小程序碼的實(shí)現(xiàn)和識(shí)別原理沒有開放,我們也沒法采取圖片糾錯(cuò)、還原等措施改善識(shí)別效果。
魚和熊掌,真的很難兼得。
4. 轉(zhuǎn)發(fā)小程序時(shí)默認(rèn)帶參數(shù)。
關(guān)于轉(zhuǎn)發(fā),在官方文檔里是這么寫的。
在 Page 中定義 onShareAppMessage 函數(shù),設(shè)置該頁面的轉(zhuǎn)發(fā)信息。
只有定義了此事件處理函數(shù),右上角菜單才會(huì)顯示 “轉(zhuǎn)發(fā)” 按鈕
用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會(huì)調(diào)用
于是,在實(shí)現(xiàn)中,我們定義了此方法,把方法體留空。然后紕漏出現(xiàn)了,當(dāng)用戶簽到之后再分享,收到的人一點(diǎn)擊分享的鏈接會(huì)進(jìn)入簽到狀態(tài)。
查了很久,才發(fā)現(xiàn)原因是在分享的時(shí)候,把當(dāng)前頁面加載時(shí)候的參數(shù)也給分享過去了,可是,onShareAppMessage函數(shù)里面什么都沒做啊。
看來,什么都不做的話,它就會(huì)默認(rèn)分享頁面加載時(shí)的參數(shù)。為了修復(fù)這個(gè)bug,就嘗試return一個(gè)object,并給這個(gè)object賦值path和title兩個(gè)參數(shù)。
終于解決了。
scroll-view組件
注意事項(xiàng):
不要在scroll-view 中使用 textarea、map、canvas、video 組件
scroll-into-view 的優(yōu)先級(jí)高于 scroll-top
在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁面回彈,所以在 scroll-view 中滾動(dòng),是無法觸發(fā) onPullDownRefresh
還有在開發(fā)過程中背景圖片如果是在本地,真機(jī)調(diào)制預(yù)覽是不顯示的,display:flex,在ios會(huì)中存在一些問題。
js里面也有許多坑,就說他們的執(zhí)行順序吧,在開發(fā)者工具中執(zhí)行先執(zhí)行aap.js然后執(zhí)行其他js文件,但在手機(jī)上app.js和其他js是同時(shí)執(zhí)行的,就比如說你在app.js里面向本地存儲(chǔ)一個(gè)變量,然后再去index.js里面取這個(gè)變量,在開發(fā)者工具中是可以取到的,但在手機(jī)上它會(huì)取不到的,當(dāng)然這也是我的邏輯問題,在開發(fā)過程中使用api也要注意,因?yàn)槲⑿虐姹静煌栽谑褂胊pi時(shí)一定要仔細(xì)看文檔,做好兼容處理,比如友好提示不兼容,不然報(bào)錯(cuò)就game over嘍,還有就是小程序頁面跳轉(zhuǎn)打開最多五層,超出五層不會(huì)跳轉(zhuǎn)了,所以大家要注意,可以在跳轉(zhuǎn)的時(shí)候關(guān)閉前一個(gè)頁面。
除了上面提到的之外,還有不少微小的bug,不一而足。雖然很快就解決了,相對(duì)開發(fā)源生代碼而言,還是有些影響開發(fā)效率的。
以上就是微信小程序開發(fā)需要注意的坑,希望能對(duì)大家有所幫助。
佛山市意合云營銷策劃專業(yè)提供六合一營銷型網(wǎng)站,微信小程序開發(fā),官方網(wǎng)站定制,網(wǎng)站優(yōu)化,SEO優(yōu)化推廣,百度優(yōu)化,整站優(yōu)化為您的企業(yè)打造面向360、百度優(yōu)化推廣等全網(wǎng)營銷方案!