微信 小程序 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，如有不對敬謝指出。