admin 管理员组文章数量: 887006
uniapp搭建小程序项目，使用uview
配置uview-ui
1.打开地址：=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.$storemit('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()}}})})}
})
本文标签： uniapp搭建小程序项目，使用uview
版权声明：本文标题：uniapp搭建小程序项目，使用uview 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732357423h1534835.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论