小程式的這些坑你踩過嗎？

Alone381發表於2019-03-04

隨著跳一跳小遊戲和頭腦王者的洗腦式盛行，小程式似乎向廣大使用者宣佈，它要發力了。
公司內部也越來越多小程式的需求，所以本人也慢慢地開發了好幾個小程式的專案。下面我把自己在開發的過程中遇到的一些坑記錄一下，防止以後再踩坑。

1.模擬器和真機的差異

在開發的過程中，在模擬器上表現得好好的，在真機上卻出問題的例子數不勝數。譬如動畫的使用，cover-view上面使用定位，在模擬器好好的，在真機卻錯亂等等等等。
造成這些錯亂主要是pc端和移動端不同的核心導致的。
避坑方式：
開發過程中，要時不時地用真機也看一下效果。

2.view對本地圖片的引用

平時我們寫頁面，經常會用一個標籤，然後把圖片寫到該標籤裡面，直接引用，譬如下面這個例子：

<view class="icon"></view>      
複製程式碼
.icon{
color: #1d1d1d;  
background-image: url(../image/doll_user_bg.png);  
width：50rpx;
height:50rpx;
}
複製程式碼

一眼看過去感覺沒毛病，但是事實上你在模擬器或者真機上會發現，圖片出不來。原因出在了相對路徑的引用上。
避坑的方法：
（1）直接在標籤的屬性上新增圖片的路徑

    <view class=`icon` style="background-image: url(`../image/doll_user_bg.png`);"></view> 
複製程式碼

(2)使用絕對路徑

.icon{
color: #1d1d1d;  
background-image: url(https://webtest.yystatic.com/project/yyDoll/mobile/image/doll_user_bg.png); 
width：50rpx;
height:50rpx;
}
複製程式碼

(3)直接使用image標籤代替view標籤

<image src=`../image/doll_user_bg.png`></image>     
複製程式碼

3.cover-view的樣式

由於小程式裡面video標籤的層級是最高的無法覆蓋。所以cvoer-view應運而生。它就是用於蓋在video標籤上面，進行對video標籤的周遭加以裝飾的利器。
然而，當我滿心歡喜地以為這個標籤很好用的時候，我遇到了很多奇奇怪怪的坑。
例如在cover-view上面使用相對定位，當video標籤大小發生變化的時候，cover-view上面的元素就亂七八糟。 又譬如圓角的不起效等等。 具體的問題大家可以在開發者社群看看。
developers.weixin.qq.com/search?acti…
避坑方法：
儘量在cover-view上不使用定位，其他的bug只能等官方優化，大家謹慎使用。

4.開發小程式的授權登入和公司賬號互聯

如果只是一般的授權登入還是挺簡單的，但是如果你要把你公司的賬號體系和微信互聯起來，這個流程就不簡單了。

我說一下我這邊的流程是怎樣的，首先我要向公司申請賬號互聯的appid，然後要經過多個部門的捆綁和稽核,然後在公司開發者賬號下繫結小程式appid。然後等賬號那邊的同事把賬號打通，然後才實現了賬號互聯的授權登入。
不同公司可能流程不大一樣，寫在這裡只是作為步驟的記錄，免得以後再踩坑。

5.文字圍繞

當你在cover-view上面要是實現圖文混排的文字圍繞時，你會發現平時的一些方法都失效了。

<cover-view><cover-image src="img.gif" />文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞</cover-view>
複製程式碼
小程式的這些坑你踩過嗎？

最常用的圖片浮動，沒有效果。使用定位，使用縮排，使用css3的屬性等等，弄出來的效果放到真機上都無法正常顯示圖文混排的文字圍繞。 目前暫時沒有找到解決方法，有試過在cover-view實現的童鞋，求程式碼。

6.webview和小程式的通訊

剛開始看到小程式能內嵌webview的時候，內心是十分激動的。因為一些用小程式難以實現或者一些需要經常動態更改的頁面，可以通過webview內嵌達到自己想要的效果。但是當我使用後，我發現坑爹了。webview和小程式竟然沒有比較完善的通訊機制。 小程式和webview的通訊，例如一些引數的傳遞，目前僅僅是支援url的引數傳遞。例如：

<web-view src="https://mp.weixin.qq.com？password=12212&name=sasa&ticket=215328736dsadaadasdadaswuqsahkshakskahskahsakhsakshkasha327428749827487284729847382dsakhdlahdlahskjhdlkhlkadhldkhal"></web-view>  
複製程式碼

如果你內嵌的webview頁面是需要登入態的，你只能在url上面把那些賬號密碼，ticket什麼的全傳到引數上。很那個對不對。我在想如果有一天我要把一個複雜的form表單資料傳過去那種酸爽。希望微信的童鞋能把通訊機制完善起來。

7.input元件的文字居中問題

input元件的寬度使用百分比，設定placeholder的文字text-align：canter，這時文字並不會正常居中。
原來input設定百分比， placeholder就不支援設定 text-align樣式了，想實現居中，就只能把input的長度寫死。

8.傳送模板訊息的限制

如果使用者在你小程式進行了某些操作，例如支付或者消耗了你們的虛擬的產品時，你可能需要發訊息告訴使用者提醒使用者或者告知使用者。這個時候就需要使用到模板訊息了。
當你想下發訊息的時候你會發現，只有2種情況下你才能下發訊息。
1.支付
當使用者在小程式內完成過支付行為，可允許開發者向使用者在7天內推送有限條數的模板訊息（1次支付可下發3條，多次支付下發條數獨立，互相不影響）
2.提交表單
當使用者在小程式內發生過提交表單行為且該表單宣告為要發模板訊息的，開發者需要向使用者提供服務時，可允許開發者向使用者在7天內推送有限條數的模板訊息（1次提交表單可下發1條，多次提交下發條數獨立，相互不影響）
注：目前只有這2種情況才能下發訊息，而且是有條數限制的，謹記了。

9.其他一些偶發的bug和小tips

在開發小程式的時候，還會偶發一些小bug，舉例一下：
1.longpress 有時有效，有時候失靈
2.canvas的drawImage頻繁調動會導致頁面卡頓，卡…卡…頓….
3.getUserInfo的方法有時候會獲取不到使用者資訊，建議可以使用輪詢，獲取到資訊後再停止
4.小程式如果想使用一些特殊字型，可以先把字型轉成base64，再引入使用
5.如果想做直播相關的需求，不要使用video標籤，請使用live-player，可以做到更好的低時延
6.開發小程式之前需要去看看小程式是否已經開放該品類，否則後面會被封（不要問我為什麼知道=_=!!）

Alone
2018-05-27

相關文章