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"
}
]
]
}-
腾讯DeepOcean原创文章：dopro.io/egame-weex-… 随着电竞业务的不断发展，页面功能越来越多，交互逻辑更加复杂，类似无限滚动、上拉刷新、横竖切换滚动等形式在业务中已是标配，经过重重优化后在H5中的体验一直达不到理想状态，没错，种种卡，H5的性能太差! 是持续优化还是破而后立选择新的技术方向呢？我们选择了更有效的后者。 为什么选择weex 相对H5来说，weex带来的用户体验
-
写在最前面 Docs：https://houbank.github.io/dro... GitHub：https://github.com/hbteam/wee... HTML5在线demo演示：https://hbteam.github.io/weex... GitHub中有二维码图片可使用weex playground app扫一扫查看demo演示 1. 为什么要开发一套UI组件？ 期初是想用
-
https://alibaba.github.io/weex-ui/#/cn/weex-ui-report http://weex-project.io/cn/references/broadcast-channel.html weex
-
weex-ui weex - ui 阿里飞猪出品 https://github.com/alibaba/weex-ui 使用 进入 weex 项目根目录 npm i weex-ui -S 关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，
-
https://apache.github.io/incubator-weex-ui/#/cn/packages/wxc-button/
-
English | 中文 一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库 文档 主页 English 搭配 weex-toolkit 使用 Weex Ui 预览 你可以通过飞猪、淘宝、天猫、Weex Playground 或者浏览器扫码体验 安装 npm i weex-ui -S 使用 <template> <div> <wxc-button text="Open Pop
-
Welcome to translate this article. 本文是2018年 Weex Conf 中议题《Weex + Ui》的内容文档整理，主要给大家介绍飞猪 Weex 技术体系从无到有的过程，包括 Weex Ui 组件库的开发和发展，重点分享在 Weex Ui 层建设的一些经验。 文章较长，首先放上 Weex Ui 的开源地址，欢迎大家提PR，同时也可以通过 Star 来表示你的喜欢
-
Rax 与 Weex 组件的关系 Rax 的基础组件内部实现抹平了各端的差异，在 Weex 端的实现是Weex 提供的基础组件。例如 rax-view 的实现是 div，rax-text 的实现是 text。 以 text 组件为例，原生 text 组件在 Weex 端的表现是默认占满整行，rax-text 抹平了样式上的差异，让不同端上表现一致。 组件属性 Rax 基础组件会将所有属性向下透传，
-
安装前 安装前建议你的node版本是 >= 8.0, 推荐使用 n 来进行版本管理，同时建议 npm 版本 >= 5 node -v v8.2.1 npm --version 5.3.0 确保 weex-toolkit 为新版本 npm install -g weex-toolkit@latest 目前最新版本为： weex -v v1.1.0-beta.7 - weexpack : v0
-
Canvas 组件参考 UITransform 组件参考 Widget 组件参考 Button 组件参考 Layout 组件参考 EditBox 组件参考 ScrollView 组件参考 ScrollBar 组件参考 ProgressBar 组件参考 LabelOutline 组件参考 Toggle 组件参考 UIMeshRenderer 组件参考 ToggleGroup 组件参考 Slider
-
Weex UI 是一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库。