前言

基於業務需求，需要開發小程式並同時在多個平臺釋出，那無疑選擇uniapp框架開發最適合。即可以節省開發成本，又可以減少開發時間，簡直太爽了！但一套這麼強大的框架固然也有許多坑等著我們去踩，只有踩坑才能讓我們慢慢熟悉瞭解，那麼下面就是記錄我在開發過程中遇到了的問題：

技術棧選用：uniapp + VantUI

1. van-dropdown-menu 下拉選單切換
   初次從tab1->tab2 效果沒問題；再從tab2->tab1 事件沒進
   排查問題：遮罩層級問題，導致點選沒效果
   解決：改變原始碼遮罩樣式層級，將 @vant/weapp/dropdown-item/index.wxml 裡面的 van-popup 的事件改成駝峰寫法 afterEnter 和 afterLeave 就可以了

2. input框 focus事件沒生效
   解決：利用js去新增偽元素

3. van-datetime-picker change事件 e.getValue() 會報錯
   解決：通過ref例項去拿：getPicker().getValue() 可以拿到
   
   

4. 在微信小程式平臺，uniapp的v-html會編譯成小程式富文字解析標籤rich-text；但有標籤限制，故不能使用vantUI相關元件
   解決：更換元件，使用原生標籤
   例如: v-html裡想插入van-field 輸入框，發現沒效果，故只能用 <input />

5. vantUI的下拉選單：van-dropdown-item 和 時間選擇器：

   van-datetime-picker 在小程式平臺沒問題，但在h5發現報錯了
   

問題：排除了自己程式碼書寫問題（因為直接開啟它本身的也報錯了）可能是VantUI版本問題

解決： 可能鑑於相容問題，會選擇用uniapp自帶UI庫 —— uni-ui

後面會持續更新記錄問題…

歡迎關注我的部落格： https://blog.csdn.net/weixin_42323607

github地址： https://github.com/qdheyongjie

多多支援！本人會持續更新噠 ❤️