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

监听横竖屏的切换

??对于一些业务需求，可能需要切换横竖屏样式，我是使用的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)

原文：https://www.cnblogs.com/aloneer/p/14842731.html