安装小程序开发库xquery及组件

安装xquery及使用它的组件

xquery一套独立的小程序开发工具库，无侵入性，可融入已有项目中

下载或者克隆github

github.com/webkixi/aot…
或 github 搜索 aotoo-xquery

目录结构

components 
    ├─ aotoo ✔︎核心代码必须有
    ├─ actionSide  弹窗组件
    ├─ form  表单组件
    ├─ calendar  日历组件
    ├─ markit  文档组件
    ├─ templates ✔︎模板
    │
   css  日历、文档、表单样式
    │
  app.json  注册全局组件

打钩项必须导入项目，组件可增减选择

引用及使用组件

wxml

<!-- 日历组件 -->
<ui-calendar dataSource="{{calendarConfig}}" />

js
使用Pager代替小程序的Page，Pager与Page保持相同语法

const Pager = require('components/aotoo/core/index')
Pager({
  data: {
    calendarConfig: {  // 日历组件配置
      ?id: 'calendar',
      mode: 1,  // 纵向日历
      type: 'range',  // 区域选择
      tap: 'onTap', // page响应事件
      total: 365, // 定义从今天开始一年事件
      rangeCount: 28,  // 区选区间28天
      festival: true, // 开启节假日显示
      value: ['2019-12-24', '2020-01-05'],  // 默认值
    }
  }, 
  onTap(e){
    console.log(e)
  }
})

调用实例及使用实例方法

在小程序中，xquery引入了getElementsByid的方法，更接近web开发，同时兼容小程序 selectComponent方法

const Pager = require('components/aotoo/core/index')
Pager({
  onReady(){
    let $c = this.getElementsById('calendar') // 抓取日历组件的实例  
    let value = $c.getValue()  // 获取选中的日期
  }
})

现在就可以开始使用xquery了

了解更多

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

小程序demo演示