uniapp写移动端常见问题汇总

1. 手机顶部状态栏遮挡

写在需要的地方

<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">

2. 手机顶部状态栏字体颜色

// pages.json
"statusBarStyle": "light",

3. 背景覆盖全屏

page{
  width: 100%;
  height: 100%;
}
.index {
  width: 100%;
  height: 100%;
  background: url("@/static/1-bj.png") no-repeat center;
}

4. 手机端禁止拖拽页面

// pages.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/index",
		"style": {
			"app-plus": {
				"bounce": "none"
			}
		}
	}
],

5. 手机端隐藏顶部状态栏和底部按键

onShow: function() {
    // #ifdef APP-PLUS
    // 隐藏顶部电池,时间等信息
    plus.navigator.setFullscreen(true);
    //隐藏虚拟按键
    plus.navigator.hideSystemNavigation()
    // #endif
},

6. 绝对定位计算位置

const bear_box = this.$el.querySelector(".bear_box")
const shovel = this.$el.querySelector(".shovel1")
const sho = this.$el.querySelector(".shovel")
const stick = this.$el.querySelector(".stick")

let len = stick.offsetHeight + sho.offsetHeight
console.log("整个铲子长度：", len)
let top = len * Math.cos(this.deg * Math.PI / 180)
console.log("铲子高度", top)
let left1 = len * Math.sin(this.deg * Math.PI / 180)
console.log("铲子宽度", -left1)
console.log("铲子左侧位置：", bear_box.offsetLeft + shovel.offsetLeft - left1)
console.log("铲子上侧位置：", bear_box.offsetTop + shovel.offsetTop + top)

或者

getElementInfo(className) {
  // 创建选择器对象
  const query = uni.createSelectorQuery().in(this);
  let eleInfo
  // 选择我们想要的元素
  query.select(className).boundingClientRect(data => {
    if (data) {
      eleInfo = data
    }
  }).exec(); // 执行选择器查询
  return eleInfo
}

const shovel = this.getElementInfo(".shovel")
console.log("整个铲子长度：", shovel)

7. 获取整个屏幕宽高

getDeviceInfo() {
  const systemInfo = uni.getSystemInfoSync();
  this.screenWidth = systemInfo.screenWidth
  this.screenHeight = systemInfo.screenHeight
},

8. 获取元素信息

因为有时候获取不到，所以用同步

async getElementInfo(className) {
  return new Promise((resolve, reject) => {
    // 创建选择器对象
    const query = uni.createSelectorQuery().in(this);
    // 选择我们想要的元素
    query.select(className).boundingClientRect(data => {
      if (data) {
        resolve(data);
      } else {
        reject(new Error('如果没有获取到数据，返回错误'));
      }
    }).exec(); // 执行选择器查询
  });
}


const timer = setInterval(async ()=>{
  const shovel = await this.getElementInfo(".shovel")
}, 20)

9. 碰撞检测

碰撞对象的中心坐标减去被碰撞对象的中心坐标的绝对值，
碰撞对象宽度/高度的一半加被碰撞对象宽度/高度的一半。
如果后者（高度与宽度同时）大于前者，两者相撞。
（该功能需要极短时间重复执行）

xCenter(Object)是一个取得jQuery对象相对父元素x轴坐标加上自身元素一半宽度值的函数
yCenter(Object)是一个取得jQuery对象相对父元素y轴坐标加上自身元素一半宽度值的函数

Math.abs(xCenter(碰撞对象) - xCenter(被碰撞对象)) < hWidth(碰撞对象) + hWidth(被碰撞对象)
&& Math.abs(yCenter(碰撞对象) - yCenter(被碰撞对象)) < hHeight(碰撞对象) + hHeight(被碰撞对象)