小程序图片右侧边缘像素缺失的解决方法（自定义图标适配）

方法一：用1张2倍图做适配。

1.通过动态设置image宽高来实现：先在data中用变量表示小图标初始宽高，并绑定到image组件上；

2.再通过wx.getSystemInfo获取手机可使用窗口宽度，那么小图标的宽度=原宽*屏宽/设计图宽，长=原长*屏宽/设计图宽，再用this.setData()修改变量。

<image class="progress-img" src="../../../imgs/transaction/01.png" bindload="imageLoad"  
style="width:{{imgwidth}}px; height:{{imgheight }}px;"></image>

Page({
  data: {
    screenWidth: 0,
    imgwidth: 0,
    imgheight: 0
  },
  onLoad: function (options) {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          screenWidth: res.windowWidth,
        });
      }
    }); 
  },
  imageLoad: function (e) {
    var _this = this;
    var screenW = this.data.screenWidth;
    var viewWidth = 54 * screenW / 750;
    var viewHeight = viewWidth;
    this.setData({
      imgwidth: viewWidth,
      imgheight: viewHeight
    })
  }
}

方法二：用1张2倍图做适配（类似方法一，优于方法一）

1.在app.js中获取手机可使用窗口宽度，计算出并手机可使用窗口宽度/设计图宽度的比率，添加到globalData里；ratio=widowWidth/750;

2.在image组件里添加行内样式动态计算宽高；image实际宽=设计图图片宽*ratio；

//app.js
const ratio = wx.getSystemInfoSync().windowWidth/750;
App({
  globalData:{
    ratio
  }
})

//demo.js
const app = getApp();
const globalData = app.globalData;
const ratio = globalData.ratio;
Page({
  data:{
    ratio
  }
})

<!-- demo.wxml -->
<image  src='/images/nav.png' style='width:{{50*ratio}}px;height:width:{{50*ratio}}px;'></image>

方法三：3张图片适配；把1倍屏、2倍屏、3倍屏对应的图片分别命名成text1\text2\text3

<image class="img-s text" src="../../images/text{{pixelRatio}}.png"></image>

const device = wx.getSystemInfoSync()
const pixelRatio = Math.floor(device.pixelRatio);
Page({
  data:{
    pixelRatio,
  }
})