小程序開發WeUI填坑(一)


第一個坑:沒有雙向綁定

用慣了vue之后,習慣了數據的雙向綁定,再用小程序,發現小程序采用"{{}}"這個符號,但是在輸入框輸入值的時候,並未改變data里面的屬性的值。而是要人為的使用this.setData({})方法給其賦值。

 

第二個坑:WeUI文檔簡潔
原生組件WeUI官方文檔寫的太過簡潔了,很多方法屬性都沒有例子,對於初學者來說的確不友好,且網上關於其資料也較少,這里以WeUI表單自定義驗證舉例子。

這一段是關於自定義驗證的描述,但是並未有任何demo演示。。。好吧,全靠自己摸索它的寫法。按照以前vue的思路,我是定義一個名字,然后在data中對該名字進行校驗,想着WeUI思路應該也是一樣。

 

這里以驗證,如果輸入的值為123,則驗證不通過吧。

wxml代碼與上篇文章一樣,這里改一下username的驗證地方。

在rules規則下面加一個validator的方法。寫法如下:

1         validator: (rule , value , params , models) => {
2           debugger
3           if (value === '123') {
4             return rule.message = '驗證123不通過';
5           } else {
6             return rule.message = '';
7           }
8         },

第一個參數rule表示的就是外層rules的驗證規則,目前有用的參數就只有message。

第二個參數value表示的是使用這個驗證組件的值。

第三個參數params目前沒用到。

第四個參數models表示的是在form中所有的實體對象。

在它自帶的form.js中有一段關於message的判斷如下所示

 

 

很簡潔,就是獲取剛剛的rule.message,有沒有值。這里可以看到它已經獲取到了。

 

 而后如果有值,則表示驗證失敗,改變isFail的狀態返回給驗證消息。

 

 從而實現一次完整的回調。

再看看界面輸出的內容。

 

 嗯。。。是正確的結果,好了這就是關於表單自定義驗證的一些注意事項。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM