devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：煮酒与君饮 | 2024-07-23 08:24:27

赞

踩

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

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"
	}
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

在这里插入图片描述
查看效果后，发现导航栏位置过于靠上

getSystemInfo ()
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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

方法二

使用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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

注意点

自己尝试过程中
看一些博客中说明在setup（）中要用ctx或proxy获取全局属性
在这里插入图片描述
不知道是理解有问题还是什么问题
并未取到app.vue中设置的全局属性，
ctx是当前的组件实例

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/869014
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号