在App.vue中初始化組建所需的數(shù)據(jù)

<script setup>
    import {
        getCurrentInstance,
        reactive
    } from "vue";
    import {
        onShow,
        onLoad,
        onLaunch,
    } from '@dcloudio/uni-app';
    
    getApp().globalData = reactive({
        userInfo: null,
    })
    
    onLaunch(function() {
        // #ifdef MP-WEIXIN
        if (wx.canIUse('getUpdateManager')) {
            const updateManager = wx.getUpdateManager()
            updateManager.onCheckForUpdate(function(res) {
                // 請求完新版本信息的回調(diào)
                if (res.hasUpdate) {
                    updateManager.onUpdateReady(function() {
                        wx.showModal({
                            title: '更新提示',
                            content: '新版本已經(jīng)準(zhǔn)備好，是否重啟應(yīng)用？',
                            success: function(res) {
                                if (res.confirm) {
                                    // 新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟
                                    updateManager.applyUpdate()
                                }
                            }
                        })
                    })
                    updateManager.onUpdateFailed(function() {
                        // 新的版本下載失敗
                        wx.showModal({
                            title: '已經(jīng)有新版本了喲~',
                            content: '新版本已經(jīng)上線啦~，請您刪除當(dāng)前小程序，重新搜索打開喲~'
                        })
                    })
                }
            })
        }
        // #endif
        uni.getSystemInfo({
            success: function(e) {
                const {
                    appContext
                } = getCurrentInstance();
                // #ifndef MP
                appContext.config.globalProperties.StatusBar = e.statusBarHeight;
                if (e.platform == "android") {
                    appContext.config.globalProperties.CustomBar = e.statusBarHeight + 50;
                } else {
                    appContext.config.globalProperties.CustomBar = e.statusBarHeight + 45;
                }
                // #endif
                appContext.config.globalProperties.windowBottom =
                    uni.getSystemInfoSync().windowBottom;
                // #ifdef MP-WEIXIN
                appContext.config.globalProperties.StatusBar = e.statusBarHeight;
                let custom = wx.getMenuButtonBoundingClientRect();
                appContext.config.globalProperties.Custom = custom;
                appContext.config.globalProperties.CustomBar =
                    custom.bottom + custom.top - e.statusBarHeight;
                // #endif

                // #ifdef MP-ALIPAY
                appContext.config.globalProperties.StatusBar = e.statusBarHeight;
                appContext.config.globalProperties.CustomBar =
                    e.statusBarHeight + e.titleBarHeight;
                // #endif
                const lessHeight =
                    appContext.config.globalProperties.windowBottom +
                    1 +
                    appContext.config.globalProperties.CustomBar;
                setTimeout(() => {
                    appContext.config.globalProperties.containerHeight =
                        `calc(100vh - ${lessHeight}px)`;
                }, 0);
                appContext.config.globalProperties.ColorList = [{
                        title: "嫣紅",
                        name: "red",
                        color: "#e54d42",
                    },
                    {
                        title: "桔橙",
                        name: "orange",
                        color: "#f37b1d",
                    },
                    {
                        title: "明黃",
                        name: "yellow",
                        color: "#fbbd08",
                    },
                    {
                        title: "橄欖",
                        name: "olive",
                        color: "#8dc63f",
                    },
                    {
                        title: "森綠",
                        name: "green",
                        color: "#39b54a",
                    },
                    {
                        title: "天青",
                        name: "cyan",
                        color: "#1cbbb4",
                    },
                    {
                        title: "海藍(lán)",
                        name: "blue",
                        color: "#0081ff",
                    },
                    {
                        title: "姹紫",
                        name: "purple",
                        color: "#6739b6",
                    },
                    {
                        title: "木槿",
                        name: "mauve",
                        color: "#9c26b0",
                    },
                    {
                        title: "桃粉",
                        name: "pink",
                        color: "#e03997",
                    },
                    {
                        title: "棕褐",
                        name: "brown",
                        color: "#a5673f",
                    },
                    {
                        title: "玄灰",
                        name: "grey",
                        color: "#8799a3",
                    },
                    {
                        title: "草灰",
                        name: "gray",
                        color: "#aaaaaa",
                    },
                    {
                        title: "墨黑",
                        name: "black",
                        color: "#333333",
                    },
                    {
                        title: "雅白",
                        name: "white",
                        color: "#ffffff",
                    },
                ];
            },
        });
    });
    
    onShow(function() {
        console.log("App Show");
    })
</script>

<style lang="scss">
    /*每個(gè)頁面公共css */
    @import "colorui/main.css";
    @import "colorui/icon.css";
</style>

修改cu-custom.vue的內(nèi)容

<template>
    <view>
        <view class="cu-custom" :style="[{ height: ustomBar + 'px' }]">
            <view class="cu-bar fixed" :style="style"
                :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
                <view class="action" @tap="BackPage" v-if="isBack">
                    <text class="cuIcon-back"></text>
                    <slot name="backText"></slot>
                </view>
                <view class="content" :style="[{ top: statusBar + 'px' }]">
                    <slot></slot>
                </view>
                <slot name="right"></slot>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        getCurrentInstance,
        computed,
        ref
    } from "vue";
    const {
        proxy
    } = getCurrentInstance();
    
    
    /**
     * 定義組件的屬性
     * @typedef {Object} Props
     * @property {string} bgColor - 背景顏色,C參數(shù)是類名
     * @property {boolean|string} isBack - 是否返回
     * @property {string} bgImage - 背景圖片
     */
    const props = defineProps({
        bgColor: {
            type: String,
            default: "bg-blue",
        },
        isBack: {
            type: [Boolean, String],
            default: false,
        },
        bgImage: {
            type: String,
            default: "",
        },
    })
    const statusBar = ref(proxy.StatusBar)
    const customBar = ref(proxy.CustomBar)
    const style = computed(() => {
        const bgImage = props.bgImage;
        let style = `height:${customBar.value}px;padding-top:${statusBar.value}px;`;
        if (bgImage) {
            style = `${style}background-image:url(${bgImage});`;
        }
        return style;
    });
    const BackPage = () => {
        uni.navigateBack({
            delta: 1,
        });
    }
</script>

<style></style>