一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库
文档
预览
你可以通过飞猪、淘宝、天猫、Weex Playground 或者浏览器扫码体验
安装
使用
<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 这篇文章了解，欢迎翻译~
调试
一旦它编译完成后，将会自动打开一个浏览器，你可以将浏览器切换到开发者模式，这时候在 console 中你可以看到一个预览二维码，直接使用你的 Weex App 扫码就可以看到 Demo 效果。
支持
- 在你的公司或个人项目中使用 Weex Ui
- 如果你觉得 Weex Ui 还不错，可以通过 Star 来表示你的喜欢
- 加入钉钉聊天群帮忙解答 Weex 技术问题
贡献
想解 Bug，贡献代码或者提高文档可读性？有这个想法非常好，在提交 pull request 前记得阅读一下 Contributing Guide。
感谢给 Weex Ui 贡献代码的你们！
协议
- 遵循 Apache 协议
- 请自由地享受和参与开源