用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實用組件/插件 查看內容

小程序組件開發之時間軸組件及組件關系

Rolan 2019-10-15 00:16

本文是面向初學者的,大牛可以忽略,以時間軸組件為例簡單聊一下小程序的組件開發。先簡單介紹一下公司業務和前端項目情況吧。公司是做金融行業財富管理的業務,涉及主要是做基金、保險這一塊。前端項目目前涉及B端 ...

本文是面向初學者的,大牛可以忽略,以時間軸組件為例簡單聊一下小程序的組件開發。

先簡單介紹一下公司業務和前端項目情況吧。公司是做金融行業財富管理的業務,涉及主要是做基金、保險這一塊。前端項目目前涉及B端后臺管理系統、C端小程序、Node服務端,其中業務重點在小程序端,我們只有微信小程序端,沒有做其他小程序,也沒有使用市面上流行的各種多端框架,我們使用原生開發方式,UI組件我們也選擇了自研,目前我們開發了一套金融風格的小程序端UI組件庫,有過開源的打算,但目前我們還在內部沉淀使用中,目前積累了 34+ 個組件了,支持主題和國際化,基本上滿足了目前開發的需要。

所以,本文要說的是我們組件庫最近添加的一個新組件,時間軸組件,也是筆者開發的,筆者由于在公司主要負責小程序端的開發,基于業務的需要貢獻了開發了不少組件,那么多組件之所以講這個組件,是因為其他大部分組件的開發都很普通,體現不了小程序特有的東西,要么是組件太復雜代碼太多不適合用文字表達,而時間軸(Timeline)組件我覺得剛剛好,不肥不瘦不偏不倚20不足18有余,比較好拿來作為素材聊聊。

另外,為了寫本文我把此組件做成了 小程序代碼片段 ,代碼片段是一種可分享的小項目,可用于分享小程序和小游戲的開發經驗、展示組件和 API 的使用、復現開發問題等等,代碼片段詳細信息可以去官方文檔看看。

時間軸組件(源代碼)代碼片段 ,點擊鏈接可以直接通過小程序開發工具直接打開查看,可以邊看源代碼邊看文章。

注意:請確保你的開發者工具版本 >= 1.02.1904280

組件分析設計

在著手寫代碼之前,還是先做一翻分析設計。

分析什么?我們需要分析業務方對組件的詳細需求、交互以及設計稿效果,弄清楚有沒有什么特別的地方,需求是否適合使用時間軸組件來呈現等,對于不合理的需求,作為開發我們有責任提出問題和建議來。

設計什么?我們需要設計組件的目錄結構、API以及對使用者友好的示例文檔,通常除了API外,目錄結構、命名和文檔我們都會現有一個規范,按給定的規范做即可,但是如何設計一組好的API就需要開發者具有一定的經驗。

當然,對于常用的組件,我們也許用不著這么認真,直接參考市面上已有的組件庫找著樣子抄就行了,事實上我們除了少數幾個組件別具特色外別家沒有外,其他組件我們也是直接參考別的組件庫是怎么做的,但我這里拋磚引玉吧,不僅僅是開發組件,任何需求的迭代開發都是一樣的,特別是復雜的需求,我們更需要設計。

對于組件開發來說,最好的設計文檔就是示例文檔,文檔先行。看一下 Timeline 組件的文檔吧:

Timeline 組件的文檔

什么不支持自定義 slot,什么地方支持自定義,這就很清晰了,事件軸點可以自定義樣式,時間軸的內容體可以自定義,以及一些外部樣式 class。

當然這是最終完善的文檔,我們首先應該定義好組件的 Attributes(Props)、Slot ,命名、類型這些都事先定義好,這是最基礎的,分析出來我們的組件應該提供什么樣的能力,定義什么樣的接口。其次,我們應該寫好代碼示例,先想好我們的組件是如何使用的,然后我們再支持這樣的實現。這里可以看出,組件使用了父子嵌套組件模式:

<pps-timelinereverse="{{false}}">
  <pps-timeline-item
    wx:for="{{activity}}" 
    wx:key="{{index}}"
    timestamp="{{item.timestamp}}"
    dotStyle="border-color: #33cd5f; color: #33cd5f">
      {{item.content}}
  </pps-timeline-item>
</pps-timeline>

為什么這里要使用父子組件模式呢,其實不這樣也是可以很好的完整組件。做好了這些工作后我們開始寫代碼吧。

組件實現

timeline

因為我們是使用父子組件嵌套模式,所以在創建目錄時就可以這樣體現:

timeline
--index.wxml
----timeline-item
------index.wxml

當然,在小程序中要實現父子組件關聯關系并不是非要這樣,事實上沒有層級規定限制,父子組件平級放置也是可以的,但我推薦這樣,閱讀起來更清晰名了。

