小程序的這些坑你踩過(guò)嗎？
隨著跳一跳小游戲和頭腦王者的洗腦式盛行，小程序似乎向廣大用戶(hù)宣布，它要發(fā)力了。
公司內(nèi)部也越來(lái)越多小程序的需求，所以本人也慢慢地開(kāi)發(fā)了好幾個(gè)小程序的項(xiàng)目。下面我把自己在開(kāi)發(fā)的過(guò)程中遇到的一些坑記錄一下，防止以后再踩坑。
1.模擬器和真機(jī)的差異
在開(kāi)發(fā)的過(guò)程中，在模擬器上表現(xiàn)得好好的，在真機(jī)上卻出問(wèn)題的例子數(shù)不勝數(shù)。譬如動(dòng)畫(huà)的使用，cover-view上面使用定位，在模擬器好好的，在真機(jī)卻錯(cuò)亂等等等等。
造成這些錯(cuò)亂主要是pc端和移動(dòng)端不同的內(nèi)核導(dǎo)致的。
避坑方式：
開(kāi)發(fā)過(guò)程中，要時(shí)不時(shí)地用真機(jī)也看一下效果。
2.view對(duì)本地圖片的引用
平時(shí)我們寫(xiě)頁(yè)面，精彩會(huì)用一個(gè)標(biāo)簽，然后把圖片寫(xiě)到該標(biāo)簽里面，直接引用，譬如下面這個(gè)例子：
<view class="icon"></view>
.icon{
color: #1d1d1d;
background-image: url(../image/doll_user_bg.png);
width：50rpx;
height:50rpx;
}
一眼看過(guò)去感覺(jué)沒(méi)毛病，但是事實(shí)上你在模擬器或者真機(jī)上會(huì)發(fā)現(xiàn)，圖片出不來(lái)。原因出在了相對(duì)路徑的引用上。
避坑的方法：
（1）直接在標(biāo)簽的屬性上添加圖片的路徑
<view class='icon' style="background-image: url('../image/doll_user_bg.png');"></view>
(2)使用絕對(duì)路徑
.icon{
color: #1d1d1d;
background-image: url(https://webtest.yystatic.com/project/yyDoll/mobile/image/doll_user_bg.png);
width：50rpx;
height:50rpx;
}
(3)直接使用image標(biāo)簽代替view標(biāo)簽
<image src='../image/doll_user_bg.png'></image>
3.cover-view的樣式
由于小程序里面video標(biāo)簽的層級(jí)是最高的無(wú)法覆蓋。所以cvoer-view應(yīng)運(yùn)而生。它就是用于蓋在video標(biāo)簽上面，進(jìn)行對(duì)video標(biāo)簽的周遭加以裝飾的利器。
然而，當(dāng)我滿(mǎn)心歡喜地以為這個(gè)標(biāo)簽很好用的時(shí)候，我遇到了很多奇奇怪怪的坑。
例如在cover-view上面使用相對(duì)定位，當(dāng)video標(biāo)簽大小發(fā)生變化的時(shí)候，cover-view上面的元素就亂七八糟。 又譬如圓角的不起效等等。 具體的問(wèn)題大家可以在開(kāi)發(fā)者社區(qū)看看。 developers.weixin.qq.com/search?acti…
避坑方法：盡量在cover-view上不使用定位，其他的bug只能等官方優(yōu)化，大家謹(jǐn)慎使用。
4.開(kāi)發(fā)小程序的授權(quán)登錄和公司賬號(hào)互聯(lián)
如果只是一般的授權(quán)登錄還是挺簡(jiǎn)單的，但是如果你要把你公司的賬號(hào)體系和微信互聯(lián)起來(lái)，這個(gè)流程就不簡(jiǎn)單了。
我說(shuō)一下我這邊的流程是怎樣的，首先我要向公司申請(qǐng)賬號(hào)互聯(lián)的appid，然后要經(jīng)過(guò)多個(gè)部門(mén)的捆綁和審核,然后在公司開(kāi)發(fā)者賬號(hào)下綁定小程序appid。然后等賬號(hào)那邊的同事把賬號(hào)打通，然后才實(shí)現(xiàn)了賬號(hào)互聯(lián)的授權(quán)登錄。
不同公司可能流程不大一樣，寫(xiě)在這里只是作為步驟的記錄，免得以后再踩坑。
5.文字圍繞
當(dāng)你在cover-view上面要是實(shí)現(xiàn)圖文混排的文字圍繞時(shí)，你會(huì)發(fā)現(xiàn)平時(shí)的一些方法都失效了。
<cover-view><cover-image src="img.gif" />文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞</cover-view>
最常用的圖片浮動(dòng)，沒(méi)有效果。使用定位，使用縮進(jìn)，使用css3的屬性等等，弄出來(lái)的效果放到真機(jī)上都無(wú)法正常顯示圖文混排的文字圍繞。 目前暫時(shí)沒(méi)有找到解決方法，有試過(guò)在cover-view實(shí)現(xiàn)的童鞋，求代碼。
6.webview和小程序的通訊
剛開(kāi)始看到小程序能內(nèi)嵌webview的時(shí)候，內(nèi)心是十分激動(dòng)的。因?yàn)橐恍┯眯〕绦螂y以實(shí)現(xiàn)或者一些需要經(jīng)常動(dòng)態(tài)更改的頁(yè)面，可以通過(guò)webview內(nèi)嵌達(dá)到自己想要的效果。但是當(dāng)我使用后，我發(fā)現(xiàn)坑爹了。webview和小程序竟然沒(méi)有比較完善的通訊機(jī)制。 小程序和webview的通訊，例如一些參數(shù)的傳遞，目前僅僅是支持url的參數(shù)傳遞。例如：
<web-view src="https://mp.weixin.qq.com？password=12212&name=sasa&ticket=215328736dsadaadasdadaswuqsahkshakskahskahsakhsakshkasha327428749827487284729847382dsakhdlahdlahskjhdlkhlkadhldkhal"></web-view>
如果你內(nèi)嵌的webview頁(yè)面是需要登錄態(tài)的，你只能在url上面把那些賬號(hào)密碼，ticket什么的全傳到參數(shù)上。很那個(gè)對(duì)不對(duì)。我在想如果有一天我要把一個(gè)復(fù)雜的form表單數(shù)據(jù)傳過(guò)去那種酸爽。希望微信的童鞋能把通訊機(jī)制完善起來(lái)。
7.input組件的文字居中問(wèn)題
input組件的寬度使用百分比，設(shè)置placeholder的文本text-align：canter，這時(shí)文字并不會(huì)正常居中。
原來(lái)input設(shè)置百分比， placeholder就不支持設(shè)置 text-align樣式了，想實(shí)現(xiàn)居中，就只能把input的長(zhǎng)度寫(xiě)死。
8.發(fā)送模板消息的限制
如果用戶(hù)在你小程序進(jìn)行了某些操作，例如支付或者消耗了你們的虛擬的產(chǎn)品時(shí)，你可能需要發(fā)消息告訴用戶(hù)提醒用戶(hù)或者告知用戶(hù)。這個(gè)時(shí)候就需要使用到模板消息了。
當(dāng)你想下發(fā)消息的時(shí)候你會(huì)發(fā)現(xiàn)，只有2種情況下你才能下發(fā)消息。
1.支付
當(dāng)用戶(hù)在小程序內(nèi)完成過(guò)支付行為，可允許開(kāi)發(fā)者向用戶(hù)在7天內(nèi)推送有限條數(shù)的模板消息（1次支付可下發(fā)3條，多次支付下發(fā)條數(shù)獨(dú)立，互相不影響）
2.提交表單
當(dāng)用戶(hù)在小程序內(nèi)發(fā)生過(guò)提交表單行為且該表單聲明為要發(fā)模板消息的，開(kāi)發(fā)者需要向用戶(hù)提供服務(wù)時(shí)，可允許開(kāi)發(fā)者向用戶(hù)在7天內(nèi)推送有限條數(shù)的模板消息（1次提交表單可下發(fā)1條，多次提交下發(fā)條數(shù)獨(dú)立，相互不影響）
++注：目前只有這2種情況才能下發(fā)消息，而且是有條數(shù)限制的，謹(jǐn)記了++。
9.其他一些偶發(fā)的bug和小tips
在開(kāi)發(fā)小程序的時(shí)候，還會(huì)偶發(fā)一些小bug，舉例一下：
1.longpress 有時(shí)有效，有時(shí)候失靈
2.canvas的drawImage頻繁調(diào)動(dòng)會(huì)導(dǎo)致頁(yè)面卡頓，卡...卡...頓....
3.getUserInfo的方法有時(shí)候會(huì)獲取不到用戶(hù)信息，建議可以使用輪詢(xún)，獲取到信息后再停止
4.小程序如果想使用一些特殊字體，可以先把字體轉(zhuǎn)成base64，再引入使用
5.如果想做直播相關(guān)的需求，不要使用video標(biāo)簽，請(qǐng)使用live-player，可以做到更好的低時(shí)延
6.開(kāi)發(fā)小程序之前需要去看看小程序是否已經(jīng)開(kāi)放該品類(lèi)，否則后面會(huì)被封（不要問(wèn)我為什么知道=_=!!）
