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

.

weex 项目开发(三) weexpack + weex-ui的更多相关文章

  1. C#-Xamarin的Android项目开发(三)——发布、部署、打包

    前言 部署,通常的情况下,它其实也是项目开发的一个难点. 为什么这么说呢?因为,它不是代码开发,所以很多开发者本能的拒绝学习它. 并且一个项目配置好一次以后,部署的步骤和部署的人通常很固定,所以大部分 ...

  2. weex 项目开发 weexpack 项目 打包、签名、发布

    一. weexpack build android  和  weexpack run android 的 区别. (1)单纯打包 weexpack build android (2)打包并运行 wee ...

  3. weex 项目开发(六)weexpack 项目 打包、签名、发布

    一. weexpack build android  和  weexpack run android 的 区别. (1)单纯打包 weexpack build android (2)打包并运行 wee ...

  4. weex 项目开发(二) weex 与 weexpack 的区别

    1.weex 与 weexpack 即  weex-toolkit 与 weexpack 的区别 weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的,也就是说这样的项目只包括 ...

  5. weex 项目开发(一) weex create project 与 weex init project 的区别

    开发环境配置:http://www.cnblogs.com/crazycode2/p/7822961.html 1. weex create project  与  weex init project ...

  6. weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件

    1.安装  路由模块  及  状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义  TabBar  组件 src / ...

  7. weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件

    1.自定义  过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...

  8. Android项目开发三

    微博客户端开发 本周学习计划 运用OAuth相关知识,解决上周出现的微博验证问题. 看懂微博客户端登录.用户主页等功能代码. 将程序中存在的问题解决. 实际完成情况 本周继续研究了OAuth相关知识, ...

  9. JAVA项目从运维部署到项目开发(三.Redis)

    一.Redis的介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.它通常被称为数据结构服务器,因为值(va ...

随机推荐

  1. 又面试了Python爬虫工程师,碰到这么几道面试题,Python面试题No9

    第1题:动态加载又对及时性要求很高怎么处理? 如何知道一个网站是动态加载的数据? 用火狐或者谷歌浏览器 打开你网页,右键查看页面源代码,ctrl +F 查询输入内容,源代码里面并没有这个值,说明是动态 ...

  2. 总线(bus);设备(devices);驱动(drivers)

    Linux Cross Reference Free Electrons Embedded Linux Experts • Source Navigation  • Diff Markup  • Id ...

  3. android sdk 下载

    不知道是因为最近kaihui还是怎么的,打开android sdk官方网站特别的慢,想下载最新版本的platform几乎变成不可能完成的任务,不知道为什么Google不像Apache那样在各国设立镜像 ...

  4. 大数据学习——Storm+Kafka+Redis整合

    1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  5. Linux之crontab定时任务

    ****crontab简介**** 简而言之呢,crontab就是一个自定义定时器. ****crontab配置文件**** 其一:/var/spool/cron/ 该目录下存放的是每个用户(包括ro ...

  6. 防火墙iptables介绍

    防火墙: netfilter/iptables是集成在Linux2.4.X版本内核中的包过滤防火墙系统.该架构可以实现数据包过滤,网络地址转换以及数据包管理功能.linux中防火墙分为两部分:netf ...

  7. Python MySQLdb的execute和executemany的使用

    如果使用executemany对数据进行批量插入的话,要注意一下事项: conn = MySQLdb.connect(host = “localhost”, user = “root”, passwd ...

  8. mysql的row_number()实现

    在mysql中没有row_number()方法,这里模拟row_number()实现: 如有表 studentid   name age   class1 张1 15     12 张2 15     ...

  9. spring之lazy-init

    lazy-init:延迟实例化 ApplicationContext实现的默认行为就是在启动服务器时将所有singleton bean提前进行实例化.提前实例化意味着作为初始化过程的一部分,appli ...

  10. HDU 2197 本源串

    如果一个串能完全由其子串组成,那么这个串就不是本源串 求长度为n的本源串的个数. 由定义一个串如果不是本源串,那么他的长度一定是组成其子本源串的长度的(>=1) 整数倍. 那么长度为n的串总个数 ...