微信小程序自適應橫屏全屏顯示(以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; 
}