微信小程序自适应横屏全屏显示(以PPT为例)

用微信小程序实现PPT翻页全屏显示时，需要自适应手机屏幕横屏并全屏显示，效果图如下：

效果图：

Tornado.js文件

// pages/course/Tornado/Tornado.js
//landscape横屏,portrait竖屏，auto自动
var app = getApp()
const util = require('../../../utils/util.js')
const res = wx.getSystemInfoSync()
console.log(res.windowWidth, res.windowHeight)
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pptimgnum:19,
    pptcurrentnum:1,
    filename: 'Backpropagation',
    pptimgurl: "https://****/microclass/Backpropagation/幻灯片1.JPG",
    pptstaytimearr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*const res = wx.getSystemInfoSync()
    console.log(res.windowWidth, res.windowHeight)*/
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.showToast({
      title: '温馨提示：左右滑动翻页',
      icon: 'none',
      duration: 3000
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    /*console.log(this.data.pptstaytimearr)*/
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    /*console.log(this.data.pptstaytimearr)*/
    let record = JSON.stringify({ 'OpenId': '12345', 'LessonId': '1019080801', 'records': this.data.pptstaytimearr })
    console.log(record)
    wx.request({
      url: 'http://localhost:9998/Api/Record',
      method: 'POST',
      header: {
        'content-type': 'text/plain'
      },
      data: record,
      success: function (res) {
        console.log(res)
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

  // 触摸开始事件
  touchStart: function (e) {
    //console.log(e)
    this.data.touchDotX = e.touches[0].pageX; // 获取触摸时的原点
    this.data.touchDotY = e.touches[0].pageY;
    //用数组记录此ppt停留时间hh:mm:ss
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000;
    //console.log("当前时间戳为：" + timestamp);
    let pptid = e.target.dataset.pptid
    let pptstaytimearr = this.data.pptstaytimearr
    pptstaytimearr.push({
      "Section": pptid,
      "LearnTime": util.formatTime(new Date())
    })
    //"s": timestamp
    this.setData({
      pptstaytimearr: pptstaytimearr
    })
  },

  // 触摸结束事件
  touchEnd: function (e) {
    console.log(e)
    var touchEndX = e.changedTouches[0].pageX; // 获取触摸时的终点
    var touchEndY = e.changedTouches[0].pageY;
    // 左右滑动  
    if (Math.abs(this.data.touchDotX - touchEndX) > Math.abs(this.data.touchDotY - touchEndY)) {
      //向左滑动
      if (this.data.touchDotX > touchEndX){
        if (this.data.pptcurrentnum < this.data.pptimgnum) {
          console.log("向左滑动，下一张")
          wx.showToast({
            title: '下一张',
            icon: 'none',
            duration: 1000
          })
          let num = this.data.pptcurrentnum + 1
          this.setData({
            pptcurrentnum: num,
            pptimgurl: 'https://****/microclass/' + this.data.filename + '/幻灯片' + num + '.JPG'
          })
        } else {
          console.log("当前页已经是最一张PPT")
          wx.showToast({
            title: '已经是最后一张',
            icon: 'none',
            duration: 1000
          })
        }
      } else {
        if (this.data.pptcurrentnum > 1) {
          console.log('向右滑动，上一张');
          wx.showToast({
            title: '上一张',
            icon: 'none',
            duration: 1000
          })
          let num = this.data.pptcurrentnum - 1
          this.setData({
            pptcurrentnum: num,
            pptimgurl: 'https://****/microclass/' + this.data.filename + '/幻灯片' + num + '.JPG'
          })
        } else {
          wx.showToast({
            title: '已经是第一张',
            icon: 'none',
            duration: 1000
          })
          console.log("当前页已经是第一张PPT")
        }
      }
    } else {
      console.log("上下滑动/点击事件")
      /*if (this.data.touchDotX > touchEndX) {
          console.log("向左滑动，下一张")
        } else {
          console.log('向右滑动，上一张');
      }*/
    }
  }
})

Tornado.json (pageOrientation:landscape横屏,portrait竖屏,auto自动)

{
  "pageOrientation": "landscape",
  "navigationBarTitleText": "Tornado程序设计"
}

Tornado.html

<view wx:if='{{pptimgnum>0}}' class="container">
  <image class="pptimg" src="{{pptimgurl}}" data-src="{{pptimgurl}}" data-pptid="{{pptcurrentnum}}" bindtouchstart="touchStart" bindtouchend="touchEnd"></image>
</view>
<view wx:else class='pptext'>暂无</view>

Tornado.css

/* pages/course/Tornado/Tornado.wxss */
.container{
  width: 100vw;
  height: 100vh;
  align-items:center;
  /*background-color:#fff;*/
}
.pptimg{
  width:100%;
  height:100%;
}
.pptext{
  text-align:center; 
}