各类设计型网站,创建网站需要什么,电子商务营销方案,找公司做网站注意什么一 系统信息的概念
uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。 success 返回参数说明#xff1a;
参数分类说明statusBarHeight手机状态栏的高度system操作系统名称及版本。。。 二 自定义navbar
2.1 获取系统参数 代码展示…一 系统信息的概念
uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。 success 返回参数说明
参数分类说明statusBarHeight手机状态栏的高度system操作系统名称及版本。。。 二 自定义navbar
2.1 获取系统参数 代码展示
templateview classnav !-- 我是子组件 --view/view !-- 状态栏 --view classnavbar/view !-- 内容区域 --/view
/templatescript setupimport { onBeforeMount } from vueonBeforeMount(() { //生命周期-页面渲染加载之前setNavSize()})//系统计算状态栏高度--单一逻辑封装成方法/单一功能封装成组件const setNavSize () {const res uni.getSystemInfoSync()console.log(res)}/scriptstyle.nav {position: fixed;width: 100%;top: 0;left: 0;z-index: 2; }
/style
返回结果 2.2 尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素 rpx 即响应式 px一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准750rpx 恰好为屏幕宽度。一般默认将按照 375px 的屏幕宽度进行计算。 2.3 完整代码
templateview classnav !-- 我是子组件 --view :styleheight: status rpx; containerStyle/view !-- 状态栏 动态样式v-bind style --view classnavbar :styleheight: navHeight rpx; containerStyle/view !-- 内容区域 --/view
/templatescript setupimport { ref, onBeforeMount, defineProps } from vueconst props defineProps({background: {type: String,default: rgba(120, 60, 30, 1)},color: {type: String,default: rgba(111, 111, 111, 1)},fontSize: {type: String,default: 32},iconWidth: {type: String,default: 116},iconHeight: {type: String,default: 38},})onBeforeMount(() { //生命周期-页面渲染加载之前setNavSize()setStyle()})//利用ref,创建响应式变量//状态栏高度(默认值为0)const status ref(0)//内容高度const navHeight ref(0)//背景颜色const containerStyle ref()//字体样式const textStyle ref()//图标样式const iconStyle ref()//系统计算状态栏高度--单一逻辑封装成方法/单一功能封装成组件//创建方法const setNavSize () {const { system, statusBarHeight } uni.getSystemInfoSync()status.value statusBarHeight * 2 //系统给到的数值以px为单位转换为rpx需*2const isiOS system.indexOf(iOS) //判断是否iOS系统if (!isiOS) {navHeight.value 96} else {navHeight.value 88 //如果iOS,考虑顶部刘海}//console.log(res)}//样式设置(使用数组方式写出-数组转字符串-.join进行拼接)const setStyle () {containerStyle.value [background: props.background].join(;)textStyle.value [color: props.color, font-size: props.fontSize rpx].join(;)iconStyle.value [width: props.iconWidth rpx, height: props.iconHeight rpx].join(;)}/scriptstyle.nav {position: fixed; //固定定位注释需删除以防报错width: 100%;top: 0;left: 0;z-index: 2; //层级(避免遮挡)}
/style
运行结果 三 报错
在使用XHbuilder X运行微信小程序的时候可能会遇到一个问题请注意游客模式下调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回这是因为我们忘记在程序中配置AppID了才会出现这样的警告。 解决
a 打开微信小程序助手
在左边的侧边栏选择开发--开发管理--开发设置选中AppID(小程序ID) 注意这里要是正式的AppID不要使用测试号的 b粘贴
选中复制后打开XHbuilder X将AppID黏贴进去就可以了
