由于小程序的宽度是固定的 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. 初试stm32嵌入式开发遇到的巨坑

    开发板使用的是st官方的stm32F207ZG nucleo,遇到的问题是在keil中报错: no target connected 到网上找答案,都是说gpio口的问题,让按着reset键改debu ...

  2. Python之字符串中是否包含子串的几种方法

    #第一种方式 :in a='abcdaac' b='a' c='db' print(b in a) print(c in a)  预览结果 #第二种方式:count()方法 a='abcdefgab' ...

  3. Ant Design of Vue 组件库的使用

    文档里面很清楚 安装步骤    这是全部引入的 1  有的组价涉及到汉化的问题 import moment from 'moment' import '../../../../node_modules ...

  4. SpringCloud(四)- Hystris简介及@EnableCircuitBreaker 和 @HystrixCommand 注解的使用

    唯能极于情,故能极于剑有问题或错误请及时联系小编或关注小编公众号 “CodeCow”,小编一定及时回复和改正,期待和大家一起学习交流 此文由四部分组成(Hystris简介.@EnableCircuit ...

  5. [工具推荐]003.Tortoisegit使用教程(补充)

    前文介绍:       在前文<[工具推荐]003.Tortoisegit使用教程>中详细介绍了如何使用Tortoisegit的使用,但是大家使用后反映一点,就是每次操作都需要输入账号名和 ...

  6. [JavaWeb基础] 010.Struts2 下载文件

    在web开发中,我们经常会有文件的上传下载功能,上一篇的介绍中我们讲解了上传功能,那么这次我们来讲讲下载功能. 1.首先我们需要有一个用于处理下载的测试页面,也就是jsp. <body> ...

  7. 如何看待 HashiCorp 官宣,不允许中国境内使用其旗下产品?

    欢迎转载,欢迎看官推荐. 前言 HashiCorp 官方宣布,不允许中国境内使用.部署和安装该企业旗下的企业版产品和软件.该公司比较知名的产品有:Terraform.Consul.Vagrant 等. ...

  8. Java中方法的重载与重写

    1.方法的名字和参数列表称为方法的签名:每个方法具有唯一与其对应的签名: 2.方法的重载:在某个类中,存在具有多个相同名字不同参数列表的方法,称之为重载: 被重载的方法必须改变参数列表(参数个数或类型 ...

  9. TCP 半连接队列和全连接队列满了会发生什么?又该如何应对?

    前言 网上许多博客针对增大 TCP 半连接队列和全连接队列的方式如下: 增大 TCP 半连接队列的方式是增大 /proc/sys/net/ipv4/tcp_max_syn_backlog: 增大 TC ...

  10. Docker: GUI 应用,Ubuntu 上如何运行呢?

    操作系统: Ubuntu 18.04 运行镜像: continuumio/anaconda3, based on debian Step 1) 安装 Docker # update the apt p ...