作为一个只懂简单HTML，jQuery，JS的web后台开发者，最近在学习小程序开发，现在将小程序的点击全屏功能的相关内容记录下来。如果有不对的地方或者有更简单的方法，请留言指教 0_0~
//点击照片全屏
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 文件
京公网安备 11010802041100号