微信小程序首页图片模糊

Posted 2023-03-21

制作微信小程序首页图片的时候图片模糊，我想咨询一下：我测试的图片宽度为375像素，分辨率300 这样制作出来的图片是很清晰的。但是最近在网页上下载的一些模版 图片尺寸远大于375的宽度，有些图片1900*2000多的尺寸 但是分辨率只有72 于是我简单的保持分辨率不变 把图片尺寸缩小到375宽度 发现制作出来很不清晰。后来尝试把图片宽度调到375宽度的3倍 分辨率72 这样制作出来就清楚了 但是放到小程序里面之后发现图片又不清楚了 是不是上传到小程序图片库的时候图片会被压缩 另外我小程序还不能在手机上浏览 我不知道在手机上浏览会不会清晰 所以在这发帖问一问高手 望不吝赐教 什么样的情况下 让分辨率不高的图片 在小程序里面清晰的显示出来 不胜感激

小程序里面图片的添加一般都会有尺寸要求，按照尺寸要求添加既可以了，并不是图片越大越好，有些不符合尺寸要求的图片上传后就会变形，这也会导致图片模糊。 参考技术A 将canvas大小设为(1200*800)，使用css将canvas缩放到适应屏幕大小。(此步骤可省略,直接设置destWidth和destHeight乘以像素比即可)

这在开发工具的模拟器中是没有问题的，然而在真机测试的时候是无效的，不管用的是transform还是zoom。

本质上就是生成一个更大的图片，因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。

当然，这个具体数值也可以wx.getSystemInfo这个API来获取设备的像素比了（pixelRatio），这个像素比作为以上数值。 参考技术B 小程序顶部banner轮播图建议尺寸是：750(长) * 375(宽)
如果放在手机上实在是失真的话，不如重新制作一张呢 参考技术C 你做的上传图片有几个问题
微信小程序上传图片之前，
第一，图片大小无关，但是内存大，找个图片压缩官网上传图片压缩出来，内存越小越好，最多再次压缩出来，图片自然内存小较好，以免加载太久出来的图片。

第二，可能是你们程序员忽略代码问题，
有没有自适应代码？如果没有这个，添加480与768的代码句子，百度找个响应式官网的基础手机版的代码句子复制拷贝出来，最终有效果。
样式的图片是img width与height均为auto.

第三，BUG不一定调试出来报错再改下！ 参考技术D 现在使用微信的人越来越多，有些不法分子就想要通过微信来进行诈骗，因此，我们最好给微信设置上独立密码， 为微信安全加把锁。首先打开“微信”，点击“我”，然后进入“设置”。然后设置独立密码，下次打开微信就要输入密码才能进入了。

微信小程序-原生开发实用教程05-首页（含自定义调试模式插入图片图文排版底部留白添加本地图片）

开始前，请先完成启动/欢迎/首屏广告页的开发，详见

【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页（含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)

需求描述

微信小程序的首页根据业务的需求，多种多样，此处为了顺应学习内容，暂选用最简单的图文方案，后续再进阶开发更复杂的首页。

自定义调试模式

默认情况下，微信开发者工具使用的是调试模式为​​普通编译​​

此时小程序默认都会加载 app.json 的 pages 配置中的第一行路径对应的页面（当前代码对应的是教程04开发的倒计时启动页）为了后续调试其他页面的方便，我们可以自定义新的调试模式，来指定默认加载的页面

之后便可将编译模式切换为​​调试首页​​

代码实现

pages\\index\\index.wxml

<image src="../../assets/images/2023.jpg" mode="widthFix" />
<view class="title">
  新年贺词
</view>
<view class="content">
  <view class="paragraph">
    2022年对谁来说都不容易，还好摸爬滚打，今天我们还能欢聚于此。大家都在各自的路上走着，有的随心创业了，有的机缘涨薪了，有的心态平和了，大多数呢，是收获爱情了。
  </view>
  <view class="paragraph">
    再次站上新年起点，又将邂逅新的机遇和挑战，无论你怎样看待明天，我都希望大家能继续百尺竿头，更进一步！，爱情更进一步、事业更进一步，生活也更进一步，总有更好的活法等着大家，总有更棒的聚会等着我们，2023年祝大家大展宏“兔”，前“兔”似锦，“兔”然暴富，不要错过下次的聚会哟！
  </view>
</view>
<view class="blankBar"> 
</view>

image

多了属性 mode，完整的属性值，可参考官网
​​​https://developers.weixin.qq.com/miniprogram/dev/component/image.html​​

图文结构

• 封面图片
• 标题
• 内容

• 段落1
• 段落2

• 底部留白

底部之所以有留白区域，是为了撑开页面，避免文末的内容被底部的导航 tabBar 遮挡。

pages\\index\\index.wxss

样式部分比较简单，需要留意的地方见注释

image 
  /* 图片撑满屏幕宽度 */
  width: 100%;


.title 
  text-align: center;
  font-size: 60rpx;
  font-weight: bold;
  margin-top: 20rpx;
  margin-bottom: 20rpx;


.content 
  padding-left: 30rpx;
  padding-right: 30rpx;
  line-height: 2;
  font-size: 40rpx;


.paragraph
  margin-bottom: 20rpx;
  /* 文本分散对齐 */
  text-align: justify;


.blankBar 
  /* 底部留白的高度需与底部导航的高度相同 */
  height: 100rpx;

添加本地图片

范例中的图片是放在项目中的，按以下步骤操作即可：

1. 清空 assets 文件夹（创建项目时遗留有模板图片）
2. 在 assets 文件夹中新建文件夹 images
3. 将图片 ​​2023.jpg​​ 放入到 images 文件夹中