網(wǎng)上一直再埋怨小程序沒有組件化，現(xiàn)在小程序升級了，提供了自定義組件 Component，目前處于公測階段。今天體驗一回，將之前使用 template 寫的評分組件重寫了下。 
小程序自定義評分組件 template（精度0.1）

從小程序基礎(chǔ)庫版本 1.6.3 開始，小程序支持簡潔的組件化編程。

自定義組件

自定義組件類似頁面，由 json wxml wxss js 4個文件組成。

1、rating.json 
必需在 json 文件中聲明為組件

1. {
2. "component": true
3. }

2、rating.wxml  wxml 文件中編寫布局

1. class='com-rating'>
2. class='rating-icon' wx:for='{{[1,2,3,4,5]}}' wx:key='*this'
3. bindtap='_handleTap' data-num='{{item}}'>
4. class='rating-on' style='width:{{rating >= (max/5)*item ? 1 : rating < (max/5)*(item-1) ? 0 : (rating*10)%(max/5*10)/(max/5*10)}}em'>
5. src='./../../images/rating_on_icon.png' mode='widthFix' style='width:1em' />
6.  
7. class='rating-off' style='width:1em;'>
8. src='./../../images/rating_off_icon.png' mode='widthFix' style='width:1em' />
9.  
10.  
11.  

3、rating.wxss  修飾組件樣式

1. .com-rating {
2. display: inline-block;
3. letter-spacing: .3em;
4. position: relative;
5. }
6. .com-rating .rating-icon,
7. .com-rating .rating-on,
8. .com-rating .rating-off {
9. display: inline-block;
10. }
11. .com-rating .rating-icon:not(:last-child) {
12. margin-right: .2em;
13. }
14. .com-rating .rating-on {
15. color: black;
16. position: absolute;
17. overflow: hidden;
18. padding: 0;
19. margin: 0;
20. }
21. .com-rating .rating-off {
22. color: #DBDBDB;
23. padding: 0;
24. margin: 0;
25. }

4、rating.js  初始化組件屬性及事件

1. Component({
2. // 聲明組件屬性及默認(rèn)值
3. properties: {
4. rating: {
5. type: Number, // 必需 指定屬性類型 [String, Number, Boolean, Object, Array, null(任意類型)]
6. value: 10
7. },
8. max: {
9. type: Number,
10. value: 5
11. },
12. disabled: {
13. type: Boolean,
14. value: false
15. }
16. },
17.  
18. // 組件私有和公開的方法，組件所使用的方法需在此聲明
19. methods: {
20. _handleTap: function (e) {
21. if (this.data.disabled) return;
22. const { max } = this.data;
23. const { num } = e.currentTarget.dataset;
24. this.setData({
25. rating: max / 5 * num
26. })
27. // 自定義組件事件
28. this.triggerEvent('change', { value: max / 5 * num }, e);
29. }
30. }
31.  
32. })

使用

組件除了在 page 中使用外，在組件中也可以使用。以 page 舉例。

1.json  在 json 文件中需聲明組件

1. {
2. "usingComponents": {
3. "com-rating": "/components/rating/rating"
4. }
5. }

2.wxml

1.  
2. max="10" rating='6.5' bindchange='handleChange' />

3.js  在 js 文件中監(jiān)聽事件

1. /**
2. *@param {Object} e 組件自定義事件傳遞的數(shù)據(jù)
3. */
4. handleChange: function(e) {
5. this.setData({
6. rating: e.detail.value
7. })