微信小程序开发记录--横屏

遇到小程序横屏需求，在此记录

前提说明： 

- 小程序不支持横屏， 官方未提供横屏api

实现：

小程序横屏需要使用transform: rotate自己旋转实现, 封装成组件

/** wxml **/
<view style='width:{{windowHeight}}px;height:{{windowWidth}}px;transform-origin:{{windowWidth / 2}}px;transform: rotate(90deg);'>
    <slot></slot>
</view>

 /** js **/
Component({
  data: {
    windowHeight: 0,
    windowWidth: 0,
  },
  ready() {
    var sys = wx.getSystemInfoSync();
    this.setData({
      windowHeight: sys.windowHeight,
      windowWidth: sys.windowWidth
    });
  }
})

问题：

1. 在横屏下使用 filter: blur， 样式错乱

    解决方法就是不要使用filter:blur,不要使用图片

2. border-radius导致手势与滚动相反

   使用border-radius的元素使用overflow:hidden; 其下增加一层view, 使用overflow:auto解决

3.  video不支持旋转

   video是原生组件，不能被旋转；目前解决办法就是不全屏的时候自己模拟一个video样式，真的video大小设置为0；

   播放时，全屏并且横屏播放

4.  swiper组件横屏之后，手势与滚动相反

解决方案： https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=000e6abcb188f89fa3f614d9e51000

重要

 小程序中由客户端创建的原生组件(textarea, canvasd等)不支持旋转， 无法实现横屏。如果有此种设计需求，提前说明，修改设计