小程序中拍照时候旋转屏幕为横屏

前景:在熟悉业务时候,有一个拍照识别信息的功能实现,点击拍照出现拍照选取框这个页面,然后往下进行拍照功能的实现等一系列流程。

在熟悉的时候,因为之前也有遇到过这个跳转后横屏的这种类型功能的实现,但是并不一样,然后查了一下

在小程序的开发中,有时候需要横屏显示一些页面,不过微信官方并没有提供横屏功能,但提供了手机屏幕旋转的支持,所以可以利用这个来引导用户通过屏幕旋转看到更好的界面效果。
如果想要某个页面支持屏幕旋转,需要在此页面的 json文件中配置 "pageOrientation": "auto",然后如果手机屏幕旋转,页面会自动进行旋转。我们需要根据屏幕方向显示不同的内容,那如何判断当前屏幕的方向呢?可以在此页面的 js 文件中加入 onResize:function(res){} 方法来进行屏幕方向的监听,每次屏幕旋转时这个方法都会调用。

Page({
  onResize:function(res) {
    res.size.windowWidth // 新的显示区域宽度
    res.size.windowHeight // 新的显示区域高度
  }
})

摘自:https://blog.csdn.net/weixin_43909455/article/details/85219275

然后去看了下项目中的json配置,记录一下,实现屏幕翻转

{
  "pageOrientation": "landscape",    //水平方向
  "navigationBarTitleText": "拍照识别",
  "usingComponents": {
  }
}

你可能感兴趣的:(小程序中拍照时候旋转屏幕为横屏)