uniapp vue3版本 引用color-ui的cu-custom组件问题

uniapp，vue3版本使用color-ui

cu-custom组件使用出现问题，不兼容
仅测试Android环境

引入color-ui

1.解压下载，将colorui文件导入项目根目录

2.main.js 引入cu-custom组件全局使用

// main.js
import App from './App'
// 引入组件
import cuCustom from './colorui/components/cu-custom.vue'
// 条件编译 非vue3
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false

// vue2使用Vue.component 注册为全局组件
Vue.component('cu-custom', cuCustom)

App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  //  vue3使用app.component 注册为全局组件
  app.component('cu-custom',cuCustom)
  
  return {
    app
  }
}
// #endif

3.app.vue 获取系统信息，设置导航栏高度

<script>
	export default {
		onLaunch: function() {
		    uni.getSystemInfo({
		        success: function(e) {
		            // #ifndef MP
		            Vue.prototype.StatusBar = e.statusBarHeight;
		            if (e.platform == 'android') {
		                Vue.prototype.CustomBar = e.statusBarHeight + 50;
		            } else {
		                Vue.prototype.CustomBar = e.statusBarHeight + 45;
		            };
		            // #endif
		            // #ifdef MP-WEIXIN
		            Vue.prototype.StatusBar = e.statusBarHeight;
		            let custom = wx.getMenuButtonBoundingClientRect();
		            Vue.prototype.Custom = custom;
		            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
		            // #endif        
		            // #ifdef MP-ALIPAY
		            Vue.prototype.StatusBar = e.statusBarHeight;
		            Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
		            // #endif
		        }
		    })
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
</style>

4.pages,json 取消原生导航栏

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			     // 原生导航的文字
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "my",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"tabBar": {
		"color": "#999999",
		"selectedColor": "#222222",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/icon/index.png",
				// "selectedIconPath": "static/icon/index_active.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/my/my",
				// "iconPath": "static/icon/my.png",
				// "selectedIconPath": "static/icon/my_active.png",
				"text": "我的"
			}
		]
	},
	"globalStyle": {
	    // "navigationStyle": "custom", 取消原生导航
		"navigationStyle": "custom",
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

查看效果后，发现导航栏位置过于靠上

getSystemInfo ()中StatusBar为undefined

原因为 Vue.prototype 替换为 config.globalProperties

解决方式

方法一

app.vue文件中改用config.globalProperties 全局方式
仅更改一个文件即可，推荐

<script>
	// 引入vue3 getCurrentInstance 
	import { getCurrentInstance } from 'vue'
	export default {
		onLaunch: function() {
		    uni.getSystemInfo({
		        success: function(e) {
		        	// 获取 appContext  上下文
					const {appContext} = getCurrentInstance()
					console.log('StatusBar',appContext)
		            // #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
		            // #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
		        }
		    })
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

方法二

使用uniapp 的全局属性 app.globalData
app.vue

<script>
	export default {
		globalData: {
			Custom: 0,
			CustomBar: 0,
			StatusBar: 0
		},
		onLaunch: function() {
			uni.getSystemInfo({
				success: function(e) {
					const app = getApp()
					// #ifndef MP
					app.globalData.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						app.globalData.CustomBar = e.statusBarHeight + 50;
					} else {
						app.globalData.CustomBar = e.statusBarHeight + 45;
					};
					// #endif
					// #ifdef MP-WEIXIN
					app.globalData.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					app.globalData.Custom = custom;
					app.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif        
					// #ifdef MP-ALIPAY
					app.globalData.StatusBar = e.statusBarHeight;
					app.globalData.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
</style>

组件中 cu-custom.vue
data部分取值使用 app.globalData

data() {
	const app = getApp()
	return {
		StatusBar: app.globalData.StatusBar,
		CustomBar: app.globalData.CustomBar
	};
},

用vue3语法写也是没问题的，这里不放代码了0

注意点

自己尝试过程中
看一些博客中说明在setup（）中要用ctx或proxy获取全局属性

不知道是理解有问题还是什么问题
并未取到app.vue中设置的全局属性，
ctx是当前的组件实例

appContext.config.globalProperties是可以取到值的，且打包运行也并无问题