瞭解小程序開發庫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演示