Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to set the size of Mini Program canvas". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to set the size of Mini Program canvas.

WeChat Mini Programs's size setting can be marked with rpx, and the same class as rem can be adaptively compatible with WeChat Mini Programs to convert different model sizes.

However, in Mini Program canvas, the size conversion will be invalid (due to the lag of painting), so you need to calculate the canvas size adaptively.

one。 Solution

Using the getSystemInfo provided by Mini Program, you can get the system information of the current device, and convert the canvas size you need to set by getting the current device size, so that canvas drawing can be applied to all devices.

Wx.getSystemInfo (OBJECT)

Get system information.

Sample code:

Wx.getSystemInfo ({

Success: function (res) {

Console.log (res.model)

Console.log (res.pixelRatio)

Console.log (res.windowWidth)

Console.log (res.windowHeight)

Console.log (res.language)

Console.log (res.version)

Console.log (res.platform)

}

})

two。 Calculation example

Get the canvas size required for dynamic conversion of the width and height of the current window

Wx.getSystemInfo ({

/ / the system information was obtained successfully. Assign the width and height of the system window to the width and height of the page.

Success: function (res) {

That.width = res.windowWidth

That.height = res.windowHeight

That.radius = 105602 * that.height

}

})

Thank you for your reading, the above is the content of "how to set Mini Program canvas size". After the study of this article, I believe you have a deeper understanding of how to set Mini Program canvas size, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.