最近公司需要开发app,我选择了uniapp,因为他结合了vue和小程序,上手难度不大,但因为是第一次开发app,中途也是遇到了很多小问题,在此总结一下。
首先是根据不同登录用户返回不同菜单,这里就不能直接在page.json里写si了,咱们使用动态方法
<template>
<view class="uni-tabbar">
<view class="uni-tabbar__item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
<view class="uni-tabbar__bd">
<view class="uni-tabbar__icon">
<image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit" :src="item.selectedIconPath"></image>
<image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
<!-- <image class="icon-img" mode="aspectFit" :src="item.selectedIconPath"></image> -->
</view>
</view>
<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
{{item.text}}
</view>
</view>
</view>
</template>
<script>
export default {
props: {
pagePath: String
},
data() {
return {
page: 'contact',
showPage: false,
containerHeight: 400,
tabbar: [
// 动态切换的菜单,先隐藏,动态插入
{
"pagePath": "/pages/mine/index",
"iconPath": "/static/mine_notchoose.png",
"selectedIconPath": "/static/mine_choose.png",
"text": "个人中心"
}
]
};
},
watch: {
pagePath: {
handler(val) {
console.log('pagePath监听===val', val)
},
immediate: true
}
},
mounted() {
// 根据自己的业务需求判断条件为true,替换即可
if (uni.getStorageSync('userInfo').roles[0] == '超级管理员' || uni.getStorageSync('userInfo').roles[0] == '管理员') {
this.tabbar.splice(0, 0, {
"pagePath": "/pages/parkManagement/index",
"iconPath": "/static/park_notchoose.png",
"selectedIconPath": "/static/park_choose.png",
"text": "规划管理"
}, {
"pagePath": "/pages/expertManagement/index",
"iconPath": "/static/expert_notchoose.png",
"selectedIconPath": "/static/expert_choose.png",
"text": "专家管理"
}, {
"pagePath": "/pages/examineManagement/index",
"iconPath": "/static/examine_notchoose.png",
"selectedIconPath": "/static/examine_choose.png",
"text": "复核管理"
})
} else {
this.tabbar.splice(0, 0, {
"pagePath": "/pages/examine/index",
"iconPath": "/static/exam_notchoose.png",
"selectedIconPath": "/static/exam_choose.png",
"text": "小组复核"
}, {
"pagePath": "/pages/examined/index",
"iconPath": "/static/examd_notchoose.png",
"selectedIconPath": "/static/examd_choose.png",
"text": "团队复核"
})
}
},
methods: {
changeTab(item) {
console.log(item.pagePath)
this.page = item.pagePath;
// 使用reLaunch关闭所有的页面,打开新的栏目页面
uni.reLaunch({
url: this.page
});
},
}
}
</script>
<style lang="scss" scoped>
.uni-tabbar {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
display: flex;
justify-content: space-around;
height: 98upx;
padding: 16upx 0;
box-sizing: border-box;
border-top: solid 1upx #ccc;
background-color: #fff;
box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
.uni-tabbar__item {
display: block;
line-height: 24upx;
font-size: 20upx;
text-align: center;
width: 25%;
}
.uni-tabbar__icon {
height: 24px;
line-height: 24px;
text-align: center;
}
.icon {
display: inline-block;
}
.uni-tabbar__label {
line-height: 24upx;
font-size: 24upx;
color: #999;
&.active {
color: #1ca6ec;
}
}
.icon-img {
height: 24px;
width: 24px;
}
}
</style>
其次是打包问题,新手打包我建议使用云打包,只需生成证书傻瓜式下一步就可以,如果需要打本地包,就需要jdk配置环境变量,下载andriod studio,还要更改许多配置,相对比较麻烦
最后就是打包成apk不能使用代理,样式会丢失,所以建议开发的时候真机调试,没问题后再打包
ok!!!今天先写到这里