了解小程序开发库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演示

原文地址:https://www.cnblogs.com/xquery/p/12110549.html

时间: 2024-11-06 03:34:40

了解小程序开发库xquery的相关文章

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

[转]灯灯小程序开发手记:仿今日头条(上)

本文转自:http://www.jianshu.com/p/a1e0b8abb12d 写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变.因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章<记一次小程序开发过程>中,灯灯大致写了下自己第一次开发小程序的感受和流程.这一次灯灯会详细记录下自己制作一个小程序的思路.遇到的问题.涉及到的代码等和大家分享.    视频教程地址:http://study.163.com/course/introduction.htm?cour

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)

很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现的是基础功能.但是,可以给学习者很便捷的体验和很好的启发. 不过,随着微信平台和云服务的发展,真担心,程序猿会失业! 目录 一.微信小程序申请 二.服务器设置(申请.部署.域名) 1.申请服务器 2.部署服务器 3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参

小程序开发运营必看:微信小程序平台运营规范

一.原则及相关说明 ? 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ? 微信团队一直致力于将微信打造成一个强大的.全方位的服务工具.在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务.功能的平台.通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力.运营环境和规则体系,进而帮助更多的企业和服务提供

一号旺铺:国内第一个专注于微信小程序开发的后端云产品

启航 一号旺铺是天玑旗下继一号旺铺(wangpu1.com,媒体和小程序商店)后又一个基于微信生态的核心产品. 6 月 13 日,「一号旺铺」上线公测了. 「一号旺铺」www.wangpu1.com,是国内第一个专注于微信小程序开发的 BaaS(Backend as a Service)产品,它可以让开发者更快.更轻松地做出优美.稳定的小程序,且不失灵活性.爱范儿技术团队为此努力了 100 天,夜以继日,没有鸡腿. 爱范儿 CTO 在朋友圈写道:一号旺铺本是为了解决内部需求而设计的 BaaS 平

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍 微信小程序设计指南 微信小程序开发文档 微信小程序运营规范 微信小程序开发者社区 三.微信小程序解决方案: 微信小程序会话管理场景 微信小程序文件上传下载应用场景 微信小程序WebSocket长连接应用场景 微信小程序视频应用场景 四.代码: 会话管理场景 文件上传下载应用场景

微享商盟小程序开发系统框架分析

从微信小程序发布这段时间,陆陆续续开发了不少小程序相关的项目,总结了一些通用性的组件,但是对于小程序如何做测试,依然是一头雾水,直到做了不少的项目,积累的一些经验和开源库之后才理清如何做测试,下面将会介绍如何对小程序做UI测试和单元测试. 微信小程序微享商盟具体做什么? --举例,顾客到某水果店购买商品后通过微信小程序共享链支付成功后进入微信小程序微享商盟小程序,该小程序里面会显示消费者的消费金额,奖励金额和已经到账金额,之后其他消费者也到该水果店消费,那微信小程序微享商盟系统会做一个时间排序,

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com