小程序页面如何适应多种屏幕尺寸 小程序界面的尺寸

文章摘要：小程序页面如何适应多种屏幕尺寸 小程序界面的尺寸

设置小程序页面适应多种屏幕尺寸的方法 1.首先，进入微信开发者工具，在小程序项目中新建一个页面； <vi […]

设置小程序页面适应多种屏幕尺寸的方法

1.首先，进入微信开发者工具，在小程序项目中新建一个页面；

<view id='canvas-container' class='ctx' style='width:200rpx;height:100rpx;'>

2.通过wx.createSelectorQuery()方法获取组件节点的宽高，并将节点的rpx单位转换成px单位；

wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {

       var width = rect.width/2 // 节点的宽度

       }).exec()

3.最后，在将获取的节点宽高，使用在画布中即可；

ctx.translate(width, width);