微信小程序单位__rpx2px

微信小程序单位处理

在微信小程序中，常用的单位：rpx 和 px, 但是设计，通常给我们的是的 width = 750, 基于 iphone6 的设计稿（375px * 667px），

各种常用设备的尺寸分析

设备	宽	高	设备像素比
iphone5	320px	568px	2
iphone6	375px	667px	2
iphone6+	414px	736px	3
iphone7	375px	667px	2
iphone7+	414px	736px	3
iphoneX	375px	812px	3
Nexus5	360px	640px	3
Nexus 5x	411px	731px	2.625
Nexus 6	412px	732px	3.5
iPad Air 2	768px	1024px	2
iPad Pro 10.5-inch	834px	1112px	2
iPad Pro 12.9-inch	1024px	1336px	2

如有错误可以指出，来源微信小程序模拟器。

单位转换

微信小程序的单位转换，是与屏幕的宽度有直接的关系的，我们还是先看文档：

微信小程序单位单位转换原理

分析

设计稿，一般小程序的设计稿是iphone6的，然后 iphone6 的转换比例 0.5（1rpx = 0.5px）。

有时候我们不能方便的使用 rpx，好比：我们使用 wx.getSystemInfo 得到的设备信息，单位都是 px;在使用小程序的 canvas 的时候，我们也只能使用 px. 为了能够迎合 iphone6 的设计稿 和 px 的适配需要。我们需要干下面的这些事：

// app.js
onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        // 设计稿一般是 750 rpx, 但是 canvas 是 px;
        // 1rpx 转换成 px 的时候
        this.globalData.rpx2px = 1 / 750 * e.windowWidth;
      }
    });
  },
复制代码

// tool.js
// some tool function
let app = getApp()
function rpx2px(rpxNum) {
   return rpxNum * app.globalData.rpx2px;
}

module.export = {
    rpx2px: rpx2px
}

// some page/components, index.js
const utils = require('./tool');
复制代码

实例

使用canvas绘制基本的图形

function roundRect(ctx,x,y,w,h,r){ //绘制圆角矩形(无填充色))
  ctx.save();
  if(w < 2 * r){
    r = w / 2;
  }
  if(h < 2 * r){
    r = h / 2;
  }
  ctx.beginPath();
  ctx.setFillStyle("#ccc");
  ctx.setStrokeStyle('#111');
  ctx.setFillStyle("#ccc");
  ctx.setLineWidth(rpx2px(.2));
  ctx.setFillStyle("#ccc");
  ctx.moveTo(x + r , y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  ctx.arcTo(x + w, y + h, x , y + h, r);
  ctx.arcTo(x, y + h, x, y, r);
  ctx.arcTo(x, y, x + w, y , r);
  ctx.stroke();
  ctx.closePath();
}

function drawText(context, text, distanceX, distanceY, fontSize, color, position,maxWidth) {  //绘制圆角矩形（纯色填充）
  context.save();
  context.setFillStyle(color)
  context.setFontSize(fontSize)
  context.setTextAlign(position)
  context.fillText(text, distanceX, distanceY)
}
复制代码

drawCard() {
    function rpx2px(rpxNum){
      var _rpx2px = app.globalData.rpx2px;
      return rpxNum * _rpx2px
    }
    // ...
    canvas.drawText(ctx, this.data.dd, rpx2px(40), rpx2px(110),  rpx2px(40), '#ff7c02');
    canvas.drawText(ctx, this.data.dd,      rpx2px(40), rpx2px(150),  rpx2px(22), '#c3c3c3');
    canvas.drawText(ctx, this.data.ss,  rpx2px(40), rpx2px(190), 
    // ...
    ctx.font = 'normal bold 40px sans-serif';
    canvas.drawText(ctx, bot_desc[0], rpx2px(450), rpx2px(600), rpx2px(28), '#c82d00');
    canvas.drawText(ctx, bot_desc[1], rpx2px(610), rpx2px(640), rpx2px(28), '#c82d00');

    // ctx.setTextAlign('center')
    ctx.fillText('textAlign=center', 20, 20)
    // 绘制渐颜色调
    canvas.linearGradient(ctx)

    // 绘制图像
    let defaultAvatar = '/images/common/utut.png'
    ctx.drawImage(defaultAvatar, rpx2px(560), rpx2px(50), rpx2px(100), rpx2px(100))
    // ...
    wx.getImageInfo({
      src: cardUrl,
      successs: function() {
        debugger
        ctx.drawImage(cardUrl, rpx2px(40), rpx2px(600), rpx2px(170), rpx2px(170))
      }
    })
     // ...
  },
复制代码

总结

小的知识，细节做的好，编程更加的稳！