• 小程序组件化


    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 点击蒙层不会关闭模态弹窗,所以尽量避免使用“取消”分支中实现业务逻辑。
  • 相关阅读:
    性能测试相关名词
    Java中的并发工具类:CountDownLatch、CyclicBarrier和Semaphore
    spring与mybatis五种整合方法
    Powerdesigner使用技巧
    基于Redis的Spring cache 缓存介绍
    AspectJ AOP介绍
    Spring AOP的实现原理
    -webkit-tap-highlight-color
    Zero Clipboard js+swf实现的复制功能使用方法
    CSS3 RGBA 属性高级用法
  • 原文地址:https://www.cnblogs.com/2oex/p/9881933.html
Copyright © 2020-2023  润新知