Pager

小程序的原生方法Page的封装,保持小程序原生生命周期设置,对page.data做预处理

const Pager = require('components/aotoo/core')

Pager.item

item组件配置方法

Pager({
  data: {
    itemData: Pager.item({
      title: '标题',
      img: '图片',
      itemClass: '',
      itemStyle: ''
    })
  },
  onReady(){
    // 经过Pager.item处理过的数据,可以在ready后找到实例
    const itemInstance = this.getElementsById('itemData')
    itemInstance.addClass('....')
    itemInstance.removeClass('....')
    itemInstance.update('....')
    itemInstance.getData('....')
  }
})

模板

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

Pager.list

list组件的配置方法

Pager({
  data: {
    listData: Pager.list({
      data: [{
        title: '标题1',
      }, {
        title: '标题2'
      }],
      listClass: '',
      itemClass: ''
    })
  },
  onReady(){
    // 经过Pager.item处理过的数据,可以在ready后找到实例
    const listInstance = this.getElementsById('listData')
    listInstance.addClass('....')
    listInstance.removeClass('....')
    listInstance.update('....')
    listInstance.getData('....')
    listInstance.find('....')
    listInstance.findIndex('....')
    listInstance.findAndUpdate('....')
    listInstance.delete('....')
  }
})

模板

<ui-list list="{{someData}}" />

Pager.tree

tree组件配置方法, tree组件是list组件的超级,可以使用list组件实例的所有方法

Pager({
  data: {
    treeData: Pager.tree({
      data: [
        { title: '标题1', idf: 'level-0' }, // 父级
        { title: '标题2', parent: 'level-0' }
        { title: '标题3', parent: 'level-0' }

        { title: '标题A', idf: 'level-a' } // 父级
        { title: '标题x', parent: 'level-a' }
        { title: '标题y', parent: 'level-a' }
      ],
      listClass: '',
      itemClass: ''
    })
  },
  onReady(){
    // 经过Pager.item处理过的数据,可以在ready后找到实例
    const treeInstance = this.getElementsById('treeData')
    treeInstance.addClass('....')
    treeInstance.removeClass('....')
    treeInstance.update('....')
    treeInstance.getData('....')
    treeInstance.find('....')
    treeInstance.findIndex('....')
    treeInstance.findAndUpdate('....')
    treeInstance.delete('....')
  }
})

模板

<ui-tree tree="{{someData}}" />

Pager.getElementsById

仿浏览器js的方法,使用此方法可以拿到指定Id的组件实例

onReady(){
  const inst = Pager.getElementsById('some id')
}

Pager.lib

通用方法库,包含isString, isObject等方法

const Pager = require('compoents/aotoo/core')
const lib = Pager.lib
Pager({
  onReady(){
    let data = this.data.testData
    if (lib.isString(data)) {
      ....
    }
    if (lib.isObject(data)) {
      ....
    }
  }
})

Pager.toolkit

通用方法库,包含upload, auth, post, get等系统方法的封装,基本上都是异步 调用方法,在aotoo-hub的环境中支持async/await

const Pager = require('compoents/aotoo/core')
const toolkit = Pager.toolkit
Pager({
  async onReady(){
    // ajax的POST
    toolkit.post(url, {}).then()
    await  toolkit.post(url, {})

    // ajax的GET
    toolkit.get(url, {}).then()
    await  toolkit.get(url, {})

    // 上传
    toolkit.upload(url, {}).then()
    await  toolkit.upload(url, {})

    // 认证,可以做微信的多种认证
    toolkit.auth(type).then()

    // 云数据库接口调用方法
    toolkit.cloud(url, {}).then()
  }
})

Pager.alert

官方弹窗组件的封装

const Pager = require('compoents/aotoo/core')
Pager({
  onReady(){
    // 简易弹出窗口
    Pager.alert('这里是一个弹窗')

    // 简易弹出窗口 + 确认回调
    Pager.alert('带确认回调的弹窗'
    ,function(){

    })

    // 简易弹出窗口 + 确认回调 + 取消回调
    Pager.alert('带确认/取消回调的弹窗'
    ,function(){
      // 确认回调
    }
    ,function(){
      // 取消回调
    })
  }
})

Pager.hooks

钩子方法类,全局类钩子方法,该方法过于强大(哈哈),有另开篇章说明

const Pager = require('components/aotoo/core')
const hooks = Pager.hooks

// 1) 内存型实例
const hookInstence = hooks('some key')  

// 2) 内存 + localStorage
const hookInstence = hooks('some key', true)  

// 3) 内存 + localStorage + lru缓存
// 下列设置数据超出50条后会依据算法清除老旧、无用数据
const hookInstence = hooks('some key', {
  localstorage: true,
  max: 50
})

数据部分

hookInstence.setItem

缓存数据

// 如果hookInstence附带localStorage,则有一份数据会保存到localStorage中
hookInstence.setItem(key, value)

// 设置有效期
const expireTime = 3 * 60 * 60 * 1000  // 3小时候过期
const expireTime = 3 * 24 * 60 * 60 * 1000  // 3天后过期
hookInstence.setItem(key, value, expireTime)

hookInstence.getItem

获取缓存数据

hookInstence.getItem(key)

hookInstence.append

追加/新建缓存数据(OBJECT/ARRAY)

hookInstence.append(key, value)

hookInstence.delete

删除指定缓存数据

hookInstence.delete(key)

钩子部分

hookInstence.on

挂载钩子方法,同一个key允许挂载多个方法

hookInstence.on(key, callback)

hookInstence.off

撤销钩子方法

// 撤销key上的所有方法
hookInstence.off(key)

// 撤销key上某一个钩子的方法
hookInstence.off(key, funName)

hookInstence.once

只允许挂一个方法,以once方法最后挂载为有效

// 撤销key上的所有方法
hookInstence.once(key, callback)

hookInstence.one

只允许挂一个方法,运行后自动销毁

// 撤销key上的所有方法
hookInstence.one(key, callback)

hookInstence.emit

执行指定的钩子,只允许传递一个JSON类型的参数

// 撤销key上的所有方法
hookInstence.emit(key, {})

hookInstence.fire

执行指定的钩子,只允许传递一个JSON类型的参数,执行完成后,销毁所有挂载方法

// 撤销key上的所有方法
hookInstence.fire(key, {})

销毁

hookInstence.destory

清除内存所有缓存数据

hookInstence.destory()

hookInstence.clear

清除内存所有缓存数据

hookInstence.clear(key)

继承类

自定义组件继承类

Pager.commonBehavior

组件通用方法

Pager.commonMethodBehavior

组件通用方法方法,集成了对tap, longpress, touch, aim的方法解析

Pager.baseBehavior

commonBehavior 与 commonMethodBehavior的合并

Pager.itemComponentBehavior

继承item的组件构成方法

Pager.listComponentBehavior

继承list的组件构成方法

Pager.treeComponentBehavior

继承tree的组件构成方法