Based on native applets, XQuery is a jquery-like applets development library that is easy to reference without breaking the native applets pattern.

  • Component element selection is supported
  • Convenient structure nesting
  • Weak template, easy maintenance
  • Event methods are repackaged to support Query passing parameters
  • Support hook methods
  • LRU cache is supported
  • MARKDOWN rich text is supported
  • Support HTML rich text

Non-invasive Pager

Replace the applet Page with the Pager method, otherwise the same. Non-invasive syntax

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {...}
    },
    onReady(){ ... }
})
Copy the code

Instance grab

Similar to grabbing HTML DOM element objects using getElementsById in Web development, the following is implemented for item component objects

WXML template

<ui-item item="{{itemElement}}" />
Copy the code

js

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {
            ? id: 'item-id'.title: 'This is an item component.'
        }
    },
    onReady(){
        let $item = this.getElementsById('item-id')
        $item.addClass('active')}})Copy the code

OnReay is similar to body. OnLoad on the Web, where all dom elements are ready to be grabbed using getElementsById

Events encapsulated

Query passing parameters is closer to web front-end development (event encapsulation is only effective if components are defined based on Pager and XQuery, and does not affect native development)

WXML template

<ui-item item="{{itemElement}}" />
Copy the code

js

Pager({
    data: {
        itemElement: {
            title: 'button'.tap: 'onTap? The username = zhang '  // Allow the query argument
            
            // tap => bind: alias of tap
            // aim => catch: alias of tap
            // longpress => bind: alias of longpress
            // longtap => bind: alias of longtap
            // touchstart => bind:touchstart alias
            // touchmove => bind: alias of touchmove
            // touchend => bind: alias of touchend
            // touchcancel => bind: alias of touchCancel
            // catchlongpress => catch: catchpress alias
            / /... The same goes for other catch methods
        }
    },
    onTap(e, param, inst){
        // e => native event event object
        // param => {username: ' '}
        // inst => < uI-item /> Component instance object, support update, addClass, removeClass and other methods
        
        inst.update({
            title: param.username+'button'
        }, function(){
            let $data = inst.getData()
            console.log($data.title)  // Get a button for this})}})Copy the code

Data caching and data expiration

const Pager = require('components/aotoo/core/index')
const lib = Pager.lib
const dataEntity = lib.hooks('DATA-ENTITY'.true) // true: cache data to storage

onReay(){
    // Cache user information for one day
    dataEntity.setItem('names', {name: ' '.sex: ' '}, 24*60*60*1000)
    setTimeout((a)= >{
        let namesData = dataEntity.getItem('names')
        console.log(namesData)  // {name: '', sex: ''}
    },3000)}Copy the code

LRU cache Settings

The local cache of small programs is 10M and the memory is 128M, so the local cache of data is limited, such as images, which need to use LRU cache mechanism to manage images/files

const Pager = require('components/aotoo/core/index')
const lib = Pager.lib
const imgEntity = lib.hooks('IMG-ENTITY', {
    localstorage: true.// Enable local cache
    expire: 24 * 60 * 60 * 1000.// The expiration time is 1 day for all cached data
    max: 50 // Maximum cache number is 50, meaning that the current hooks instance will only store the 50 most frequently used
}) 

onReay(){
    // Cache user information for one day
    // img-src => The specific address of the image or a unique address
    
    // Mounts a method when the hook stores data
    imgEntity.setItem('image-src', {img: 'cloude://.... '})
    saveImgToLocal('cloude://... ')
    setTimeout((a)= >{
        let imgsData = imgEntity.getItem('image-src')
        console.log(imgsData)  // {img} || undefined
        if(! imgsData) { imgEntity.setItem('image-src', {img: 'cloude://.... '})
            saveImgToLocal('cloude://... ')}},3000)}Copy the code

Markdown support

There are two ways to support markdown text

  1. Component mode
  2. Embed mode

The embedding is simple, and the following example of Markdown text is implemented in this way

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {
            "@md": Components developed based on xQuery base classes can be directly embedded using Macd documents} }, onReady(){ ... }})Copy the code

HTML supports

The front end takes the rich text data from the back end and converts it directly into the output of a small program template structure. The following example HTML text is embedded

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {
            "@html": ` 
      
 
        
       ...  
       

 
       

         ... . 
       
 
      
 `} }, onReady(){ ... }})Copy the code

Making address:Github.com/webkixi/aot…

Small program demo demo