Weex UI 基于 Weex 的富交互轻量级高性能的 UI 组件库

Question

Weex UI 是一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库，被大量运用到 飞猪、淘宝、天猫等 APP 中，图3富交互场景，粘手效果丝滑拖动，快速滑动，动态隐藏头部等功能都可做。逻辑异常复杂、多组件国际机票列表页，Weex同可胜任。

安装

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';
  // 或者分开引用（不是很推荐）
  // import WxcButton from 'weex-ui/packages/wxc-button';
  // import WxcPopup from 'weex-ui/packages/wxc-popup';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

使用前

为了不打包所有的组件，你需要使用 babel-plugin-component 来只引入需要的组件打包，同时如果没有安装 babel-preset-stage-0，也需一并安装。

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

{
    "presets": ["es2015", "stage-0"],
    "plugins": [
        [
            "component",
            {
                "libraryName": "weex-ui",
                "libDir": "packages",
                "style": false
            }
        ]
    ]
}

更多

• 如果 webpack.config.js中 babel-loader 有对 node_modules 进行 exclude 处理，请修改成这样 exclude: /node_modules(?!(\/|\\).*(weex).*)/
• 更多使用可见：在 weex-toolkit 创建的项目中使用 Weex Ui 和 weex-ui-demo
• 为了获取最新特性, 请常查看 升级日志 并更新组件到最新版本
• 很多常见问题可以从 faq 和 issue 列表 获得答案，假如发现了新 Bug，可以给我们提一个issue
• 更多的 Weex 建设经验可以从 Weex + Ui - Weex Conf 2018 这篇文章了解，欢迎翻译~

调试

npm i
npm run start

一旦它编译完成后，将会自动打开一个浏览器，你可以将浏览器切换到开发者模式，这时候在 console 中你可以看到一个预览二维码，直接使用你的 Weex App 扫码就可以看到 Demo 效果。

官网：https://apache.github.io/incubator-weex-ui/