首页 > 微信 > 详细

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

时间:2021-06-02 21:15:04      阅读:35      评论:0      收藏:0      [点我收藏+]

监听横竖屏的切换

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!