weex 项目开发（三） weexpack + weex-ui

github地址：weex-ui

?

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

官网：

?

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

创建项目：

?

1 2 3 4 5 6 7 8 9 10 11

weexpack create appName   cd appName   npm install   weexpack platform add android   weexpack run android   weexpack build android

安装 weex-ui

?

1	npm i weex-ui -S

汇集使用 (推荐)

?

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

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

?

1	npm i babel-plugin-component -D

 

?

1 2 3 4 5 6 7 8 9 10 11 12

// 增加一个plugins的配置到 .babelrc 中 {   "plugins": [     [       "component",       {         "libraryName": "weex-ui",         "libDir": "packages"       }     ]   ] }

分开使用

?

1 2	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'

?

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

.babelrc

?

1 2 3 4 5 6 7 8 9 10 11 12

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

 

测试代码：

index.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

/**  * 底部选项卡样式配置  */ 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   } }

运行：

?

1	weexpack run android

或

?

1 2	npm i npm run start

建议执行  npm run start

项目目录：

 

效果图：

注：

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

.gitignore

?

1 2 3 4 5 6 7 8 9 10 11 12

.DS_Store node_modules/ dist/ npm-debug.log yarn-error.log   # Editor directories and files .idea *.suo *.ntvs* *.njsproj *.sln

.