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文本
- 组件方式
- 嵌入方式
嵌入方式比较简单,下面示例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演示
原文地址:https://www.cnblogs.com/xquery/p/12110549.html
时间: 2024-11-06 03:34:40