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

.