github地址:weex-ui
https://github.com/alibaba/weex-ui
官网:
https://alibaba.github.io/weex-ui/#/cn/
创建项目:
weexpack create appName
cd appName
npm install
weexpack platform add android
weexpack run android
weexpack build android
安装 weex-ui
npm i weex-ui -S
汇集使用 (推荐)
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
.babelrc
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
]
]
}
测试代码:
index.vue
<template>
<wxc-tab-bar
:tab-titles="tabTitles"
:tab-styles="tabStyles"
title-type="icon"
:tab-page-height="tabPageHeight"
@wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
<!-- 第一个页面内容-->
<div class="item-container" :style="contentStyle"><text>首页</text></div>
<!-- 第二个页面内容-->
<div class="item-container" :style="contentStyle"><text>特别推荐</text></div>
<!-- 第三个页面内容-->
<div class="item-container" :style="contentStyle"><text>消息中心</text></div>
<!-- 第四个页面内容-->
<div class="item-container" :style="contentStyle"><text>我的主页</text></div>
</wxc-tab-bar>
</template>
<script>
import { WxcTabBar, Utils } from 'weex-ui';
// tab配置文件
import Config from './config'
export default {
components: { WxcTabBar },
data: () => ({
tabTitles: Config.tabTitles,
tabStyles: Config.tabStyles
}),
created () {
this.tabPageHeight = Utils.env.getPageHeight();
const { tabPageHeight, tabStyles } = this;
this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
},
methods: {
wxcTabBarCurrentTabSelected (e) {
const index = e.page;
// console.log(index);
}
}
};
</script>
<style scoped>
.item-container {
width: 750px;
background-color: #f2f3f4;
align-items: center;
justify-content: center;
}
</style>
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 i
npm run start
建议执行 npm run start
项目目录:
效果图:
注:
当前 weex 版本没有自动生成 .gitignore 文件,需要手动添加 否则上传时会将 node_modules 一起上传
.gitignore
.DS_Store
node_modules/
dist/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
.