由于小程序的宽度是固定的 750rpx,我们可以先用wx.getSystemInfo 来获取可使用窗口的宽高(并非rpx),结合750rpx的宽度算出比例,再用比例来算出高度

let that = this;
// 获取系统信息
wx.getSystemInfo({
success: function (res) {
// 获取可使用窗口宽度
let clientHeight = res.windowHeight;
// 获取可使用窗口高度
let clientWidth = res.windowWidth;
// 算出比例
let ratio = 750 / clientWidth;
// 算出高度(单位rpx)
let height = clientHeight * ratio;
// 设置高度
that.setData({
height: height
});
}
});

微信小程序 简单获取屏幕视口高度的更多相关文章

  1. 微信小程序后台获取用户的opeid

    1.微信小程序后台获取登录用户的openid,首先微信小程序将code传给后台服务器 wx.login({ success: function (res) { var code = res.code ...

  2. 【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

    摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...

  3. 微信小程序如何获取openid

    微信小程序如何获取openid wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // ...

  4. 微信小程序验证码获取倒计时

    wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...

  5. 微信小程序,获取二维码

    微信小程序,获取二维码 找到一篇很实用的博客,他已经写得很详细了,自己也懒得写,亲测有效 参考网址

  6. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  7. nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId

    nodejs+koa+uniapp实现微信小程序登陆获取用户手机号及openId 前言: 我准备用nodejs+koa+uniapp实现一款餐饮点单小程序,以及nodejs+koa+vue实现后端管理 ...

  8. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  9. 微信小程序简单入门1

    参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1  创建项目 开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项 ...

随机推荐

  1. Codeforces1157B(B题)Long Number

    B. Long Number You are given a long decimal number aa consisting of nn digits from 11 to 99. You als ...

  2. 基于Netty包中的Recycler实现的对象池技术详解

    一.业务背景 当项目中涉及到频繁的对象的创建和回收的时候,就会出现频繁GC的情况,这时就出现了池化的技术来实现对象的循环使用从而避免对象的频繁回收,Netty包下的Recycler就实现了这一功能.当 ...

  3. BZOJ 1084DP

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2796  Solved: 1391[Submit][Sta ...

  4. .Net基础之1——学前入门

    1..Net平台 2.C#编程语言 3..Net都能做什么 Winform桌面应用程序.Internet应用程序——ASP.Net(京东.淘宝.携程网)(主推). WP8手机开发.Unity 3D游戏 ...

  5. GRpc添加客户端的四种方式

    随着微服务的发展,相信越来越多的.net人员也开始接触GRpc这门技术,大家生成GRpc客户端的方式也各不相同,今天给大家介绍一下依据Proto文件生成Rpc客户端的四种方式 前提:需要安装4个Nug ...

  6. JVM调优总结(五)-典型配置举例

    以下配置主要针对分代垃圾回收算法而言. 堆大小设置 年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...

  7. 【转】B树、B+树、B*树、R 树、QuadTree

    从B树.B+树.B*树谈到R 树 QuadTree(四叉树) 四叉树空间索引原理及其实现

  8. DQN(Deep Q-learning)入门教程(五)之DQN介绍

    简介 DQN--Deep Q-learning.在上一篇博客DQN(Deep Q-learning)入门教程(四)之Q-learning Play Flappy Bird 中,我们使用Q-Table来 ...

  9. & 异步使用场景

    异步的使用场景: 1.不涉及共享资源,或对共享资源只读,即非互斥操作 2.没有时序上的严格关系 3.不需要原子操作,或可以通过其他方式控制原子性 4.常用于IO操作等耗时操作,因为比较影响客户体验和使 ...

  10. 北京理工大学复试上机--2001A

    1.编写程序,计算下列分段函数 y=f(x)的值. y = -x + 2.5, 0 <= x < 2 y = 2 - 1.5 (x - 3) (x - 3), 2 <= x < ...