这里写自定义目录标题

uniapp，vue3版本使用color-ui
- 引入color-ui
- - 1.解压下载，将colorui文件导入项目根目录
  - 2.main.js 引入cu-custom组件全局使用
  - 3.app.vue 获取系统信息，设置导航栏高度
  - 4.pages,json 取消原生导航栏
- 解决方式
- - 方法一
  - 方法二
- 注意点

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 MPVue.prototype.StatusBar = e.statusBarHeight;if (e.platform == 'android') {Vue.prototype.CustomBar = e.statusBarHeight + 50;} else {Vue.prototype.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINVue.prototype.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();Vue.prototype.Custom = custom;Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif        // #ifdef MP-ALIPAYVue.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 MPappContext.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-WEIXINappContext.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-ALIPAYappContext.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 MPapp.globalData.StatusBar = e.statusBarHeight;if (e.platform == 'android') {app.globalData.CustomBar = e.statusBarHeight + 50;} else {app.globalData.CustomBar = e.statusBarHeight + 45;};// #endif// #ifdef MP-WEIXINapp.globalData.StatusBar = e.statusBarHeight;let custom = wx.getMenuButtonBoundingClientRect();app.globalData.Custom = custom;app.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;// #endif        // #ifdef MP-ALIPAYapp.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是可以取到值的，且打包运行也并无问题

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

uniapp + vue3微信小程序开发（1）框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...
uniapp vue3中引入外部3D模型(适配App)
uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...
低代码平台，JeecgBoot v3.0版本发布—新里程牌开始，迎接VUE3版本到来
项目介绍 JeecgBoot是一款基于代码生成器的低代码平台!前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shi ...
uniapp + vue3微信小程序开发（4）身份信息认证
微信是无法获取用户的身份证信息,那么我们可以自己通过上传或者拍摄身份证,然后结合ocr进行识别,那么最后为了保证准确性,再通过人脸识别来比对,辨别是不是本人,关于人脸识别,在我这篇博客里介绍了 uni ...
【组件-工具】小程序ui组件Color UI快速入门
小程序ui组件Color UI快速入门什么是ColorUI ColorUI是UI组件库!不是一个Js框架.相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需 ...
android版本360ui,国产手机UI系统有哪些
国产手机UI系统有哪些 UI系统的用户体验.生态系统的建立等"软实力"将是移动终端厂商的主战场,拥有生态系统的厂商才能掌握主动.那么,都有国产手机UI系统?下面就和jy135小编一 ...
云闪付小程序Vue授权组件只兼容Vue2，改造兼容Vue3版本
此文章发布时,云闪付小程序的官方文档提示暂不支持Vue3 云闪付小程序文档 - Vue授权组件引用后发现组件内部确实使用了很多Vue3 中已经删除了或者不推荐的方法,导致各种报错. 并且提示还要修改 ...
uniapp vue3 裁剪头像(ksp-cropper) 支持旋转和缩放
一.前言自己写个项目,需要用到裁剪头像功能,那肯定就在插件市场搜索,找到了它,感谢作者这个插件,很棒.我的使用环境 uniapp vue3 移动端 Android 真机测试. 具体我使用后的效果图如 ...
本地Git的初始设置(账户名+邮箱+color.ui)
我们下载安装好Git,还需做一些基础的配置,从而方便我们以后利用Git时的工作! 使用环境:Windows 10专业版+Git2.36.1 首先,在开始窗口或搜索窗口打开"Git Bash& ...

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

这里写自定义目录标题

uniapp，vue3版本使用color-ui

引入color-ui

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

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

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

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

解决方式

方法一

方法二

注意点

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

最新文章

热门文章

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

这里写自定义目录标题

uniapp，vue3版本使用color-ui

引入color-ui

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

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

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

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

解决方式

方法一

方法二

注意点

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

最新文章

热门文章

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

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