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

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

巴特西