【開源三方庫】Easyui：基于OpenAtom OpenHarmony ArkUI深度定制的組件框架

點(diǎn)擊藍(lán)字 ╳ 關(guān)注我們

開源項(xiàng)目 OpenHarmony是每個(gè)人的 OpenHarmony

萬冬陽

公司：中國科學(xué)院軟件所

小組：知識體系工作組

簡介

Easyui是一套基于ArkTS語言開發(fā)的輕量、可靠的移動(dòng)端組件庫，它是對OpenAtom OpenHarmony（以下簡稱“OpenHarmony”） ArkUI進(jìn)行深度定制的組件框架。Easyui可擴(kuò)展性較強(qiáng)，可以基于源碼進(jìn)行二次開發(fā)，修改原有組件以及新增部分組件，以滿足具體項(xiàng)目的開發(fā)需求。該框架適用大部分OpenHarmony應(yīng)用的開發(fā) ，能夠更加完善OpenHarmony 的應(yīng)用開發(fā)能力，使我們的應(yīng)用開發(fā)更簡單。 組件特性 ?組件種類分布 ?組件效果展示

開發(fā)環(huán)境

IDE：DevEco Studio 3.1 Beta2，version:3.1.0.400SDK：3.2.14.2 API9

使用方法

使用前需要先安裝ohpm-cli請參考安裝教程：https://ohpm.openharmony.cn/#/cn/help/quickstart 1.下載組件

ohpminstall@isrc/easyui.har–-save

2.easyui組件庫中的地址列表組件使用示例

import { AddressList } from 'easyui'
@Entry
@Component
struct TestAddressList {
  build() {
    Column(){
      Text("基礎(chǔ)用法")
        .fontSize(20)
        .fontColor("#ff808080")
        .margin(20)
        .alignSelf(ItemAlign.Start)
      AddressList({
        addressList: [              //地址列表
          { "id":1,"name":"張三","tel":"13000000000","address":"浙江省杭州市西湖區(qū)文一路 138 號東方通信大廈7樓501室"}
          ,{ "id":2,"name":"李四","tel":"13100000000","address":"浙江省杭州市拱墅區(qū)莫干山路 50號"}
          ,{ "id":3,"name":"王五","tel":"13200000000","address":"浙江省杭州市濱江區(qū)江南大道13號"}
        ],
        outRangeIdArray:[5,6,7]        //超出配送范圍的地址id集合
      })


    }.width("100%")
    .height("100%")
    .backgroundColor("#ffeaeaea")
  }
}

easyui庫中的組件列表 需要的權(quán)限無 目錄結(jié)構(gòu)

/easyui        # 項(xiàng)目根目錄
├── easyui     # easyui組件庫
│    └─ src/main
│       └─ ets/common/components  # 組件庫中的所有組件
│       └─index.ets    # 組件導(dǎo)出文件    
├── entry      # 組件使用方法測試代碼示例代碼文件夾 
│    └─ src/main
│       └─ ets/page/Main  # 組件測試效果代碼           
├──README.md#安裝使用方法

結(jié)語

?通過本篇文章介紹，您對easyui組件框架應(yīng)該有了初步的了解。我們所有的源碼和指導(dǎo)文檔都已經(jīng)開源，如果您對本篇文章內(nèi)容以及所實(shí)現(xiàn)的Demo感興趣，可以根據(jù)本篇文章介紹自行下載easyui組件框架源碼（https://gitee.com/openharmony-sig/ohos_easyUI）進(jìn)行研究和使用。同時(shí)也歡迎更多開發(fā)者與我們共享開發(fā)成果，分享技術(shù)解讀與經(jīng)驗(yàn)心得。