照片 spl on() data 信息 單位 方法 退出 new

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

　　

微信小程序點擊圖片全屏