了解小程序开发库xquery

Posted 2021-03-19 xquery

xquery基于原生小程序，是一套类似于jquery的小程序开发工具库，方便引用且无破坏小程序原生模式。

• 支持组件元素选取
• 方便的结构嵌套
• 弱模板化，方便维护
• 事件方法重新封装，支持query传递参数
• 支持钩子方法
• 支持LRU缓存
• 支持MARKDOWN富文本
• 支持html富文本

github地址

无侵入的Pager

使用Pager方法替换小程序Page，其他用法一致。无侵入性语法

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

实例抓取

类似于在web开发中可以使用getElementsById抓取html dom元素对象，下列针对item组件对象实现

wxml模板

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

js

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {
            $$id: 'item-id',
            title: '这是一个item组件'
        }
    },
    onReady(){
        let $item = this.getElementsById('item-id')
        $item.addClass('active')
    }
})

onReay类似于web中的body.onLoad，所有dom元素都已经准备妥当，使用getElementsById去抓取实例

事件封装

query传递参数更贴近web前端开发（事件封装是基于Pager及xquery定义的组件才有效，不会影响原生开发）

wxml模板

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

js

Pager({
    data: {
        itemElement: {
            title: '按钮',
            tap: 'onTap?username=张三'  // 允许query参数
            
            // tap => bind:tap的别名 
            // aim => catch:tap的别名
            // longpress => bind:longpress的别名
            // longtap => bind:longtap的别名 
            // touchstart => bind:touchstart 别名
            // touchmove => bind:touchmove的别名
            // touchend => bind:touchend的别名
            // touchcancel => bind:touchcancel的别名
            // catchlongpress => catch:longpress的别名
            // ...其他catch方法以此类推
        }
    },
    onTap(e, param, inst){
        // e => 原生event事件对象
        // param => {username: '张三'}
        // inst => <ui-item />组件实例对象，支持update, addClass, removeClass等方法
        
        inst.update({
            title: param.username+'的按钮'
        }, function(){
            let $data = inst.getData()
            console.log($data.title)  // 张三的按钮
        })
    }
})

数据缓存及数据过期

const Pager = require('components/aotoo/core/index')
const lib = Pager.lib
const dataEntity = lib.hooks('DATA-ENTITY', true) // true表示缓存数据到storage  

onReay(){
    // 将用户信息缓存一天
    dataEntity.setItem('names', {name: '', sex: ''}, 24*60*60*1000)
    setTimeout(()=>{
        let namesData = dataEntity.getItem('names')
        console.log(namesData)  // {name: '', sex: ''}
    },3000)
}

LRU缓存设置

小程序本地缓存10M，内存128M，因此数据缓存到本地受到很多限制，比如图片，需要使用LRU缓存机制来对图片/文件进行管理

const Pager = require('components/aotoo/core/index')
const lib = Pager.lib
const imgEntity = lib.hooks('IMG-ENTITY', {
    localstorage: true,  // 开启本地缓存
    expire: 24 * 60 * 60 * 1000,  // 过期时间为1天，所有缓存的数据
    max: 50 // 最大缓存数为50条，即当前hooks实例只会存储最常用的50条数据
}) 

onReay(){
    // 将用户信息缓存一天
    // img-src => 图片的具体地址或者一个唯一地址
    
    // 挂载一个方法，当该钩子存储数据时
    imgEntity.setItem('image-src', {img: 'cloude://....'})
    saveImgToLocal('cloude://...')
    setTimeout(()=>{
        let imgsData = imgEntity.getItem('image-src')
        console.log(imgsData)  // {img} || undefined
        if (!imgsData) {
            imgEntity.setItem('image-src', {img: 'cloude://....'})
            saveImgToLocal('cloude://...')
        }
    },3000)
}

markdown支持

有两种方式支持markdown文本

1. 组件方式
   
2. 嵌入方式

嵌入方式比较简单，下面示例markdown文本以嵌入方式实现

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {
            "@md": `
## 马克党标题  
基于xquery的基类开发的组件可以直接内嵌使用马克党文档  
`
        }
    },
    onReady(){ ... }
})

html支持

前端从后端拿去富文本数据，直接转化成小程序模板结构输出，下面示例html文本以嵌入方式实现

const Pager = require('components/aotoo/core/index')
Pager({
    data: {
        itemElement: {
            "@html": `
<div class="container">
    <img src="http://..." />
    <span>...</span>
    <br />
    <section>
        ...
        ...
    </section>
</div>
`
        }
    },
    onReady(){ ... }
})

github地址：https://github.com/webkixi/aotoo-xquery

小程序demo演示