【小程序系列】使用uView 自定义配置uni-app原生中的tabBar_使用uviewui根据角色自定义tabbar

一、uView是什么？

uView是uni-app生态专用的UI框架，是一个开源、免费的优秀框架。

二、安装与配置

官方文档讲的很详细，所以这里就直接引用：安装与配置

三、使用步骤

在完成第二步，并成功引入后，进行如下步骤：

1、创建tabBar对应的页面文件

2、配置page.json中的tabBar属性

• 需要注意的是，这里仅需配置tabBar中list属性中各页面的路径，如下图所示：
  
  

这里要注意了，和官方文档不一样，但确实是不需要加/
因为我在实测过后发现加/是无效的，在去掉/后反而正常了

3、创建自定义tabBar文件

由于我们要使用自定义的tabBar覆盖原生的tabBar，所以需要创建一个自定义文件，一个对象对应tabBar按钮的配置，这里列出单个对象的所有字段属性：

 let list =[{  
					iconPath: "/static/uview/example/component.png",
					selectedIconPath: "/static/uview/example/component_select.png", // 激活(选中)的图标，同上
					text: '首页', // 显示的提示文字
					count: 2, // 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
					isDot: true,   // 如果配置此值为true，那么角标将会以红点的形式显示
					pagePath: "/pages/home/index", // 点击某一个item时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径
          customIcon: false, // 如果使用自定义扩展的图标库字体，需配置此值为true
                            // 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
          midButton: false, // 如果是凸起按钮项，需配置此值为true
				},
				{
					iconPath: "/static/uview/example/js.png",
					selectedIconPath: "/static/uview/example/js_select.png",
					text: '发布',
					midButton: true,  
					pagePath: "/pages/publish/index",
          customIcon: false,
				},
				{
					iconPath: "account",
					selectedIconPath: "account-fill",
					text: '我的',
          customIcon: false,
					pagePath: "/pages/my/index",
          customIcon: false,
				},
			]
 
export default list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 这里可以创建多个对象
• 如果还有疑问，可以参考官网文档

4、配置Vuex

在创建了上面的不同角色对应的tabBar对象数组后，我们要在Vuex中使用，因为uni-app自动集成了Vuex，所以直接引用就好了，由于我将其分模块处理了，这里列出结构：

import Vue from 'vue'
import Vuex from 'vuex'
import api from '@/api'
import list from '@/utils/tabBar.js'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		store: {},
		member: {}, //成员信息
    tabList:list
	},
	getters: {
		isLogin: state => Object.keys(state.member).length > 0	//是否登录
	},
	mutations: {
		SET_MEMBER(state, member) {
			state.member = member
		},
		SET_STORE(state, store) {
			state.store = store
		},
	},
	actions: {
		async getStore({commit}) {
			const store = await api('store')
			commit('SET_STORE', store)
		}
	}
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

还需要在mian.js中引入并挂载：

import Vue from 'vue'
import App from './App'
import uView from 'uview-ui';
import store from './store'
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}
Vue.use(uView);
Vue.config.productionTip = false

App.mpType = 'app'

Vue.prototype.$store = store
const app = new Vue({
    store,
    ...App
})
app.$mount()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

5、使用

总结

感谢你能阅读我的这篇文章，其实实现这个从技术角度上不是很复杂，但是很少看见一个系统且完整的配置tabBar的文章，遂将自己的一些步骤和代码记录下来，希望能帮到大家，如果该篇文章中有错误或不足之处，忘指出，谢谢~~