在App.vue中初始化组建所需的数据

<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) {
                // 请求完新版本信息的回调
                if (res.hasUpdate) {
                    updateManager.onUpdateReady(function() {
                        wx.showModal({
                            title: '更新提示',
                            content: '新版本已经准备好，是否重启应用？',
                            success: function(res) {
                                if (res.confirm) {
                                    // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                                    updateManager.applyUpdate()
                                }
                            }
                        })
                    })
                    updateManager.onUpdateFailed(function() {
                        // 新的版本下载失败
                        wx.showModal({
                            title: '已经有新版本了哟~',
                            content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
                        })
                    })
                }
            })
        }
        // #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: "海蓝",
                        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">
    /*每个页面公共css */
    @import "colorui/main.css";
    @import "colorui/icon.css";
</style>

修改cu-custom.vue的内容

<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参数是类名
     * @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>