WXML 节点信息API
在小程序中使用wx.createSelectorQuery()获取到SelectQuery对象,这个对象提供了对应的节点操作方法
In(this) 将节点选区范围指向当前组件,默认只会查找当前页面
select() 根据css选择器查询到匹配结果的第一个元素节点,返回的NodesRef对象实例
selectAll() 和select一样只不过可以匹配多个节点
selectViewport() 选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个NodesRef对象实例
exec() 执行所有的请求,请求结果按请求次序构成数据,在callback的第一个参数中返回
**NodesRef**
nodesRef.boundingClientRect([callback]) 获取节点信息,返回值相对于显示区域,以像素为单位。
返回节点的信息有:**left right top bottom width height**,如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回
nodesRef.scrollOffset([callback]) 获取滚动位置信息,只针对于scroll-view组件以及viewport页面起作用,返回值是scrollLeft、scrollTop,如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回。
nodesRef.fields(fields, [callback])
指定获取哪些信息
(id,dataset,rect,size,scrollOffset,properties=[获取的常规属性名称,注:])
通讯 .sync 父传子 twoWay:true 子传父
两种改变数据:
1.this.$parent改变父数据
2.this.属性 直接改变子数据
wepy中组件的通讯
-
父子通信
父组件传递数据给子组件 通过props传值
1.如果需要传递动态属性值需要添加.sync修饰符
2.如果需要在子组件中修改父组件数据需要在接收的时候添加twoWay:true
3.如果需要数据双向绑定需要(.sync 和 twoWay:true )
4.使用$broadcast将数据广播到所有子组件中
-
子父通讯
子组件传递数据给父组件
1.在父组件中events中定义事件,在子组件$emit()
2.在父组件methods中添加方法,在子组件中this.$invoke('../','函数名称')
3.在子组件中通过this.$parent获取到父组件实例,调用父组件回调函数给父组件发送数据
-
同级
1.在A组件中通过this.$invoke('../B','函数名称') 调用B组件中的回调函数传递数据
2.将数据发送父组件,父组件在传递给另一个子组件(代理方式)
3.自己封装一个发布定时器(eventbus)
-
跨级
1.逐层传递
2.this.$invoke('组件路径','函数名称')
-
使用redux可以做所有的数据管理
$emit
多线程Worker
方法 | 说明 |
---|---|
Worker.postMessage() | 发送数据 |
Worker.onMessage() | 接收数据 |
app.json中 "workers": "workers" | 配置Worker |
var worker = wx.createWorker('workers/request/index.js') | 初始化Worker |
Worker.terminate() | 结束WOrker |
文件系统
wx.getFileSystemManager()
// 获取到全局唯一的文件系统管理器,所有文件系统的管理操作通过 FileSystemManager 来调用
- 文件主要分为两大类:
1.代码包文件:代码包文件指的是在项目目录中添加的文件
2.本地文件:通过调用接口本地产生,或通过网络下载下来,存储到本地的文件
**其中本地文件又分为三种**
1)本地临时文件:临时产生,随时会被回收的文件。不限制存储大小。
2)本地缓存文件:小程序通过接口把本地临时文件缓存后产生的文件,不能自定义目录和文件名。除非用户主动删除小程序,否则不会被删除。跟本地用户文件共计最多可存储 50MB 文件。
3)本地用户文件:小程序通过接口把本地临时文件缓存后产生的文件,允许自定义目录和文件名。除非用户主动删除小程序,否则不会被删除。跟本地用户文件共计最多可存储 50MB 文件。
// 读写权限
代码包文件 有 无
本地临时文件 有 无
本地缓存文件 有 无
本地用户文件 有 有
小程序运行机制
小程序启动会有两种情况
1.一种是「冷启动」
2.一种是「热启动」
// 运行机制
1.小程序没有重启的概念
2.当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁
3.当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁
**小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境
界面交互
方法 | 说明 |
---|---|
wx.showToast(OBJECT) | 提示框 |
wx.showLoading(OBJECT) | 显示 loading 提示框 |
wx.hideLoading | 隐藏 loading 提示框 |
wx.hideToast() | 隐藏消息提示框 |
wx.showModal(OBJECT) | 显示模态弹窗 |
wx.showActionSheet(OBJECT) | 显示操作菜单 |
Bug & Tip
tip: wx.showLoading 和 wx.showToast 同时只能显示一个,但 wx.hideToast/wx.hideLoading 也应当配对使用;
bug: Android 6.3.30,wx.showModal 的返回的 confirm 一直为 true;
tip: wx.showActionSheet wx.showModal 点击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
tip: Android 6.7.2 及以上版本 和 iOS wx.showActionSheet wx.showModal 点击蒙层不会关闭模态弹窗,所以尽量避免使用“取消”分支中实现业务逻辑。