{当前文章标题}

微信小程序開發(fā)需要注意的坑有哪些

微信小程序掃碼簽到工具上線。

　　回首過(guò)去的歷程，是時(shí)候該停下來(lái)做個(gè)階段性的總結(jié)了，回顧得失，以便持續(xù)改進(jìn)。這篇文章，就總結(jié)一下過(guò)去跳過(guò)的那些坑吧。

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

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

　　小程序的文檔太簡(jiǎn)略，沒(méi)有注明支持哪些功能，哪些不支持，只有用了才知道。

　　小程序的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)，可通過(guò)公眾平臺(tái)侵權(quán)投訴流程發(fā)起投訴，取回名稱使用權(quán)。

　　5、個(gè)人開發(fā)者無(wú)法申請(qǐng)微信小程序;目前微信僅支持企業(yè)、政府、媒體、其他組織申請(qǐng)。

　　6、一個(gè)主體可以注冊(cè)30個(gè)，一個(gè)綁定身份的開發(fā)者只能創(chuàng)建5個(gè)微信小程序。

　　對(duì)于員工來(lái)說(shuō)，請(qǐng)不要隨便借給你的老板你的微信來(lái)注冊(cè)微信小程序，因?yàn)槟氵@樣就沒(méi)有機(jī)會(huì)了。

　　對(duì)于老板來(lái)說(shuō)，請(qǐng)不要隨便借給你的員工微信來(lái)注冊(cè)微信小程序，因?yàn)槟憧赡芤换貋?lái)。

　　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)用，小心沒(méi)機(jī)會(huì)。

　　沒(méi)事別亂動(dòng)下面的配置，一定確定了再動(dòng)，并且一次性寫完整，不然你改個(gè)小標(biāo)點(diǎn)都會(huì)浪費(fèi)你的一次機(jī)會(huì)。

　　9、你的域名、備案、https要準(zhǔn)備好，不然做不了。(服務(wù)器域名需進(jìn)過(guò)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)鍵詞，通過(guò)后會(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è)沒(méi)有窗口對(duì)象的環(huán)境，所以不能在腳本中使用window，也無(wú)法在腳本中操作組件。

　　22、zepto/jquery 會(huì)使用到window對(duì)象和document對(duì)象，所以無(wú)法使用。

　　23、一個(gè)應(yīng)用同時(shí)只能打開5個(gè)頁(yè)面，當(dāng)已經(jīng)打開了5個(gè)頁(yè)面之后，wx.navigateTo不能正常打開新頁(yè)面。請(qǐng)避免多層級(jí)的交互方式，或者使用wx.redirectTo。

　　24、樣式表不支持級(jí)聯(lián)選擇器：

　　WXSS支持以.開始的類選擇器;可以使用標(biāo)簽選擇器，控制同一類組件的樣式。

　　25、本地資源無(wú)法通過(guò) 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 鍵離開微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái);

　　當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)，只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(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 還沒(méi)有生成。

　　通過(guò) 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)制流。

　　小程序支持通過(guò)post獲取小程序碼(有點(diǎn)像菊花)。嘗試通過(guò)wx.request向微信服務(wù)器獲取小程序碼的圖片，結(jié)果發(fā)現(xiàn)返回的結(jié)果無(wú)法顯示。開始懷疑代碼有問(wèn)題，調(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ù)器獲取小程序碼的圖片，然后以附件的形式返回給小程序。

　　問(wèn)題解決。

　　2. Canvas和Image對(duì)圖片的各種不支持。

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

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

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

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

　?、?Canvas和Image都不支持Base64圖片，Image無(wú)法保存。

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

　　開始，我們把Image的src設(shè)置為Base64格式，從服務(wù)器上通過(guò)request獲取圖片的Base64編碼。小程序開發(fā)工具和iPhone上面測(cè)試都沒(méi)有問(wèn)題，唯獨(dú)Android手機(jī)上無(wú)法正常顯示圖片。哦，原來(lái)在Android上，Canvas和Image都不支持Base64圖片。可是...小程序開發(fā)文檔中并沒(méi)有這方面的說(shuō)明啊。

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

　　3. 小程序碼的識(shí)別率太低。

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

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

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

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

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

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

　　在 Page 中定義 onShareAppMessage 函數(shù)，設(shè)置該頁(yè)面的轉(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)前頁(yè)面加載時(shí)候的參數(shù)也給分享過(guò)去了，可是，onShareAppMessage函數(shù)里面什么都沒(méi)做啊。

　　看來(lái)，什么都不做的話，它就會(huì)默認(rèn)分享頁(yè)面加載時(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ì)阻止頁(yè)面回彈，所以在 scroll-view 中滾動(dòng)，是無(wú)法觸發(fā) onPullDownRefresh

　　還有在開發(fā)過(guò)程中背景圖片如果是在本地，真機(jī)調(diào)制預(yù)覽是不顯示的，display：flex，在ios會(huì)中存在一些問(wèn)題。

　　js里面也有許多坑，就說(shuō)他們的執(zhí)行順序吧，在開發(fā)者工具中執(zhí)行先執(zhí)行aap.js然后執(zhí)行其他js文件，但在手機(jī)上app.js和其他js是同時(shí)執(zhí)行的，就比如說(shuō)你在app.js里面向本地存儲(chǔ)一個(gè)變量，然后再去index.js里面取這個(gè)變量，在開發(fā)者工具中是可以取到的，但在手機(jī)上它會(huì)取不到的，當(dāng)然這也是我的邏輯問(wèn)題，在開發(fā)過(guò)程中使用api也要注意，因?yàn)槲⑿虐姹静煌栽谑褂胊pi時(shí)一定要仔細(xì)看文檔，做好兼容處理，比如友好提示不兼容，不然報(bào)錯(cuò)就game over嘍，還有就是小程序頁(yè)面跳轉(zhuǎn)打開最多五層，超出五層不會(huì)跳轉(zhuǎn)了，所以大家要注意，可以在跳轉(zhuǎn)的時(shí)候關(guān)閉前一個(gè)頁(yè)面。

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

以上就是微信小程序開發(fā)需要注意的坑，希望能對(duì)大家有所幫助。