很快微信开发者平台

 找回密码
 注册
查看: 2325|回复: 1

微信小程序开发,图片自适应屏幕大小,屏幕适配办法

[复制链接]

30

主题

55

帖子

1075

积分

专家路上

积分
1075
 楼主| 发表于 2018-5-8 14:38:58 | 显示全部楼层 |阅读模式
微信小程序开发,图片自适应屏幕大小,屏幕适配办法

早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记。

老规矩,先上图。

1.图片高宽比小于屏幕高宽比
2016111693209512.png

2.图片高宽比大于屏幕高宽比
2016111693239832.png

3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做缩放
2016111693300287.png

上代码:
1.index.wxml
  1. <!--index.wxml-->
  2. <!--图片宽大于屏幕宽-->
  3. <image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagefirstsrc}}" bindload="imageLoad"></image>
  4. <!--图片高大于屏幕高-->
  5. <!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagesecondsrc}}" bindload="imageLoad"></image>-->
  6. <!--图片宽高大于屏幕宽高-->
  7. <!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imagethirdsrc}}" bindload="imageLoad"></image>-->
复制代码

2.index.js
  1. //index.js
  2. //获取应用实例
  3. var imageUtil = require('../../utils/util.js');
  4. var app = getApp()
  5. Page({
  6. data: {
  7.   imagefirstsrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接
  8.   imagesecondsrc: 'http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接
  9.   imagethirdsrc:'http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg',
  10.   imagewidth: 0,//缩放后的宽
  11.   imageheight: 0,//缩放后的高
  12.   
  13. },
  14. onLoad: function () {
  15. },
  16. imageLoad: function (e) {
  17.   var imageSize = imageUtil.imageUtil(e)
  18.   this.setData({
  19.    imagewidth: imageSize.imageWidth,
  20.    imageheight: imageSize.imageHeight
  21.   })
  22. }
  23. })
复制代码

3.util.js
  1. //util.js
  2. function imageUtil(e) {
  3. var imageSize = {};
  4. var originalWidth = e.detail.width;//图片原始宽
  5. var originalHeight = e.detail.height;//图片原始高
  6. var originalScale = originalHeight/originalWidth;//图片高宽比
  7. console.log('originalWidth: ' + originalWidth)
  8. console.log('originalHeight: ' + originalHeight)
  9. //获取屏幕宽高
  10. wx.getSystemInfo({
  11.   success: function (res) {
  12.    var windowWidth = res.windowWidth;
  13.    var windowHeight = res.windowHeight;
  14.    var windowscale = windowHeight/windowWidth;//屏幕高宽比
  15.    console.log('windowWidth: ' + windowWidth)
  16.    console.log('windowHeight: ' + windowHeight)
  17.    if(originalScale < windowscale){//图片高宽比小于屏幕高宽比
  18.     //图片缩放后的宽为屏幕宽
  19.      imageSize.imageWidth = windowWidth;
  20.      imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;
  21.    }else{//图片高宽比大于屏幕高宽比
  22.     //图片缩放后的高为屏幕高
  23.      imageSize.imageHeight = windowHeight;
  24.      imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
  25.    }
  26.      
  27.   }
  28. })
  29. console.log('缩放后的宽: ' + imageSize.imageWidth)
  30. console.log('缩放后的高: ' + imageSize.imageHeight)
  31. return imageSize;
  32. }
  33.   
  34. module.exports = {
  35. imageUtil: imageUtil
  36. }
复制代码


原文:http://blog.csdn.net/qq_31383345/article/details/53127804
回复

使用道具 举报

0

主题

14

帖子

255

积分

新人求带

积分
255
发表于 2018-5-25 10:01:09 | 显示全部楼层
不是用rpx  不用px就行了吗
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 京ICP备2021022608号 )

GMT+8, 2021-12-3 00:20 , Processed in 0.030269 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表