微信小程序的简单总结(uni-app)

2023-09-27 08:01:22

监听横竖屏的切换

??对于一些业务需求，可能需要切换横竖屏样式，我是使用的uni-app进行的开发，需要能够在一些页面进行横竖屏的切换。

在 pages.json 中找到对应的页面，并在 style 中添加 "pageOrientation":"auto"

  {
    "path": "pages/metting/lives",
    "style":{
      "navigationStyle":"custom",
      "pageOrientation":"auto"      // 实现横竖屏切换
    }
  },

如果想要所有的页面都能够进行横竖屏切换，需要在 globalStyle 中进行设置

"globalStyle": {
  "pageOrientation":"auto"      // 实现横竖屏切换
}

在页面中的 onResize() 中进行监听

onResize(res){
  if(res.deviceOrientation == "landscape"){
    console.log("横屏")
  }
  if(res.deviceOrientation == "portrait"){
    console.log("竖屏")
  }
}

获取状态栏的高度和区别是不是 iPhone X

调用 uni.getSystemInfo 获取系统的信息，返回的信息的有个字段：statusBarHeight

uni.getSystemInfo({
  success: (result) => {
    console.log(result)
    if(result.model.includes(‘iPhone X‘)){   // 判断是否是 iphone x
      this.globalData.isiphonex = true;
    }
  }
})

获取微信小程序右上角的胶囊高度

通过获取 wx.getMenuButtonBoundingClientRect() 来获取胶囊的信息

wx.getMenuButtonBoundingClientRect().height

存储和使用公共的变量：globalData

在 App.vue 中设置 globalData 对象，里面存储的就是一些全局变量

  globalData:{
    deviceinfo:{},
    isiphonex
  }

在页面中使用，可以在 data 中使用，也可以在页面的生命周期中使用

<script>
  const app = getApp();
  export default {
    data(){
      return{
        isipx:app.globalData.isiphonex,
      }
    }
  }
</script>

微信小程序的简单总结(uni-app)