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
.
weex 项目开发(三) weexpack + weex-ui的更多相关文章
- C#-Xamarin的Android项目开发(三)——发布、部署、打包
前言 部署,通常的情况下,它其实也是项目开发的一个难点. 为什么这么说呢?因为,它不是代码开发,所以很多开发者本能的拒绝学习它. 并且一个项目配置好一次以后,部署的步骤和部署的人通常很固定,所以大部分 ...
- weex 项目开发 weexpack 项目 打包、签名、发布
一. weexpack build android 和 weexpack run android 的 区别. (1)单纯打包 weexpack build android (2)打包并运行 wee ...
- weex 项目开发(六)weexpack 项目 打包、签名、发布
一. weexpack build android 和 weexpack run android 的 区别. (1)单纯打包 weexpack build android (2)打包并运行 wee ...
- weex 项目开发(二) weex 与 weexpack 的区别
1.weex 与 weexpack 即 weex-toolkit 与 weexpack 的区别 weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的,也就是说这样的项目只包括 ...
- weex 项目开发(一) weex create project 与 weex init project 的区别
开发环境配置:http://www.cnblogs.com/crazycode2/p/7822961.html 1. weex create project 与 weex init project ...
- weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件
1.安装 路由模块 及 状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义 TabBar 组件 src / ...
- weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件
1.自定义 过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...
- Android项目开发三
微博客户端开发 本周学习计划 运用OAuth相关知识,解决上周出现的微博验证问题. 看懂微博客户端登录.用户主页等功能代码. 将程序中存在的问题解决. 实际完成情况 本周继续研究了OAuth相关知识, ...
- JAVA项目从运维部署到项目开发(三.Redis)
一.Redis的介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.它通常被称为数据结构服务器,因为值(va ...
随机推荐
- 又面试了Python爬虫工程师,碰到这么几道面试题,Python面试题No9
第1题:动态加载又对及时性要求很高怎么处理? 如何知道一个网站是动态加载的数据? 用火狐或者谷歌浏览器 打开你网页,右键查看页面源代码,ctrl +F 查询输入内容,源代码里面并没有这个值,说明是动态 ...
- 总线(bus);设备(devices);驱动(drivers)
Linux Cross Reference Free Electrons Embedded Linux Experts • Source Navigation • Diff Markup • Id ...
- android sdk 下载
不知道是因为最近kaihui还是怎么的,打开android sdk官方网站特别的慢,想下载最新版本的platform几乎变成不可能完成的任务,不知道为什么Google不像Apache那样在各国设立镜像 ...
- 大数据学习——Storm+Kafka+Redis整合
1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- Linux之crontab定时任务
****crontab简介**** 简而言之呢,crontab就是一个自定义定时器. ****crontab配置文件**** 其一:/var/spool/cron/ 该目录下存放的是每个用户(包括ro ...
- 防火墙iptables介绍
防火墙: netfilter/iptables是集成在Linux2.4.X版本内核中的包过滤防火墙系统.该架构可以实现数据包过滤,网络地址转换以及数据包管理功能.linux中防火墙分为两部分:netf ...
- Python MySQLdb的execute和executemany的使用
如果使用executemany对数据进行批量插入的话,要注意一下事项: conn = MySQLdb.connect(host = “localhost”, user = “root”, passwd ...
- mysql的row_number()实现
在mysql中没有row_number()方法,这里模拟row_number()实现: 如有表 studentid name age class1 张1 15 12 张2 15 ...
- spring之lazy-init
lazy-init:延迟实例化 ApplicationContext实现的默认行为就是在启动服务器时将所有singleton bean提前进行实例化.提前实例化意味着作为初始化过程的一部分,appli ...
- HDU 2197 本源串
如果一个串能完全由其子串组成,那么这个串就不是本源串 求长度为n的本源串的个数. 由定义一个串如果不是本源串,那么他的长度一定是组成其子本源串的长度的(>=1) 整数倍. 那么长度为n的串总个数 ...