关于vue2+uniapp+uview+vuex 私募基金项目小程序总结
1.关于权限不同tabbar处理
uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客
但是里面还有两个问题 一个是role应该被本地存储并且初始化 第二个问题是假设我有3个角色 每个角色每个tabbar不一样的，点击tabbar时候会导致错乱 第三个问题 需要监听角色变化
问题处理： 在vuex的时候为role初始化
role: uni.getStorageSync('role') || null, // 从本地存储获取初始值第二个问题 让传送过来的值selectIndex==index 表示选中
第三个问题监听
<template>
<view class="tab">
<view v-for="(item,index) in list" :key="index" class="tab-item" @click="switchTab(item, index)">
<image class="tab_img" :src="selectedIndex == index ? item.selectedIconPath : item.iconPath"></image>
<view class="tab_text" :style="{color: selectedIndex == index ? selectedColor : color}">{{item.text}}</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
props: {
selectedIndex: { // 当前选中的tab index
default: 0
},
},
data() {
return {
color: "#999",
selectedColor: "#0D396A",
list: [],
currentIndex: 0,
}
},
computed: {
...mapState(['role']),
},
watch: {
role(newRole) {
this.updateListBasedOnRole(newRole); // 当 role 变化时调用这个方法
}
},
created() {
console.log('this.role', this.role);
this.updateListBasedOnRole(this.role)
},
methods: {
switchTab(item, index) {
// console.log('index', index);
// this.currentIndex = index;
// console.log('this.currentIndex', this.currentIndex);
let url = item.pagePath;
// console.log('url', url);
uni.switchTab({
url: url
})
},
updateListBasedOnRole(role) {
// this.currentIndex = this.selectedIndex;
if (role === 1) {
//角色1
this.list = [{
pagePath: "/pages/tabBar/staging/index",
iconPath: require("@/static/tabbar/manage.png"),
selectedIconPath: require("@/static/tabbar/manageSelect.png"),
text: "基金管理"
}, {
pagePath: "/pages/tabBar/warm/index",
iconPath: require("static/tabbar/warm.png"),
selectedIconPath: require("static/tabbar/warmSelect.png"),
text: "预警管理"
},
{
pagePath: "/pages/tabBar/user/index",
iconPath: require("static/tabbar/my.png"),
selectedIconPath: require("static/tabbar/mySelect.png"),
text: "个人中心"
}
]
} else if (role === 2) {
//角色2
this.list = [{
pagePath: "/pages/tabBar/staging/index",
iconPath: require("@/static/tabbar/manage.png"),
selectedIconPath: require("@/static/tabbar/manageSelect.png"),
text: "基金管理"
},
{
pagePath: "/pages/tabBar/user/index",
iconPath: require("static/tabbar/my.png"),
selectedIconPath: require("static/tabbar/mySelect.png"),
text: "个人中心"
}
]
} else {
this.list = [{
pagePath: "/pages/tabBar/staging/index",
iconPath: require("@/static/tabbar/manage.png"),
selectedIconPath: require("@/static/tabbar/manageSelect.png"),
text: "基金管理"
}, {
pagePath: "/pages/tabBar/dataAuditinng/index",
iconPath: require("static/tabbar/data.png"),
selectedIconPath: require("static/tabbar/dataSelect.png"),
text: "数据审核"
}, {
pagePath: "/pages/tabBar/warm/index",
iconPath: require("static/tabbar/warm.png"),
selectedIconPath: require("static/tabbar/warmSelect.png"),
text: "预警管理"
},
{
pagePath: "/pages/tabBar/user/index",
iconPath: require("static/tabbar/my.png"),
selectedIconPath: require("static/tabbar/mySelect.png"),
text: "个人中心"
}
]
}
}
}
}
</script>
<style lang="scss">
.tab {
width: 100%;
height: 98rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
@include flx(row, center, center) z-index: 1000;
.tab-item {
flex: 1;
@include flx(column, center, center) .tab_img {
width: 40rpx;
height: 40rpx;
}
.tab_text {
font-size: 24rpx;
}
}
}
</style>其他照常
2.关于uview 在浏览器和模拟器正常 样式在微信小程序崩溃
uniapp 开发H5打包微信小程序样式失效的解决之道_uniapp 样式丢失-CSDN博客
1.输入框崩溃
我希望输入文字是白色的 调了很久 发现文档其实有 和element,antd有很大的不同 直接输入框加color="#fff"
<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" class="forms">
<u-form-item prop="user">
<u--input v-model="model.user" border="none" placeholder="请输入手机号" clearable
class="u-input__content" color="#fff"></u--input>
</u-form-item>
<u-form-item prop="password">
<u--input v-model="model.password" border="none" placeholder="请输入密码" password clearable
class="u-input__content" color="#fff" ></u--input>
</u-form-item>
</u--form>.u-input__content {
height: 112rpx !important;
background-color: rgba(0, 0, 0, .3) !important;
padding: 0px 12rpx !important;
border-radius: 10rpx !important;
}
/* #ifdef MP-WEIXIN */
::v-deep .u-input__content {
height: 112rpx !important;
background-color: rgba(0, 0, 0, .3) !important;
padding: 0px 12rpx !important;
border-radius: 10rpx !important;
}
/* #endif */2.表头，按钮崩溃
/* #ifdef MP-WEIXIN */
::v-deep .uni-table-th {
background-color: #f0f0f0;
color: #333;
font-weight: bold;
}
::v-deep .u-button.data-v-2bf0e569 {
width: 100%;
width: 327rpx;
}
/* #endif */3.关于条件编译
条件编译处理多端差异 | uni-app官网 (dcloud.net.cn)
4.关于uniapp生命周期
uniapp生命周期分成两种 一种是页面生命周期，一种是应用生命周期
页面生命周期
应用生命周期
应用生命周期和页面生命周期的区别主要体现在以下几个方面
uniapp生命周期钩子
uniapp页面也能使用生命周期钩子，但是组件只能使用生命周期钩子
5. uniapp组件生命周期--生命周期钩子
6.vue生命周期是什么？
生命周期--生命周期钩子
7.UniApp 的生命周期钩子与 Vue 的生命周期钩子一样吗？
8.created,mounted 和onshow，onload,computed 谁快
在 UniApp 中，created 和 mounted 是组件的生命周期钩子，而 onLoad 和 onShow 是页面的生命周期钩子。一般来说，created 在组件实例被创建时调用，mounted 在组件挂载后调用，通常都在页面加载前。onLoad 在页面加载时调用，而 onShow 在页面每次显示时调用。所以，created 和 mounted 通常比 onLoad 和 onShow 更早执行。至于 computed，它们是计算属性，会在数据变化时更新，所以执行时机依赖于数据的变化。
created(会在组件实例化时立即执行)>computed(属性会在组件的创建和更新阶段自动重新计算)>onshow(只有在组件被显示时才会被调用)