微信小程序開發填坑

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.開發小程序以前須要去看看小程序是否已經開放該品類，不然後面會被封（不要問我爲何知道=_=!!）

做者：wulong381 連接：https://juejin.im/post/5b0b9e86f265da08ed7a0c1f 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。