import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import _isFunction from "lodash/isFunction";
function getSystemInfo() {
if (uni.globalSystemInfo && !uni.globalSystemInfo.ios) {
return uni.globalSystemInfo;
} else {
// h5环境下忽略navbar
if (!_isFunction(uni.getSystemInfoSync)) {
return null;
}
let systemInfo = uni.getSystemInfoSync() || {
model: "",
system: "",
};
let ios = !!(systemInfo.system.toLowerCase().search("ios") + 1);
let rect;
try {
rect = uni.getMenuButtonBoundingClientRect
? uni.getMenuButtonBoundingClientRect()
: null;
if (rect === null) {
throw "getMenuButtonBoundingClientRect error";
}
//取值为0的情况 有可能width不为0 top为0的情况
if (!rect.width || !rect.top || !rect.left || !rect.height) {
throw "getMenuButtonBoundingClientRect error";
}
} catch (error) {
let gap = ""; //胶囊按钮上下间距 使导航内容居中
let width = 96; //胶囊的宽度
if (systemInfo.platform === "android") {
gap = 8;
width = 96;
} else if (systemInfo.platform === "devtools") {
if (ios) {
gap = 5.5; //开发工具中ios手机
} else {
gap = 7.5; //开发工具中android和其他手机
}
} else {
gap = 4;
width = 88;
}
if (!systemInfo.statusBarHeight) {
//开启wifi的情况下修复statusBarHeight值获取不到
systemInfo.statusBarHeight =
systemInfo.screenHeight - systemInfo.windowHeight - 20;
}
rect = {
//获取不到胶囊信息就自定义重置一个
bottom: systemInfo.statusBarHeight + gap + 32,
height: 32,
left: systemInfo.windowWidth - width - 10,
right: systemInfo.windowWidth - 10,
top: systemInfo.statusBarHeight + gap,
width: width,
};
console.log("error", error);
console.log("rect", rect);
}
let navBarHeight = "";
if (!systemInfo.statusBarHeight) {
//开启wifi和打电话下
systemInfo.statusBarHeight =
systemInfo.screenHeight - systemInfo.windowHeight - 20;
navBarHeight = (function () {
let gap = rect.top - systemInfo.statusBarHeight;
return 2 * gap + rect.height;
})();
systemInfo.statusBarHeight = 0;
systemInfo.navBarExtendHeight = 0; //下方扩展4像素高度 防止下方边距太小
} else {
navBarHeight = (function () {
let gap = rect.top - systemInfo.statusBarHeight;
return systemInfo.statusBarHeight + 2 * gap + rect.height;
})();
if (ios) {
systemInfo.navBarExtendHeight = 4; //下方扩展4像素高度 防止下方边距太小
} else {
systemInfo.navBarExtendHeight = 0;
}
}
systemInfo.navBarHeight = navBarHeight; //导航栏高度不包括statusBarHeight
systemInfo.capsulePosition = rect; //右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
systemInfo.ios = ios; //是否ios
uni.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了
//console.log('systemInfo', systemInfo);
return systemInfo;
}
}
let globalSystemInfo = getSystemInfo();
console.log(globalSystemInfo, "globalSystemInfo");
const store = useStore();
const props = defineProps({
extClass: "",
background: { type: String, default: "#fff" }, //导航栏背景
// background: { type: String, default: "#BD000D" }, //导航栏背景
color: {
type: String,
default: "#333",
},
title: {
type: String,
default: "",
},
searchText: {
type: String,
default: "点我搜索",
},
searchBar: {
type: Boolean,
default: false,
},
back: {
type: Boolean,
default: true,
},
home: {
type: Boolean,
default: false,
},
iconTheme: {
type: String,
default: "",
// default: "white",
},
});
const setStyle = (systemInfo) => {
const {
statusBarHeight,
navBarHeight,
capsulePosition,
navBarExtendHeight,
ios,
windowWidth,
} = systemInfo;
const { back, home, title, color } = props;
console.log(back,systemInfo, "back");
let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
console.log(rightDistance, "rightDistance");
let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距
let navigationbarinnerStyle = [
`color:${color}`,
//`background:${background}`,
`height:${navBarHeight + navBarExtendHeight}px`,
`padding-top:${statusBarHeight}px`,
`padding-right:${leftWidth}px`,
`padding-bottom:${navBarExtendHeight}px`,
].join(";");
let navBarLeft = [];
if ((back && !home) || (!back && home)) {
navBarLeft = [
`width:${capsulePosition.width}px`,
`height:${capsulePosition.height}px`,
`margin-left:0px`,
`margin-right:${rightDistance}px`,
].join(";");
} else if ((back && home) || title) {
navBarLeft = [
`width:${capsulePosition.width}px`,
`height:${capsulePosition.height}px`,
`margin-left:${rightDistance}px`,
].join(";");
} else {
navBarLeft = [`width:auto`, `margin-left:0px`].join(";");
}
const topHeight = navBarHeight + navBarExtendHeight;
console.log(topHeight, "topHeight");
store.commit("global/SET_NAV_BAR_HEIGHT", topHeight);
return {
navigationbarinnerStyle,
navBarLeft,
navBarHeight,
capsulePosition,
navBarExtendHeight,
ios,
rightDistance,
};
};
const state = reactive({
configStyle: setStyle(globalSystemInfo),
});
const { configStyle } = toRefs(state);
const {
navigationbarinnerStyle,
navBarLeft,
navBarHeight,
capsulePosition,
navBarExtendHeight,
ios,
rightDistance,
} = state.configStyle;
console.log(navBarLeft, "navBarLeft");
const handleBackClick = () => {
if (_isFunction(props.onBack)) {
props.onBack();
} else {
const pages = getCurrentPages();
if (pages.length >= 2) {
uni.navigateBack({
delta: props.delta,
});
}
}
};
const handleGoHomeClick = () => {
if (_isFunction(props.onHome)) {
props.onHome();
}
};
const handleSearchClick = () => {
if (_isFunction(props.onSearch)) {
props.onSearch();
}
};
- 发布:2025-01-15 16:16
- 更新:2025-01-15 16:40
- 阅读:37
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 未知
HBuilderX类型: 正式
HBuilderX版本号: 4.45
第三方开发者工具版本号: 1.06.2407120
基础库版本号: 3.14
项目创建方式: HBuilderX
示例代码:
操作步骤:
编译运行
编译运行
预期结果:
编译运行获取 setStyle 函数中 systemInfo 为一个设备类型对象
编译运行获取 setStyle 函数中 systemInfo 为一个设备类型对象
实际结果:
编译运行获取 setStyle 函数中 systemInfo 为一个promise函数
编译运行获取 setStyle 函数中 systemInfo 为一个promise函数
bug描述:
运行编译到小程序后,获取设备信息为Promise函数
1 个回复
DCloud_uniCloud_WYQ
感谢反馈,此bug并非是getSystemInfoSync的Bug。问题出在下面这几行代码
if (uni.globalSystemInfo && !uni.globalSystemInfo.ios) {
return uni.globalSystemInfo;
}
目前这个bug会导致访问uni上不存在的属性也会返回一个方法,预计在4.51-alpha(下个alpha)修复