配置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);
3.App.vue引入基础样式(注意style标签需声明scss属性支持)
/* App.vue */
<style lang="scss">
@import "uview-ui/index.scss";
</style>
4.uni.scss引入全局scss变量文件,添加到最后一行即可。
/* uni.scss */
@import "uview-ui/theme.scss";
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.配置pages.json
在pages.json的tabBar下只需要配置底部菜单的路由即可。
"list": [{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/manage/index"
},
{
"pagePath": "pages/my/index"
}
]
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
]
根据需求配置一种或多种底部导航菜单。
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;
4.引入store,使用菜单
在main.js文件添加
import store from './store/index'
Vue.prototype.$store = store
在vue实例中添加store
const app = new Vue({
...App,
store,
})
在App.vue的onLaunch钩子中初始化菜单:
onLaunch: function() {
this.$store.commit('setTabBar',0)
uni.hideTabBar()
},
在每个底部菜单主页使用存储的菜单:
<u-tabbar :list="tabBarList"></u-tabbar>
props:{
tabBarList:{
type:Array,
default:uni.getStorageSync('tabBarList')
}
},
配置小程序版本更新
在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()
}
}
})
})
}
})