阿里开源基于 Weex 的 UI 组件库 Weex Ui | 软件推介

Posted OSC开源社区

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阿里开源基于 Weex 的 UI 组件库 Weex Ui | 软件推介相关的知识,希望对你有一定的参考价值。


Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库。


预览


阿里开源基于 Weex 的 UI 组件库 Weex Ui | 软件推介


你可以通过飞猪淘宝天猫Weex Playground 或者浏览器扫码体验


安装


npm i weex-ui -S


使用


<template>

  <div>

    <wxc-button text="Open Popup"

                @wxcButtonClicked="buttonClicked"></wxc-button>

    <wxc-popup width="500"

               pos="left"

               :show="isShow"

               @wxcPopupOverlayClicked="overlayClicked"></wxc-popup>

  </div>

</template>


<script>

  import { WxcButton, WxcPopup } from 'weex-ui';

  module.exports = {

    components: { WxcButton, WxcPopup },

    data: () => ({

      isShow: false

    }),

    methods: {

      buttonClicked () {

        this.isShow = true;

      },

      overlayClicked () {

        this.isShow = false;

      }

    }

  };

</script>


汇集使用 (推荐)


import { WxcComponent1, WxcComponent2 } from "weex-ui"


为了不打包所有的组件,你需要使用 babel-plugin-component 来只引入需要的组件打包。


npm i babel-plugin-component -D

// 增加一个plugins的配置到 .babelrc 中


{

  "plugins": [

    [

      "component",

      {

        "libraryName": "weex-ui",

        "libDir": "packages"

      }

    ]

  ]

}


分开使用


import WxcComponent1 from "weex-ui/packages/wxc-component1"

import WxcComponent2 from "weex-ui/packages/wxc-component2"


Weex-toolkit


如果你使用weex-toolkit来开发你的Weex项目,你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'


npm i babel-preset-stage-0 babel-plugin-component  -D


{

  "presets": ["es2015", "stage-0"],

  "plugins": [

    [

      "component",

      {

        "libraryName": "weex-ui",

        "libDir": "packages"

      }

    ]

  ]

}


阿里开源基于 Weex 的 UI 组件库 Weex Ui | 软件推介


推荐阅读

点击“阅读原文”查看更多精彩内容

以上是关于阿里开源基于 Weex 的 UI 组件库 Weex Ui | 软件推介的主要内容,如果未能解决你的问题,请参考以下文章

阿里公开Weex技术架构,还开源了一大波组件

WeexConf 2018干货系列|Weex + Ui

阿里天施:我眼中的Weex和Weex开源那些事

手淘天施:我眼中的Weex和Weex开源那些事

Weex框架介绍(上)

阿里巴巴开源Weex 开发教程