一、微信小程序获取系统信息
微信获取系统信息函数为wx.getSystemInfo(OBJECT)
- object 参数说明
参数 | 类型 | 必填 |
---|---|---|
success | Function | 是 |
fail | Function | 否 |
complete | Function | 否 |
- success 回调参数说明
属性 | 说明 |
---|---|
model | 手机型号 |
pixelRatio | 设备像素比 |
windowWidth | 窗口宽度 |
windowHeight | 窗口高度 |
language | 微信设置的语言 |
version | 微信版本号 |
system | 操作系统版本 |
platform | 客户端平台 |
二、css3引入’vm’ 和 “vh”
vm=view width ; vh=view height
以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小
例如:
view{
width: 100vw;
font-size: 80vw; /* 宽度为窗口100%, 字体大小为窗口宽度的10% */
}
view{
height: 100vh;
font-size: 80vh; /* 高度为窗口100%, 字体大小为窗口高度的10% */
}
三、获取元素的高度wx.createSelectorQuery()//获取wxml节点信息api
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点,并使用boundingClientRect等方法选择需要查询的信息。
示例代码
Page({
queryMultipleNodes: function(){
var query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
res.dataset // 节点的dataset
res.width // 节点的宽度
res.height // 节点的高度
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
res.scrollX // 节点 scroll-x 属性的当前值
res.scrollY // 节点 scroll-y 属性的当前值
// 此处返回指定要返回的样式名
res.margin
res.backgroundColor
})
}
})
selectorQuery 对象的方法列表
方法 | 参数 | 参数 |
---|---|---|
in | object Component | 将选择器的选取范围更改为自定义组件component内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点。) |
select | selector | selector类似于CSS的选择器 |
selectAll | selector | 在当前页面下选择匹配选择器selector的节点,返回一个NodesRef对象实例。 与selectorQuery.select(selector)不同的是,它选择所有匹配选择器的节点。 |
selectViewport | 选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个NodesRef对象实例。 | |
exec | [callback] | 执行所有的请求,请求结果按请求次序构成数组,在callback的第一个参数中返回。 |