微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

Posted 2020-08-19 乱术

微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

以下问题测试环境为微信开发者0.10.102800，手机端iphone6，如有不对敬谢指出。

 

根据我的测试，context.drawImage，在开发者工具中并不能画出来，只有预览到手机中显示。

 

wx.canvasToTempFilePath wx.saveFile

官方文档中只有一行，真是坑爹啊，原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；

            wx.canvasToTempFilePath({
              canvasId: \'target\',
              success: function success(res) {
                wx.saveFile({
                  tempFilePath: res.tempFilePath,
                  success: function success(res) {
                    console.log(\'saved::\' + res.savedFilePath);
                  },
                  complete: function fail(e) {
                    console.log(e.errMsg);
                  }
                });
              },
              complete: function complete(e) {
                console.log(e.errMsg);
              }
            });

官方文档中只有一行，真是坑爹啊，原来

wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；

 

wx.saveFile，保存的图片，我在iphone6上测试，提示保存成功，但在手机相册中无法查看，应该是这个保存功能不够完善，以后可能会出一个保存到相册吧。

 

 

**获取设备宽高

wx.getSystemInfo(OBJECT)

获取系统信息。

OBJECT参数说明：

参数	类型	必填	说明
success	Function	是	接口调用成功的回调
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success回调参数说明：

属性	说明
model	手机型号
pixelRatio	设备像素比
windowWidth	窗口宽度
windowHeight	窗口高度
language	微信设置的语言
version	微信版本号

 

 

**尺寸问题

在小程序中，支持还可以使用vw(1%的屏幕宽),vh(1%的屏幕高)，

在wxss中虽然使用表达式calc不会报错，但这个值是无效的。

尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

• rem（root em）: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

 

 

以上问题测试环境为微信开发者0.10.102800，手机端iphone6，如有不对敬谢指出。