如何寫一個微信小程序組件

背景

先談下背景,在作一款產品的時候須要用到日期選擇器,可是官方的卻不太知足需求,由於沒法選擇農曆啊。因此本身來造一個輪子好了,造輪子以前先想一想啊,萬一之後多個地方要用到,多個項目要用,怎麼辦呢?html

那把這個輪子抽象,定義輸入輸出,即接口。組件裏面怎麼運轉調用方無論啊,給了什麼輸入,就只管結果好了。git

組件三要素

組件的三要素就是小程序定義的三種文件:es6

  • jsgithub

  • wxml小程序

  • wxssapp

由於js自己就是模塊化開發,因此這自然有利於組件化。wxml和wxss呢,定義了組件的皮膚,小程序的模板template標籤能夠方便wxml的複用。至於wxss,沒有獨立出來,目前沒發現要怎麼整合到獨立的組件中去,而不與其餘的wxss發生耦合。xss

<!--
  index: int
  msg: string
  time: string
-->
<template name="myTemplate">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

用法模塊化

//  若是模板是寫在單獨的wxml文件,則要inport,引入。路徑則是當前文件的相對路徑。

<import src="../cal/calendar.wxml"></import>

<template is="myTemplate" data="{{...item}}"/>

須要注意的是data數據是有單獨的做用域的,只能使用data傳入的數據。具體的理解就是:組件化

data: {
    item: {
        index: int
        msg: string
        time: string
    },
    index: int
    msg: string
    time: string
}

模板裏面的數據實際顯示的是item的屬性,而不是和item同級的屬性。
模板還有一種用法學習

<template is="myTemplate" data="{{index,msg,time}}"/>

這樣就要傳入模板中用到的三個變量,而不是item一個對象。模板渲染的結果則是最外層的index屬性,而不是item的index屬性值。

...符號是擴展運算符,理解爲將一個對象因此的屬性展開傳遞給模板,這樣的好處是不要傳遞多個,寫出的代碼更加簡潔。擴展運算符是ES6的特性,有興趣能夠深刻學習

若是運用擴展運算符給模板傳入數據,像上面怎麼去更新單個key的值呢?小程序提供了能夠根據屬性路徑更新的方法:

// 更新單個key,
this.setData({
    index: 1
});
/* 更新對象中的單個key
item: {
   index: int
   msg: string
   time: string
}
*/
this.setData({
    'item.index': 1
});

// path必須是字符串,不能是變量替代。下面是不行的
path =  'item.index';
this.setData({
   path: 1
});

雖然用法上是有點限制,但也避免了傳入一堆的參數給模板。

值得注意的是入參data的item必須是有初始化值,不然會報錯。

日曆組件

因此利用template和js就能夠打造一款組件了。先看下我所作的組件:
小程序日曆

定義一個wxml文件

<template name="calendar">
...
</template>

定義一個js文件

class Calendar {
...
}

日期類有本身的做用域名,因此組件內部的事件致使數據更新的時候,仍是要用頁面更新數據的方法this.setData,因此必需要將頁面對象傳遞給組件內部。

頁面調用組件:

// this 是當前頁面page對象,含有setData方法。
var calendar = new Calendar(this, function(date) {
  that.setData({
      date: date
  })
});

// 當選擇日期變化的時候,組件內部事件: this.pageCtx 則是page上下文,即上面實例化組件入參的this對象。
changeCalendarTab(e) {
   this.pageCtx.setData({
       'calendar_data.selectDateType':
           +e.target.dataset.tap
   });
   this.data.selectDateType = +e.target.dataset.tap;
   this.changeCallBack && this.changeCallBack(this.getCurrentSelectDate());
}

具體組件請參考個人github:calendar

這樣就完成了一個組件編寫,任何須要用到的地方均可以引入了。小程序一個不太好的地方是沒有包管理的概念,致使跨項目見的公共模塊複用起來比較麻煩,下次進行單獨講解。

by addy 原創文章,歡迎轉載,但但願全文轉載,註明本文地址。本文地址:http://www.iamaddy.net/2017/0...

憋走,點贊是美意,打賞是鼓勵~

相關文章
相關標籤/搜索