uniapp搭建小程序项目，使用uview-ui的相关开发配置和纪要_uniapp uview-ui菜单

配置uview-ui

1.打开地址：https://ext.dcloud.net.cn/plugin?id=6682

选择下载插件ZIP，放到项目根目录。

2.main.js引入uView库

// main.js
import uView from 'uview-ui';
Vue.use(uView);
1
2
3

3.App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
	@import "uview-ui/index.scss";
</style>
1
2
3
4

4.uni.scss引入全局scss变量文件，添加到最后一行即可。

/* uni.scss */
@import "uview-ui/theme.scss";
1
2

5.pages.json配置easycom规则(按需引入)

// pages.json
{
    "easycom": {
        // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
        // 下载安装方式
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        // npm安装方式
        // "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

底部导航菜单栏

1.配置pages.json

在pages.json的tabBar下只需要配置底部菜单的路由即可。

	"list": [{
			"pagePath": "pages/index/index"
		},
		{
			"pagePath": "pages/manage/index"
		},
		{
			"pagePath": "pages/my/index"
		}
	]
1
2
3
4
5
6
7
8
9
10

2.在根目录添加utils文件夹，并添加tabbar.js文件，代码如下：

// 普通用户tabbar
let tab1 = [{
        iconPath: "home",
        selectedIconPath: "home-fill",
        text: '首页',
        pagePath: "/pages/index/index"
    },
    {
        iconPath: "grid",
        selectedIconPath: "grid-fill",
        text: '工作台',
        pagePath: "/pages/manage/index"
    },
    {
        iconPath: "account",
        selectedIconPath: "account-fill",
        text: '我的',
        pagePath: "/pages/my/index"
    }
]
// 管理员用户tabbar
let tab2 = [{
    iconPath: "home",
    selectedIconPath: "home-fill",
    text: '首页',
    pagePath: "/pages/index/index"
},
{
    iconPath: "grid",
    selectedIconPath: "grid-fill",
    text: '工作台',
    pagePath: "/pages/manage/index"
},
{
    iconPath: "account",
    selectedIconPath: "account-fill",
    text: '我的',
    pagePath: "/pages/my/index"
}
]
export default [
	tab1,
	tab2
]
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
34
35
36
37
38
39
40
41
42
43
44

根据需求配置一种或多种底部导航菜单。

3.配置vuex,引入tabbar.js,并设置储存菜单及登录状态和登录人信息。
在根目录添加store文件，添加index.js，内容如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import tabBar from '@/utils/tabbar.js'
const store = new Vuex.Store({
	state: {
		tabBarList: [],
		hasLogin: false,
		userInfo:{
			id:"",
			UserName:"", //用户名
			WorkNumber:"", //账号
			Department:"", //部门
			RoleName:"", //岗位
		}
	},
	mutations: {
		// 设置底部导航菜单
		setTabBar(state, data) {
			state.tabBarList = tabBar[data];
			uni.setStorageSync('tabBarList',tabBar[data])
		},
		// 登录数据赋值
		login(state, userInfo) {
			state.hasLogin = true;
			state.userInfo.id = userInfo.id || '';
			state.userInfo.UserName = userInfo.UserName || '';
			state.userInfo.WorkNumber = userInfo.WorkNumber || '';
			state.userInfo.Department = userInfo.Department || '';
			state.userInfo.RoleName = userInfo.RoleName || '';
			uni.setStorageSync('userInfo',userInfo)
		},
		logout(state) {
			state.hasLogin = false;
			state.userInfo = {};
			uni.clearStorageSync('userInfo')
		},
	},
    getters:{
        tabBarList:state => state.tabBarList, 
        hasLogin:state => state.hasLogin, 
        userInfo:state => state.userInfo, 
    },
    actions: {},
})
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
34
35
36
37
38
39
40
41
42
43
44
45
46

4.引入store，使用菜单
在main.js文件添加

import store from './store/index'
Vue.prototype.$store = store
1
2

在vue实例中添加store

const app = new Vue({
  ...App,
  store,
})
1
2
3
4

在App.vue的onLaunch钩子中初始化菜单：

onLaunch: function() {
	this.$store.commit('setTabBar',0)
	uni.hideTabBar()
},
1
2
3
4

在每个底部菜单主页使用存储的菜单：

<u-tabbar :list="tabBarList"></u-tabbar>
1

props:{
	tabBarList:{
		type:Array,
		default:uni.getStorageSync('tabBarList')
	}
},
1
2
3
4
5
6

配置小程序版本更新

在main.js的vue实例中添加事件钩子：

const app = new Vue({
  ...App,
  store,
  mounted(){
    // 版本自动更新代码
    const updateManager = uni.getUpdateManager()
    updateManager.onUpdateReady(function () {
      uni.showModal({
        title: '更新检测',
        content: '检测到新版本，是否重启小程序？',
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }
      })
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20