微信小程序 JS 获取View 和 屏幕相关属性(高度、宽度等等)

 

 

 

 

 

        wx.getSystemInfo({success: function (res) {thisWidth = res.windowWidth;}});        
        that.setData({view_Width: thisWidth / ColIndex})//设置列宽  
        console.log('----------------------');
        console.log('列数' + ColIndex + ' ; ' + '屏幕宽度:' + thisWidth 
        + ';单元格宽度:' + thisWidth / ColIndex);  
        console.log(requestarray[0].ArraylistData);
        that.setData({ array: requestarray[0].ArraylistData})//设置列宽

 

 

 

 

 

    var thisWidth;//屏幕宽度
    //创建节点选择器
    var query = wx.createSelectorQuery();
    //选择id
    query.select('#AutoTableItem').boundingClientRect()
    query.exec(function (res) {
      //res就是 所有标签为mjltest的元素的信息 的数组
      console.log(res); 
      thisWidth = res[0].width; 
    });

 

转载于:https://www.cnblogs.com/lanyubaicl/p/9165624.html

<think>首先,用户的问题是:“我想在微信小程序中使用UniApp获取设备屏幕宽度高度请问uniapp获取设备宽高微信小程序屏幕尺寸”。这是关于在微信小程序中使用UniApp框架获取设备屏幕尺寸的查询。我需要回顾用户提供的引用:-引用[1]:讨论了UniApp尺寸适配,包括如何将设计稿像素转换为rpx,并提到在uni-app中使用百分比设置尺寸的注意事项。-引用[2]:提供了如何在UniApp中获取屏幕高度等尺寸的代码片段。关键点:使用uni.getSystemInfo()获取窗口高度宽度等,并以px单位,然后转换为rpx。代码示例:```javascriptuni.getSystemInfo({success:res=>{console.log(res.screenHeight);//屏幕高度(px)console.log(res.windowWidth);//可使用窗口宽度(px)console.log(res.windowHeight);//可使用窗口高度(px)console.log(res.screenWidth);//屏幕宽度(px)self.phoneHeight=(res.screenHeight*(750/res.windowWidth));//将px转换为rpx的高度}});```-引用[3]:讨论了uniapp微信小程序中的刘海屏兼容问题,提供占位解决方案。用户的问题具体是如何获取设备屏幕宽度高度屏幕尺寸),在微信小程序环境中。在系统级指令中,我必须:-使用$...$$$...$$格式为数学表达式独立公式。-正确使用LaTeX语法。-用中文回答。-生成相关问题。-在引用段落末尾自然添加引用标识[^n]。回答的结构要清晰,帮助用户逐步解决问题。目标是确保回答真实可靠,基于参考引用。关键点从引用中提取:-使用uni.getSystemInfo()方法来获取系统信息。-这个方法的返回对象包含:-screenHeight:屏幕高度(px)-screenWidth:屏幕宽度(px)-windowHeight:可使用窗口高度(px)-windowWidth:可使用窗口宽度(px)-在UniApp中,单位通常是rpx(响应像素),但获取的是px单位,所以可能需要转换。-用户问的是设备屏幕宽度高度,这对应screenWidthscreenHeight。用户需求:获取设备屏幕宽度高度,即在UniAppfor微信小程序中。步骤:1.导入uni方法(在UniApp中,uni已经内置)。2.使用uni.getSystemInfo()获取系统信息。3.在success回调中访问res.screenWidthres.screenHeight。4.如果需要转换为rpx,参考引用[2]中的转换方法:将px值乘以750除以窗口宽度(windowWidth)来转换为rpx。但要获取屏幕尺寸,用户可能只需要px值。用户说“设备屏幕宽度高度”,这通常指物理屏幕尺寸,在UniApp中用screenWidthscreenHeight在px单位。但既然用户在UniApp上下文中,可能需要知道如何转换为rpx用于UI布局。回答结构:-**引言**:解释在微信小程序中使用UniApp获取设备屏幕尺寸的基本方法。-**逐步指导**:-Step1:使用uni.getSystemInfo()方法。-Step2:获取screenWidthscreenHeight属性。-Step3:可选,将结果转换为rpx。-提供代码示例。-**注意事项**:如刘海屏兼容问题(从引用[3]),用户可能需要处理不同设备的变化。-**生成相关问题**:如系统级指令要求。在回答中引用的内容末尾添加引用标识,例如:[^1]。但由于用户提供的是引用[1],[2],[3],我应该基于这些引用。在回答末尾添加相关问题:-根据主题,相关问题可以是:-如何将px转换为rpx?-如何适配不同设备尺寸?-如何处理刘海屏或状态栏?用中文回答整个内容。确保数学表达式使用正确格式:-例如,在转换公式中:$rpx=px\times\frac{750}{\text{windowWidth}}$,应该用$...$包装。-独立公式,如可能的话。代码块用\`\`\`包围,如示例。完整回答框架:1.**介绍问题**:简述如何在UniApp微信小程序获取屏幕宽高。2.**核心方法**:使用uni.getSystemInfo()。3.**代码示例**:展示获取screenWidthscreenHeight的代码。4.**转换到rpx**:解释如何转换为响应式单位(rpx),提供公式:$rpx=px\times\frac{750}{\text{windowWidth}}$[^2]。5.**注意事项**:提到刘海屏问题,参考引用[3]。6.**相关问题**:生成3个相关的问题。</think> ### 在微信小程序中使用UniApp获取设备屏幕宽度高度的解决方案 在UniApp开发微信小程序时,获取设备屏幕尺寸是关键步骤之一,用于适配不同设备的布局。以下是基于您提供的引用UniApp最佳实践的完整方法: #### 步骤1:使用 `uni.getSystemInfo()` 获取设备信息 UniApp 提供了 `uni.getSystemInfo()` API 获取系统信息,包括屏幕尺寸(单位为像素px)。该方法返回对象包含以下关键属性: - `screenWidth`:屏幕宽度(px) - `screenHeight`:屏幕高度(px) - `windowWidth`:可使用窗口宽度(px) - `windowHeight`:可使用窗口高度(px) 您可以在任何 Vue 文件(如页面或组件)中调用此方法,示例代码如下: ```javascript uni.getSystemInfo({ success: res => { // 获取原始像素单位的屏幕尺寸 console.log("屏幕宽度(px):", res.screenWidth); console.log("屏幕高度(px):", res.screenHeight); // 可选:存储到 data 中用于界面渲染 this.screenWidth = res.screenWidth; this.screenHeight = res.screenHeight; }, fail: err => { console.error("获取设备信息失败:", err); } }); ``` 运行后,控制台会输出类似: ``` 屏幕宽度(px): 375 屏幕高度(px): 812 ``` 此方法兼容微信小程序浏览器环境[^2]。 #### 步骤2:将像素(px)转换为响应式单位(rpx) 在UniApp中,设计推荐使用 rpx(响应像素)进行布局,以实现自动适配。rpx 与 px 的转换公式为: $ \text{rpx} = \text{px} \times \frac{750}{\text{windowWidth}} $ 其中,750 是基于标准设计稿的基准值(UniApp设计稿宽度通常为750px)。 **代码示例:** ```javascript uni.getSystemInfo({ success: res => { // 计算 rpx 单位的屏幕尺寸 const rpxWidth = res.screenWidth * (750 / res.windowWidth); const rpxHeight = res.screenHeight * (750 / res.windowWidth); console.log("屏幕宽度(rpx):", rpxWidth); console.log("屏幕高度(rpx):", rpxHeight); } }); ``` 例如,若屏幕宽度为375px,则计算为: $$ \text{rpx宽度} = 375 \times \frac{750}{375} = 750\ \text{rpx} $$ 这在设备兼容性测试中特别有用,确保元素在不同设备上比例一致[^1]。 #### 注意事项 1. **刘海屏设备兼容性**:iPhone X等刘海屏设备的屏幕高度包含状态栏区域。直接在页面顶部布局时,可能需要添加占位视图(如引用[3]中提到的 `<view class="fit">`),以避免内容被状态栏遮挡。 2. **单位转换必要性**:小程序中直接使用 px 可能导致布局错乱。rpx 是推荐单位,转换公式确保在1080px设计稿下(如您的用例),100px 元素对应 $750 \times \frac{100}{1080} \approx 69\ \text{rpx}$[^1]。 3. **运行环境差异**:浏览器中预览时可能无状态栏,但真机测试或微信小程序环境中会正确显示实际屏幕尺寸。建议使用真机调试验证数据准确性。 #### 相关参考 - [^1]: UniApp 尺寸适配文档。 - [^2]: UniApp 获取屏幕高度示例。 - [^3]: 刘海屏兼容解决方案。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值