weex 项目开发（四）项目框架搭建 及 自定义 TabBar 组件

1.安装 路由模块 及 状态管理模块

npm install vue-router --save
npm install vuex --save

2.自定义 TabBar 组件

src / components / TabBar.vue

TabBar.vue

<!-- 底部选项卡 -->
<template>
<div class="wrapper">
<div class="bar-item" @click="tabTo('home')">
<text class="bar-ic iconfont" :style="testCS"></text>
<text class="bar-txt">首页</text>
</div>
<div class="bar-item" @click="tabTo('topic')">
<text class="bar-ic iconfont"></text>
<text class="bar-txt">专题</text>
</div>
<div class="bar-item act" @click="tabTo('class')">
<text class="bar-ic iconfont"></text>
<text class="bar-txt">分类</text>
</div>
<div class="bar-item" @click="tabTo('shop')">
<text class="bar-ic iconfont"></text>
<text class="bar-txt">购物车</text>
</div>
<div class="bar-item" @click="tabTo('my')">
<text class="bar-ic iconfont"></text>
<text class="bar-txt">个人</text>
</div>
</div>
</template>

<script>
var modal = weex.requireModule('modal');

export default {
computed:{
testCS:function () {
return this.pIndexKey == 'home'?'color:#b4282d;':''
}
},
data () {
return {
pIndexKey:'home'
}
},
mounted(){
},
methods: {
tabTo(_key){
if(this.pIndexKey == _key) return;
this.pIndexKey = _key;
this.$emit('tabTo',{
status : 'tabTo',
data : {
key : _key
}
})
}
}
}
</script>

<style scoped>
.iconfont {
font-family:iconfont;
}
.wrapper{
position: fixed;
bottom: 0;
left: 0;right: 0;
height: 90px;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-around;
border-top-width: 1px;
border-top-color: #d9d9d9;
background-color: #fafafa;
}
.bar-item{
flex: 1;
}
.bar-txt,.bar-ic{
color:#666;
text-align: center;
}
.bar-active{
color:#b4282d;
}
.bar-ic{
padding-top: 14px;
font-size: 38px;
}
.bar-txt{
font-size: 22px;
padding-top: 2px;
}
</style>

3.自定义 工具类

src / utils / util.js

util.js

/**
* 工具类
*/

let utilFunc = {
initIconFont () {
let domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "iconfont",
'src': "url('http://at.alicdn.com/t/font_404010_jgmnakd1zizr529.ttf')"
});
},
setBundleUrl(url, jsFile) {
const bundleUrl = url;
let host = '';
let path = '';
let nativeBase;
const isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0 || bundleUrl.indexOf('file://assets/') >= 0;
const isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
if (isAndroidAssets) {
nativeBase = 'file://assets/dist';
} else if (isiOSAssets) {
// file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
// file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
} else {
const matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
const matchFirstPath = /\/\/[^\/]+\/([^\s]+)\//.exec(bundleUrl);
if (matches && matches.length >= 2) {
host = matches[1];
}
if (matchFirstPath && matchFirstPath.length >= 2) {
path = matchFirstPath[1];
}
nativeBase = 'http://' + host + '/';
}
const h5Base = './index.html?page=';
// in Native
let base = nativeBase;
if (typeof navigator !== 'undefined' && (navigator.appCodeName === 'Mozilla' || navigator.product === 'Gecko')) {
// check if in weexpack project
if (path === 'web' || path === 'dist') {
base = h5Base + '/dist/';
} else {
base = h5Base + '';
}
} else {
base = nativeBase + (!!path? path+'/':'');
}

const newUrl = base + jsFile;
return newUrl;
},
getUrlSearch(url,name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = url.slice(url.indexOf('?')+1).match(reg);
if (r != null) {
try {
return decodeURIComponent(r[2]);
} catch (_e) {
return null;
}
}
return null;
}
};

export default utilFunc;　　

4.其他页面

src / pages / Home / Home.vue

例如：Home.vue

<!-- 首页 -->
<template>
<div>
<text>首页</text>
</div>
</template>

<script>
export default {
name: 'Home',
data: () => ({
//
}),
created () {
//
},
methods: {
//
}
};
</script>

<style scoped>
</style>

5.配置 路由

src / router / index.js

index.js

/**
* 配置路由
*/
import Router from 'vue-router'
// 首页
import Home from '../pages/Home/Home.vue'
// 专题
import Topic from '../pages/Topic/Topic.vue'
// 分类
import Class from '../pages/Class/Class.vue'
// 购物车
import Shop from '../pages/Shop/Shop.vue'
// 个人
import My from '../pages/My/My.vue'

Vue.use(Router)

export default new Router({
// mode: 'abstract',
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/topic', component: Topic },
{ path: '/class', component: Class },
{ path: '/shop', component: Shop },
{ path: '/my', component: My }
]
})

6.主页面 引入 工具类 及 TabBar 组件

src / App.vue

App.vue

<!-- 主页面 -->
<template>
<div class="app-wrapper">
<router-view class="r-box"></router-view>
<tab-bar @tabTo="onTabTo"></tab-bar>
</div>
</template>

<script>
var modal = weex.requireModule('modal');
import util from './utils/util.js';
import tabBar from './components/TabBar.vue';

export default {
data () {
return {
//
}
},
components: {
'tab-bar': tabBar
},
created () {
util.initIconFont();
},
methods: {
onTabTo(_result){
let _key = _result.data.key || '';
this.$router && this.$router.push('/'+_key)
}
}
}
</script>

<style>
body{
margin: 0;
padding: 0;
background-color: #f4f4f4;
color:#333;
}
</style>

<style scoped>
.app-wrapper{
background-color: #f4f4f4;
}
.r-box{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
}
</style>

7.定义 入口文件 entry.js

src / entry.js

/**
* 入口文件
*/
import App from './App.vue'
import router from './router'

// 创建应用程序实例
new Vue(Vue.util.extend({ el: '#root', router }, App));

router.push('/');

8.在 webpack.config.js 中配置 入口文件

/***************** 配置入口文件 start *****************/
const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};
/****************** 配置入口文件 end ******************/

9.项目 结构



10.效果图



注：#root 报错

如果你使用的是 entry.js 作为入口文件，就需要删除 webpack.conf.js 文件中的 getEntryFileContent 和 walk 方法。