xquery介绍

原生小程序小程序开发工具库，可作为第三方开发包引入，可导入已有开发项目

xquery包含以下特性：

组件选取
结构嵌套
事件函数封装
钩子方法
markdown支持
html支持
内置插件丰富
方便扩展外部插件

如何引用

github.com/webkixi/aot…

或者github中搜索 aotoo-xquery

1. Pager

Pager作为Page的替代，不影响原生用法，生命周期用法等等。简单引用

const Pager = require('components/aotoo/core/index') 
Pager({
  data: {},
  onLoad(){},
  onReady(){}
})

2. Pager.lib

一些助手方法(类似于lodash)，帮助快速开发

3. lib.hooks

hooks 包含数据存储，钩子方法两个部分

支持数据存储到小程序storage中
支持数据过期机制
支持lru缓存机制
Pager支持hooks
组件支持私有hooks
全局hooks

所有hooks类都继承自全局hooks，保持了一致的使用方式

4. EVENT封装

item/list元组件(包含继承item/list的组件)的事件方法经过封装变得更易使用

保持小程序原有逻辑不变，支持event事件参数
事件支持query传递参数，接近web的开发逻辑
接收响应的实例

data: {
itemConfig: {
  title: 'some text',
  aim: 'onTap?a=1&b=2', // aim是catch:tap的别名

  // tap => bind:tap的别名 
  // longpress => bind:longpress的别名
  // longtap => bind:longtap的别名 
  // touchstart => bind:touchstart 别名
  // touchmove => bind:touchmove的别名
  // touchend => bind:touchend的别名
  // touchcancel => bind:touchcancel的别名
  // catchlongpress => catch:longpress的别名
  // ...其他catch方法以此类推
  }
},
onTap(event, param, inst){
// event => 小程序原生  
// param => {a: 1, b: 2}
// inst 触发点击的item组件实例，该实例包含reset, update, addClass等更新方法
}

5. Methods属性

每一个item/list的元组件或者基于元组件构建的其他组件，都可以通过methods属性来扩展实例方法，这样使得代码更具有可维护性，将Page中的响应方法抽离出来，保证Page的可阅读性

const myConfig = {
title: '一些文字',
tap: 'onTap?text=好好学习，天天向上',
methods: {

  // onTap作为item的实例方法，脱离了Page的束缚
  onTap(e, param, inst){ 

    // activePage建立与Page的联系
    const activePage = inst.activePage 

    inst.update({title: param.text})
  }
}
}

Pager({
  data: {
    itemConfig: myConfig
  },
  onReady() {}
})

5. 嵌套组件

嵌套组件都是针对item组件使用，默认可以使用的嵌套组件

@item
嵌套一个item组件
@list
嵌套一个list组件
@tree
嵌套一个tree组件
@icon 嵌套一个icon组件
@form 嵌套一个form组件
@html 嵌套一个html组件
@md 嵌套一个markdown组件

嵌套代码示例

wxml模板

<ui-item item="{{itemConfig}}" />

js配置

data: {
  itemConfig: {
    title: 'item组件配置',
    body: [
      {"@item": {
        title: '嵌套item组件配置',
        body: [
          {
            title: '三层嵌套item组件',
            "@md": `### 嵌套中的markdown ` 
          }
        ]
      }}
    ]
  }
}

github地址：github.com/webkixi/aot…

小程序demo演示

了解小程序开发库xquery