作為一個只懂簡單HTML，jQuery，JS的web后台開發者，最近在學習小程序開發，現在將小程序的點擊全屏功能的相關內容記錄下來。如果有不對的地方或者有更簡單的方法，請留言指教 0_0~
.js 文件
data: {
one:"block", //判斷圖片全屏前是否隱藏
ones:"none", //判斷圖片全屏后是否隱藏
phoneheight :" " , //按比例縮放后圖片高
phoneWidth : " " //按比例縮放后圖片寬
}
.wxml 文件
//全屏前
<view class='first' style='display:{{one}}'>
<image class='detailphone' src='{{urls}}' mode='widthFix' bindtap='phonefull'></image>
</view>
//全屏后
<view class='firsts' style='display:{{ones}}'>
<image style='width:{{phoneWidth}}rpx;height:{{phoneheight}}rpx;top:{{top}}rpx;left:{{left}}rpx' src='{{urls}}' class="asd" mode="aspectFit" bindtap='nophonefull' id="{{urls}}" ></image>
</view>
當點擊全屏前圖片時，觸發bindtap事件
.js 文件
//點擊照片全屏
phonefull : function(){
var originalWidth =0; //圖片原本的高
var originalHeight=0; //圖片原本的寬
var height = 0; //可用屏幕高
var width = 0; //可用屏幕寬
var orwidth = 0;
var orheight =0;
//在javascript語言中，this代表着當前的對象，它在程序中隨着執行的上下文隨時會變化。在進入phonefull點擊事件函數后，對象已經發生了變化。所以已經不是原來的頁面對象了。自然就沒有了data屬性，通過 var that = this 把this對象復制到臨時變量that.這樣就將原來的頁面對象賦值給that了。
var that = this ;
wx.getImageInfo({ //.getImageInfo()獲取
圖片信息
src: this.data.urls, //要獲取的圖片信息的路徑
success: function (res) { //獲取圖片成功后的操作
originalWidth = res.width;
originalHeight = res.height;
wx.getSystemInfo({ //獲取設備的相關信息
success: function (res) {
height = res.windowHeight*2; //res.windowHeight 可用屏幕高 小程序使用自適應單位 rpx，獲取屏幕高以 px 為單位，以iPhone6為例，1rpx=0.5px
width = res.windowWidth*2; //res.windowWidth 可用屏幕寬
orwidth = width / originalWidth ; // 可用屏幕寬與圖片原本寬的比
orheight = height / originalHeight ; //可用屏幕高與圖片原本高的比
//因為全屏需要將高寬全部顯示出來，所以進行比例判斷
if (orwidth <= orheight) {
that.setData({
phoneheight: originalHeight * orwidth,
phoneWidth: originalWidth * orwidth,
top: (height - originalHeight * orwidth)/2,
left: (width - originalWidth * orwidth)/2,
one: "none",
ones: "block"
})
} else {
that.setData({
phoneheight: originalHeight * orheight,
phoneWidth: originalWidth * orheight,
top: (height - originalHeight * orheight) / 2,
left: (width - originalWidth * orheight) / 2,
one: "none",
ones: "block"
})
}
},
fail: function (res) {
console.log("獲取設備高寬失敗");
},
})
},
fail: function (res) {
console.log("獲取圖片高寬失敗");
},
})
},
這時，通過one，ones的賦值，顯示的就是全屏的圖片啦，如果想退出全屏，點擊全屏后的圖片，觸發nophonefull事件就可以啦
.js 文件
//退出滿屏
nophonefull: function () {
this.setData({
one: "block",
ones: "none"
})
}