weex 项目开发 weex + weex-ui

Posted 2020-10-16 每天都要进步一点点

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

.