作為一個只懂簡單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" 　　　　}) 　　}