Giter VIP home page Giter VIP logo

aotoo-xquery's Introduction

AOTOO-XQUERY

该项目是一个精简小程序项目,包含小程序一些好用的UI组件及其演示demo,不定期更新,欢迎关注并在github上点赞我们

  • 基于原生微信小程序
  • 动态模板构建
  • 内置支持html、markdown

小程序示例

miaoui

miaoui

魔芋日历

魔芋日历

完整DEMO列表

  • 多形态日历组件
  • 通用型筛选列表
  • form表单
  • markdown/html组件
  • 怎么弹都可以的弹窗组件
  • 支持震动的评分组件
  • 下拉菜单
  • 双向slider
  • 索引列表
  • 腾讯地址定位
  • 水果转盘
  • 折叠面板
  • 双栏分类导航(左右)
  • 双栏分类导航(上下)
  • 刮刮卡
  • 导航球
  • 导航面板
  • 抽奖转盘
  • 手势锁

如何使用

  1. 使用 aotoo-hub 脚手架远程安装queryui(基于webpack编译)
  2. clone本项目,使用微信小程序开发工具打开
  3. 引入核心源码在其他项目中使用,查看下例说明

源码目录

css         日历、文档、表单等样式
pages       基础示例
app.json    注册全局组件
components 
    ├─ aotoo 核心代码必须有 ✔︎
    ├─ actionSide  弹窗组件
    ├─ form  表单组件
    ├─ calendar  日历组件
    ├─ markit  文档组件
    ├─ modules ✔︎  # 该目录下的文件为组件合集
    ├─ templates 模板 ✔︎

核心目录/文件

融合项目中必须引入以下核心目录、文件

components 
    ├─ aotoo 核心代码必须有 ✔︎
    ├─ markit  文档组件 ✔︎
    ├─ templates 模板 ✔︎

必须在app.json中定义核心全局组件

"usingComponents": {
  "ui-item": "/components/aotoo/item/index",
  "ui-list": "/components/aotoo/list/index",
  "ui-tree": "/components/aotoo/tree/index",
  "ui-markit": "/components/markit/index"
}

内置组件

  1. markdown
  2. html
  3. item
  4. list
  5. tree
  6. img

内嵌组件

内嵌组件可以在配置中方便插入其他组件,方便构建复杂的结构,所有内置组件均可作为内嵌组件。也可以自定义内嵌组件

  1. @item
  2. @list
  3. @tree
  4. @url
  5. @md
  6. @html

item组件中嵌入列表组件

Pager({
  data: {
    itemConfig: {
      title: '列表标题',
      "@list": {
        listClass: 'list-class-name'
        data: [...]
      }
    }
  }
})

/*
wxml模板
<ui-item item="{{itemConfig}}" />
*/

item组件中嵌入markdown组件

Pager({
  data: {
    itemConfig: {
      title: '列表标题',
      "@md": {
        content: `...`
      }
    }
  }
})

/*
wxml模板
<ui-item item="{{itemConfig}}" />
*/

随意支持,谢谢

DEMO小程序

aotoo-xquery's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.