需求
分包中如果有6個頁面A B C D E F，這6個頁面可以作為頁面進行展示，具體配置通過后臺接口返回（頁面數量限制依然存在 2 - 5），比如后臺配置A B C D E這個5個頁面為頁面，那么A B C D E將作為tab頁展示微信小程序底部固定，跳轉方式也是tab方式跳轉，跳轉到F頁面為普通跳轉。
這將解決 多商家底部tab配置問題，可以讓商家自己配置小程序tab頁的展示模式。
實現原理
1.自定義底部導航，數據通過接口獲取
2.將需要配置成tab的頁面內容抽離成為組件，對應頁面直接引用組件，tab頁面引用全部組件，并根據當前tab頁對應的組件頁面路徑分別展示。
3.解決組件的生命周期問題。
實現
頁面整體結構
pages.json頁面配置好5個模板頁面微信小程序底部固定，并且使用了模式，自動加載組件
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
"^sww-(.*)": "@/components/sww-$1/sww-$1.vue"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/module-page-one/index"
},
{
"pagePath": "pages/module-page-two/index"
},
{
"pagePath": "pages/module-page-three/index"
},
{
"pagePath": "pages/module-page-four/index"
}
]
}
自定義使用的uview組件
//sww-tab-bar
<template>
<u-tabbar v-model="current" :list="vuex_tab_bar.list" :active-color="vuex_tab_bar.activeColor"
:inactive-color="vuex_tab_bar.inactiveColor"
@change="onChange"></u-tabbar>
</template>
<script>
import {mapState} from 'vuex'
import {uniLinkTo} from "../../utils/uniPromise";
export default {
data() {
return {}
},
computed: {
...mapState(['vuex_tab_bar', 'vuex_tab_page']),
current: {
get(){
return this.$store.state.vuex_tab_bar.current
},
set(value){
this.$store.commit('$uStore',{name: 'vuex_tab_bar.current', value})
}
}
},
methods: {
onChange(index) {
uniLinkTo(this.vuex_tab_page[index], 'tab')
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .u-fixed-placeholder {
opacity: 0;
}
</style>
vuex中保存的數據格式
vuex_tab_bar: {
list: [],
activeColor: '',
inactiveColor: '',
current: 0
},
vuex_tab_bar_default: { //接口未獲取到數據時使用的默認tabbar
list: [
{
iconPath: '/static/tab/home.png',
selectedIconPath: '/static/tab/home_fill.png',
text: '首頁',
url: '/package/index/index'
},
{
iconPath: '/static/tab/cat.png',
selectedIconPath: '/static/tab/cat_fill.png',
text: '分類',
url: '/package/product/category/index'
},
{
iconPath: '/static/tab/community.png',
selectedIconPath: '/static/tab/community_fill.png',
text: '鏈圈',
url: '/package/index/circle/index'
},
{
iconPath: '/static/tab/cart.png',
selectedIconPath: '/static/tab/cart_fill.png',
text: '購物車',
// url: '/package/user/order/index'
url: '/package/user/cart/index'
},
{
iconPath: '/static/tab/user.png',
selectedIconPath: '/static/tab/user_fill.png',
text: '我的',
url: '/package/user/index'
}
],
activeColor: '#e93324',
inactiveColor: '#666666',
current: 0
},
上面的步驟已經完成了自定義底部，接下來是tab頁面中使用組件的方式和數據的獲取
//這里的代碼是5個模板tab頁面的內容，頁面引入了所有可配置成為tab的組件，js部分抽離到mixins中進行代碼復用
<template>
<view class="index-box">
<block v-if="pageModuleName('/package/index/index')">
<sww-page-home ref="modulePageRef"></sww-page-home>
</block>
<block v-if="pageModuleName('/package/product/category/index')">
<sww-page-category ref="modulePageRef"></sww-page-category>
</block>
<block v-if="pageModuleName('/package/index/circle/index')">
<sww-page-circle ref="modulePageRef"></sww-page-circle>
</block>
<block v-if="pageModuleName('/package/user/cart/index')">
<sww-page-cart ref="modulePageRef"></sww-page-cart>
</block>
<block v-if="pageModuleName('/package/user/index')">
<sww-page-user ref="modulePageRef"></sww-page-user>
</block>
<block v-if="pageModuleName('/package/user/order/index')">
<sww-page-order ref="modulePageRef"></sww-page-order>
</block>
<sww-tab-bar ref="tabBarRef"></sww-tab-bar>
<sww-login></sww-login>
</view>
</template>
<script>
import {tabPage} from "../../mixins/tabPage";
export default {
mixins: [tabPage],
data() {
return {
tabIndex: 4
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
}
.index-box {
width: 100%;
height: 100%;
}
</style>
// tabPagemixins
import {mapState} from 'vuex'
const App = getApp()
export const tabPage = {
computed: {
...mapState(['vuex_tab_bar', 'vuex_module_page']),
//獲取當前tab頁要顯示的頁面組件
pageModuleName(name) {
return (name) => {
if (this.vuex_tab_bar.list.length > 0) {
//這里的url是后臺用戶配置的頁面路徑，此路徑是分包中實際存在的頁面路徑，比如A頁面要配置成為tab，那么就將A頁面內容抽離成組件，后臺配置此頁面為tab，只需將A頁面的實際路徑進行配置即可
return this.vuex_tab_bar.list[this.tabIndex].url === name
} else {
return false
}
}
}
},
onLoad: function () {
this.$nextTick(() => {
try {
if (this.vuex_tab_bar.list.length === 0) {
App.loadTabBarList().then(() => {
this.$refs.modulePageRef.$onLoad()
})
} else {
this.$refs.modulePageRef.$onLoad()
}
} catch (e) {
}
})
},
// isoH5在onshow時要重置分享
onShow: function () {
this.$nextTick(() => {
try {
this.$refs.modulePageRef.$onShow()
} catch (e) {
}
})
},
onHide: function () {
this.$nextTick(() => {
try {
this.$refs.modulePageRef.$onHide()
} catch (e) {
}
})
},
onPullDownRefresh: function () {
try {
this.$refs.modulePageRef.$onPullDownRefresh()
} catch (e) {
}
},
onReachBottom: function () {
try {
this.$refs.modulePageRef.$onReachBottom()
} catch (e) {
}
},
// 微信小程序分享(好友)
onShareAppMessage: function () {
return this.$refs.modulePageRef.getShareAppMessage()
},
// 微信小程序分享(朋友圈)
onShareTimeline: function () {
return this.$refs.modulePageRef.getShareTimeline()
}
}
比較匆忙未仔細描述，如果有需要可以留言，可以打包源碼