github地址：weex-ui

https://github.com/alibaba/weex-ui

官网：

https://alibaba.github.io/weex-ui/#/cn/

创建项目：

weexpack create appNamecd appNamenpm installweexpack platform add androidweexpack run androidweexpack build android

安装 weex-ui

npm i weex-ui -S

汇集使用 (推荐)

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

为了不打包所有的组件，你需要使用  来只引入需要的组件打包。

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项目，你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'

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

.babelrc

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

 

测试代码：

index.vue

config.js

/** * 底部选项卡样式配置 */export default {  // 标题 + 图标  tabTitles: [    {      title: '首页',      icon: 'https://gw.alicdn.com/tfs/TB1MWXdSpXXXXcmXXXXXXXXXXXX-72-72.png',      activeIcon: 'https://gw.alicdn.com/tfs/TB1kCk2SXXXXXXFXFXXXXXXXXXX-72-72.png',    },    {      title: '特别推荐',      icon: 'https://gw.alicdn.com/tfs/TB1ARoKSXXXXXc9XVXXXXXXXXXX-72-72.png',      activeIcon: 'https://gw.alicdn.com/tfs/TB19Z72SXXXXXamXFXXXXXXXXXX-72-72.png'    },    {      title: '消息中心',      icon: 'https://gw.alicdn.com/tfs/TB1VKMISXXXXXbyaXXXXXXXXXXX-72-72.png',      activeIcon: 'https://gw.alicdn.com/tfs/TB1aTgZSXXXXXazXFXXXXXXXXXX-72-72.png'    },    {      title: '我的主页',      icon: 'https://gw.alicdn.com/tfs/TB1Do3tSXXXXXXMaFXXXXXXXXXX-72-72.png',      activeIcon: 'https://gw.alicdn.com/tfs/TB1LiNhSpXXXXaWXXXXXXXXXXXX-72-72.png'    }  ],  // tab样式  tabStyles: {    bgColor: '#FFFFFF',    titleColor: '#666666',    activeTitleColor: '#3D3D3D',    activeBgColor: '#FFFFFF',    isActiveTitleBold: true,    iconWidth: 70,    iconHeight: 70,    width: 160,    height: 120,    fontSize: 24,    textPaddingLeft: 10,    textPaddingRight: 10  }}

运行：

weexpack run android

或

npm inpm run start

建议执行  npm run start

项目目录：

 

效果图：

注：

当前 weex 版本没有自动生成 .gitignore 文件，需要手动添加 否则上传时会将 node_modules  一起上传

.gitignore

.DS_Storenode_modules/dist/npm-debug.logyarn-error.log# Editor directories and files.idea*.suo*.ntvs**.njsproj*.sln

.