從微信小程序發布到現在經手的小程序也有好幾個了，開發過程中多少會遇到一些坑，這里匯總一下開發中遇到過的坑與小程序開發技巧。
首先我要先吐槽一下mpvue。
由于我之前做過的小程序全部都是原生開發，最近的一個項目一開始的選型是準備使用mpvue的，我自己也想嘗嘗鮮，但是在做完基礎準備，開始開發的第三天在寫一個帶輸入框的組件時遇到了嚴重的bug，以至于所有組件形式的輸入框全部都不能使用。
在github上看了mpvue dev分支上的提交記錄，最近一次是半個月前的，提交了部分代碼并添加了數個使用者。還好當時果斷放棄mpvue轉為原生開發，才使得項目按時上線。
在寫這篇文章的時候，我又查看了mpvue的提交記錄，最近一次為18天前，提交的內容僅僅是添加了readme中的使用者。合著這一個月mpvue正真的代碼提交只有一次。感覺美團造了mpvue這個輪子后，對其更新與修復并不是很上心，反觀wepy，差距真心大。
這里建議大家小程序開發還是使用原生開發的好，mpvue、wepy最好不要使用，wepy雖然有人維護，但其bug也不少，原生開發才是最穩的選擇，小程序一旦有任何更新這些框架可不一定來得及作出調整。
開發中遇到的問題：
1、textarea層級最高的Bug、由于textarea使用的是原生組件，它的層級最高，會產生很多詭異的Bug，具體可以看這里和這里的末尾幾行。
2、微信小程序碼僅僅針對線上，開發版與體驗版掃碼會提示該小程序未發布。
測試小程序碼的方法：
- 設置編譯模式參數測試小程序碼
如配置url：pages/index/index?scene=6430277129069593265，scene為小程序碼B接口所帶參數（多參數可自定義符號分割，長度不可超過32個字符）
onLoad (options) {
// 這里就可以拿到小程序碼中的參數6430277129069593265
console.log('二維碼進入', decodeURIComponent(options.scene)
}
- 直接將生成的二維碼通過開發者工具的‘二維碼編譯’解析出來（雖然這種方式是最好的選擇，但自己嘗試解析不出來，全部都跳轉了首頁）
所以不建議在自己所開發的第一個版本小程序就上線小程序碼功能，可在第一個版本預留頁面，在onLoad中預先寫好測試代碼，以供后續版本調試小程序碼使用，確保下次上線小程序碼一次成功。
3、iOS端，page中開啟了下拉刷新，又使用了 toast / loading，下拉刷新時頁面會有一個很大的回彈動作，解決方法為去掉微信的toast / loading或自己寫loadinng彈框。
4、在組件中使用keyframes 不生效的問題
問題代碼如下：
@-webkit-keyframes __spinner-loading {
from,
to,
40% {
background-color: #888;
}
33.333% {
background-color: red;
}
}
原因： 33.333% 改為33%即可
5、button有最小尺寸。
6、wxss不支持部分css3選擇器。
7、canvas 不支持 overflow:hidden，具體見這里
8、兩個canvas疊加在一切，之后進行的一切繪制，dom層級最后的canvas所繪制的東西永遠會在最前端，
解決方法：將要放在下層的canvas的wxml寫在前面。
9、 <scroll-view>必須設置高度，否則無法監聽相關事件。
10、<scroll-view>不能通過絕對定位，上下左右0，來設置全屏鋪滿，需調用wx.getSystemInfo方法獲得屏高，設置style=“height：{{ heightNumber }}px；”
補充：可以在css中為其設置高度為 vh （如：100vh）無需js獲取高度也可正常使用。
11、tab頁中使用‘wx.getSystemInfo’來獲取屏幕高度，真機獲取的高度比開發工具少48，這48為tabBar的高度。
12、小程序不能做indexOf以及部分運算，如：{{ useList[index].labIndex.indexOf(lab) > -1 ? 'lab_active' : '' }}
13、小程序不易打開過多頁面，目前頁面路徑最多只能打開十層。
14、小程序測試支付需要掃生成的二維碼，而且后臺設置金額total_fee單位為分（int），否則報錯‘缺少支付total_fee’。
15、
16、小程序canvas無法直接繪制網絡圖（開發工具有效，真機無效）
需要使用 downloadFile API 下載圖片后繪制，且圖片地址必須配置在后臺的‘downloadFile合法域名中’
無效
const cardBg = 'https://image.shanglishi.com/share-BJ.png'
ctx.drawImage(cardBg, 0, 0, 250, 200)
ctx.draw()
有效
wx.downloadFile({
url: cardBg ,
success: function (res) {
ctx.drawImage(res.tempFilePath, 0, 0, 250, 200)
ctx.draw()
}
})
17、canvas繪制圓形圖片，開發工具與真機存在差異
18、input獲得焦點，軟鍵盤彈出，光標與鍵盤默認距離為0，鍵盤會遮擋住部分元素，可設置cursor-spacing（int）來設置鍵盤與光標的距離，以顯示完整元素
19、小程序view英文數字不換行的問題，添加word-break:break-all;即可
小程序開發技巧：
1、小程序調用子組件方法
<countdown id="countdown"></countdown >
onReady() {
this.countdown = this.selectComponent('#countdown')
this.countdown.start()
}
2、直接改動上一個頁面的data。
const pages = getCurrentPages(); // 當前頁面
const prevPage = pages[pages.length - 2]; // 上一頁
prevPage.setData({ // 直接給上一頁面賦值
selectCity: info,
});
3、微信群只顯示首字母
分享到群的信息只能拿到群ID
<open-data type="groupName" open-gid="{{openGId}}" />獲取到的又是完整群名
只顯示首字母有兩種方法：
- 足夠大的字體與足夠大的字間距，只保留第一個字，將其余的字擠下去，父元素溢出隱藏。
該方法只支持純中文或純英文，中英混雜會出現一個中文和一個英文同時出現的情況。
<view class='big-qun-name'>
<open-data type="groupName" open-gid="{{ item.open_gid }}"></open-data>
</view>
.test open-data{
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 51rpx;
letter-spacing:1px;
display: block;
color: #fff;
}
- 設置字體為0，使用css3給首字母設置字體大小。
該方法使用起來時好時壞，不太建議使用。
<view class="nc-img__text" wx:else>
<open-data openGid="{{groupid}}" type="groupName" ></open-data>
</view>
.text {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: #b8b8b8;
color: #fff;
font-size: 60rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: -1px;
top: -1px;
}
.text open-data {
width: 50px;
height: 50px;
line-height: 48px;
display: block;
text-align: center;
font-size: 0;
}
.text open-data::first-letter {
font-size: 60rpx;
}
可以考慮使用群成員的頭像來表示該群。
4、去除小程序<button>的默認樣式
button.remove-btn-style{
outline:none;
border:none;
list-style: none;
border-radius:0;
}
button.remove-btn-style:after{
outline:none;
border:none;
list-style: none;
}
注意點：
1、正式上線接口需要使用https，接口需在后臺配置白名單，白名單一個月只能修改五次，建議一次多配置幾個，直接將測試環境與生產環境域名配全，避免多次修改帶來的麻煩。
2、請求白名單配置有延遲，可能開發工具請求不了手機卻可以、等待幾分鐘后再次嘗試即可。
3、https可以使用內網穿透到本地。
4、上線測試版本需要小程序關聯公眾號。
5、由于微信修改了getUserInfo機制，所以不要在進入小程序調用wx.login之后立刻調用wx.getuerinfo，一方面用戶很大概率會點擊拒絕授權導致小程序功能無法使用，另一方面由于wx.login已經可以用于用戶登錄，我們應在需要的時候再調用，詳細調整點擊這里。
6、微信修改了分享機制，導致開發者拿不到任何分享后的回調（成功、失敗、完成）
- 對于想要獲取分享結果的今后將
無法實現; - 對于想要獲取分享信息的，可在分享后點擊群內分享消息卡片，在App的onLaunch與onShow(建議在onShow中獲取，onLaunch在小程序整個生命周期中只會執行一次)中可獲取shareTicket ，用來換取群唯一標識 openGId ，進而顯示對應群的相關信息的小程序。
詳見這里。