父組件內部其實很簡單,就是一個 slot,以便能夠放入子組件

<!-- timeline/index.wxml -->
<viewclass="pps-timeline custom-class {{reverse?'desc':'asc'}}">
  <slot/>
</view>

custom-class 是定義組件的根外部樣式,以便在外部傳入樣式,為什么要這樣呢,小程序的組件技術采用的 WebCompontent 技術,不了解的同學可以搜索一下,這里我寫了 demo 。 reverse 是個 prop ,控制時間軸是順序展示還是倒序展示,這個在父組件來控制是最好不過的(當然,你也可以把傳入的數組排序好也是一樣的)。

timeline-item

核心都在這個里面,我們先來分析一下DOM結構,以便確定怎么構建HTML結構

具體代碼就不貼了,可以打開代碼片段查看。

排序:父子組件間關系

組件間關系這是這個組件最關鍵的地方,不同于 Vue.js 組件方案,只有實現這個才能實現在 timeline 上實現 reverse。關于組件的關聯關系詳細可以看 文檔 。

在 timeline/index.js 和 timeline-item/index.js 中分別定義 timeline 是 timeline-item 的父級,timeline-item 是 timeline 的子級,由 relations 選項來定義。關鍵是確定最后一個節點,因為最后一個節點是沒有連接線的,這個需要處理(其實數據不復雜的情況下更建議對傳入的數組進行排序,這樣就不需要處理DOM結構了)。

timeline/index.js

relations: {
    './timeline-item/index': {
      type: 'child',
      linked: function (target){
        // 每次有custom-li被插入時執行,target是該節點實例對象,觸發在該節點attached生命周期之后
        this._getAllChildren()
      },
      unlinked: function (target){
        this._getAllChildren()
      }
    }
  },

timeline-item/index.js

relations: {
    '../../timeline/index': {
      type: 'parent'
    }
  },

有了關聯關系,我們可以調用 this.getRelationNodes 方法獲取所有的子節點,這個寫在 timeline-item/index.js 中

methods: {
    _getAllChildren() {
      const nodes = this.getRelationNodes('./timeline-item/index')
      if (nodes.length) {
        const lastIndex = nodes.length - 1
        const { reverse } = this.data
        nodes.forEach((element, index) => {
          const isLast = index === lastIndex
          element.updateIsLastElement({
            index,
            isLast,
            reverse
          })
        })
      }
    }
}

然后遍歷每一個子節點,調用子節點 methods 中的 updateIsLastElement 處理方法。這里需要特別注意的是 在 unlinked 中也要再次調用 _getAllChildren ,因為當使用 setData 刪除一個子項時需要重新計算子節點個數。

所謂的排序,就是 Flex CSS 操作而已

.pps-timeline.desc{
  display: flex;
  flex-direction: column;
}
.pps-timeline.asc{
  display: flex;
  flex-direction: column-reverse;
}

這個組件還有很多可以改進的地方,這里作為一種思路吧。

注意

在引用小程序端的時候,父子組件都需要在json中引入,如果你的項目是用 npm 進行管理的,那么不要在全局的 app.json 中引入,要在使用的頁面中引入,否則引用不到。

推薦幾個優秀的組件庫

  • iView Weapp 。出自著名的Vue組件庫 iView 之家,跟 iView 一脈相承。
  • Vant Weapp 。“大名鼎鼎”的大廠有贊出品,Vue 組件庫 Vant 的小程序版本,兩者基于相同的視覺規范,提供一致的 API 接口。
  • Color UI 。最“風騷”的組件庫,多彩靚麗,組件豐富,色彩華麗,動畫酷炫。
  • wux-weapp 。最大而全的組件庫,各種組件應有盡有,組件寶庫。

后記

筆者小程序開發經驗也不是很豐富,如有錯誤請指出,小程序的自定義組件涉及的東西比 Vue.js 多多了,比如模板和樣式怎么處理、組件間通信、組件間關系、組件生命周期等都具有小程序特色。純原生開發一個復雜的小程序,不借助輪子個人感覺還是很麻煩的,尤其現在這么多小程序,哪天需要支持其他小程序呢,我想不會有人一個個對接原生開發吧,由于我們業務時toB的,所以目前還不需要考慮其他平臺小程序。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: dunizb 來自: blog
不朽的浪漫援彩金
新疆25选7开奖2019年 江西十一选五多乐彩 掌心福州麻将正式版下载 排列三算法 河南11选5分布走势图 广东闲来麻将怎么下 3d杀码专家杀码 大众麻将规则 股票的k线图基本知 熊猫麻将下载 国标麻将16翻怎么玩 眼镜定配工职业资格 宁夏十一选五派奖 湖北快三倍投计算器 福彩幸运农场怎么玩 黑桃有哪些游戏关服了