支付宝小程序动画效果适配(微信小程序同)

  • 前景:在做位移等动画效果时,所要求填写的距离参数没有单位,据实测是手机的分辨率,物理像素乘以dpr。导致在不同手机上移动距离不相同,适配很不好
  • 解决:使用小程序的获取系统信息方法my.getSystemInfo获取windowWidth(窗口宽度)和pixelRatio (设备像素比)计算出当前rpx倍数(这里使用的750指的是设计图的尺寸,可以根据设计图的大小进行更改),使用的时候将需要的rpx值(即设计图标注的距离)乘以这个倍数就得到要填的值了
  • 处理代码如下:
my.getSystemInfo({
	success: (res) => {
		console.log(res.windowWidth);   // 窗口宽度
		console.log(res.pixelRatio);   // 设备像素比
		var times = res.windowWidth * res.pixelRatio / (750 * res.pixelRatio);  // 计算得到的当前rpx倍数
		console.log(100 * times);    //任意rpx(例:100rpx) 转换成的值(iphone6手机上值为50)
		console.log(750 * times);    //任意rpx(例:750rpx) 转换成的 值(iphone6手机上值为375)
	}
});

你可能感兴趣的:(小程序)