小程序组件化

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 点击蒙层不会关闭模态弹窗,所以尽量避免使用“取消”分支中实现业务逻辑。
原文地址:https://www.cnblogs.com/2oex/p/9881933.html