wx小程序的文档阅读
记载如下
简易双向绑定
<input model:value="{{value}}" />
组件间双向绑定
<input model:value="{{myValue}}" />
<custom-component model:my-value="{{pageValue}}" />
Component({
properties: {
myValue: String
}
})
或者在事件中触发
update: function() {
// 更新 myValue
this.setData({
myValue: 'leaf'
})
}
用于双向绑定的表达式有如下限制:
只能是一个单一字段的绑定,如
<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
都是非法的;
目前,尚不能 data 路径,如
<input model:value="{{ a.b }}" />
这样的表达式目前暂不支持。
组件
公共属性
所有组件都有以下属性:
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标示 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
bind* / catch* | EventHandler | 组件的事件 | 详见事件 |
获取界面上的节点信息
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
res.top // #the-id 节点的上边界坐标(相对于显示区域)
})
query.selectViewport().scrollOffset(function(res){
res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()
在自定义组件或包含自定义组件的页面中,推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ,这样可以确保在正确的范围内选择节点。
WXML节点布局相交状态
在手机上启用屏幕旋转支持/在 iPad 上启用屏幕旋转支持
{ "pageOrientation": "auto" } 则在屏幕旋转时,这个页面将随之旋转
{ "pageOrientation": "landscape" } 表示固定为横屏显示
支持媒体查询
屏幕旋转事件
运行机制
当小程序进入后台的时候,如果需要得知小程序是否可能因为内存不够而被销毁的时候可以使用如下事件
wx.onMemoryWarning 监听内存告警事件,进行必要的内存清理