aui 是一套基於原生javascript開發的移動端UI框架。包含經常使用js API(如:字符校驗、本地定時存儲、數組對象處理、ajax原生封裝、設備信息獲取、手勢事件...);插件(如:loading加載、dialog模態框、toast消息提示、picker多級聯動...);UI組件(如:button按鈕、tag標籤、card卡片...);經常使用模板(如:側滑菜單、加入購物車動畫、星級評價、圖片上傳預覽裁剪、選項卡...)。javascript
一、標準化,產品化
二、更多複用,更快效率
三、多人協做,更加統一
四、維護方便
五、易於使用
六、減小UI設計時間css
查看演示:https://aui-js.github.io/aui/index.htmlhtml
看雲在線文檔地址:https://www.kancloud.cn/chen-wanchun/aui-jsjava
Github倉庫地址:https://github.com/aui-js/auigit
extend 對象合併(可實現多層對象深度合併)github
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
opts | Object | 原始參數 | 無 | 是 |
opt | Object | 新參數 | 無 | 是 |
override | Boolean | 是否合併重置 | 無 | 否 |
this.aui.extend("原始參數", "新參數", true);
isDefine 判斷字符串是否爲空ajax
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
str | string | 字符串 | 無 | 是 |
this.aui.isDefine(str);
space 刪除字符串中指定字符json
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
str | string | 字符串 | 無 | 是 |
flag | Boolean | 是否去除先後空格[false: 去除先後空格 \ true: 去除所有空格] | 無 | 否 |
this.aui.space(str, true);
replaceStr 去除字符串中空格小程序
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
str | string | 字符串 | 無 | 是 |
assignStr | string | 指定字符串 | 無 | 否 |
this.aui.replaceStr('原字符串', '指定字符');
uniq 數組去重微信小程序
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
array | array | 去重數組 | 無 | 是 |
this.aui.uniq(array);
getUrlstr 截取URL中參數(可獲取中文內容)
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
str | string | 參數名稱 | 無 | 是 |
this.aui.getUrlstr('id');
random 生成隨機數
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
Min | number | 最小值 | 無 | 是 |
Max | number | 最大值 | 無 | 是 |
this.aui.random(10, 100);
copy 複製到剪切板
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
str | string | 要複製的文本 | 無 | 是 |
this.aui.copy('213421');
checkIsDeveloper 驗證是不是開發者
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
isDeveloper | Boolean | 是不是開發者 | 無 | 否 |
this.aui.checkIsDeveloper(false);
setLocal 本地存儲(可設置存儲時間)
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
key | string | 存儲的名稱 | 無 | 是 |
value | string | 存儲的內容 | 無 | 是 |
time | number | 存儲時間 | 無 | 否 |
this.aui.setLocal('items', items, 1*24*60*60); //獲取緩存 this.aui.getLocal('items'); //移除緩存,通常狀況不手動調用,緩存過時自動調用 this.aui.removeLocal('items'); //清空全部緩存 this.aui.clearLocal();
import 引入 js / css 文件
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
url | string / array | 文件path | 無 | 是 |
this.aui.import('aui.js') this.aui.import(['aui.js', 'aui.css'])
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
type | number | 1: 經常使用風格; 2: 點擊按鈕後在按鈕內顯示加載動畫; 3: 四個方塊旋轉; 4: 圓點放大縮小動畫(全屏首次加載過分動畫); 5: 圓點背景過分動畫-微信小程序效果(全屏首次加載過分動畫) |
1 | 否 |
msg | string | 提示內容 | '' | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
direction | string | 橫向("row")或縱向("col")控制 | 'col' | 否 |
theme | number | type=3時,控制全屏或小窗展現(1:小窗; 2:全屏) | 1 | 否 |
style | object | { bg: '背景', color: '文字顏色', maskBg: '遮罩層顏色', zIndex: '層級' } |
'' | 否 |
顯示loading加載:
aui.showload({ msg: "加載中" });
隱藏loading加載:
aui.hideload();
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
msg | string | 提示內容 | '' | 是 |
icon | string | 圖標 | '' | 否 |
direction | string | 橫向("row")或縱向("col")控制 | 'col' | 否 |
location | string | (icon參數未配置時可配置)位置 bottom:位於底部,從底部彈出顯示 middle:位於頁面中心位置 |
'bottom' | 否 |
duration | number | 顯示時間 | 2000 | 否 |
示例:
aui.toast({ icon: "../../img/success.png", msg: "支付成功!", direction: "col" },function(ret){ });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
title | string | 標題 | '' | 否 |
msg | string | 提示內容 | '' | 是 |
btns | arr | 按鈕,默認按鈕爲「肯定」 分別可設置btns值爲 1:['按鈕1', '按鈕2'] 2:[{name: '按鈕1', color: ''},{name: '按鈕2', color: ''}] |
["肯定"] | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉模態彈窗 | true | 否 |
theme | number | 主題樣式,控制模態彈窗按鈕顯示風格(1: 大按鈕; 2: 小按鈕-居右分佈; 3: 按鈕寬度等於父級寬度100%,適用於按鈕文字過多狀況) | 'col' | 否 |
items | arr | prompt--input框列表配置 [{label: '姓名:', type: 'text', value: '(可選)', placeholder: '請輸入姓名'}] |
[] | 否 |
duration | number | 顯示時間 | 2000 | 否 |
style | object | { w: '', //--可選參數,模態窗寬度,默認80% h: '', //--可選參數,模態窗高度,默認"auto"自適應 bg: '',//--可選參數,模態窗背景色,默認白色 zIndex: '', //--可選參數,模態窗層級 title: { bg: "", color: "", lineHeight: "", textAlign: "", fontSize: "", padding: "" }} |
'' | 否 |
一、alert單按鈕提醒彈窗
aui.alert({ title: "提示", //可選 msg: "您點擊了alert單按鈕模態彈窗!", mask: true, touchClose: true, //可選 btns: ["肯定"], //可選 //或btns: [{name: '按鈕1', color: '#f00'},{name: '按鈕2', color: '#00f'}], //可選 theme: 1, //可選 style: { //可選 w: "75%", h: "auto", bg: '#FFF', zIndex: 999, animate: "aui-scale-in-tosmall-dialog", title: { bg: "#FFF", color: "#333", lineHeight:"55px", fontSize: "17px", textAlign: "center", padding: "0px" } } },function(ret){ console.log(ret.index); if(ret.index == 0){ aui.toast({msg: "您點擊了肯定"}); } });
二、confirm雙按鈕提醒彈窗
aui.confirm({ msg: "您點擊了confirm雙按鈕模態彈窗!", btns: ["取消", "肯定"], },function(ret){ console.log(ret.index); if(ret.index == 1){ aui.toast({msg: "您點擊了肯定"}); } });
三、delete刪除提醒彈窗
aui.delete({ msg: "您點擊了delete刪除模態彈窗!", btns: ["取消", "刪除"], },function(ret){ console.log(ret.index); if(ret.index == 1){ aui.toast({msg: "您點擊了刪除"}); } });
四、prompt輸入彈窗
aui.prompt({ items: [{ label: '姓名:', type: 'text', value: '', placeholder: '請輸入姓名' },{ label: '年齡:', type: 'number', value: '', placeholder: '請輸入年齡' }], btns: ["取消", "肯定"], },function(ret){ console.log(ret.data); if(ret.index == 1) { aui.alert({ title: "輸入結果:", msg: "姓名:" + ret.data[0] + "年齡:" + ret.data[1]+"", btns: ["肯定"], }, function(ret){ if(ret.index == 0){ aui.toast({msg: "您點擊了肯定"}); } }); } });
五、confirm帶圖標雙按鈕提醒彈窗
aui.confirm({ msg: "" +"" +"帶圖標模態彈窗" +"", btns: ["取消", "肯定"], },function(ret){ console.log(ret.index); if(ret.index == 1){ aui.toast({msg: "您點擊了肯定"}); } });
六、多按鈕彈窗
aui.confirm({ msg: "您點擊了多按鈕彈窗!", btns: [{name: '殘忍拒絕', color: ''},{name: '再逛逛', color: ''}, {name: "返回首頁", color: "#909090"}], //可選 theme: 3, //可選 },function(ret){ console.log(ret.index); if(ret.index == 0){ aui.toast({msg: "您點擊了殘忍拒絕"}); } else if(ret.index == 1){ aui.toast({msg: "您點擊了再逛逛"}); } else if(ret.index == 2){ aui.toast({msg: "您點擊了返回首頁"}); } });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
items | arr | 菜單列表[{name: "", color: "", fontSize: "", textAlign: ""}] | [] | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉模態彈窗 | true | 否 |
cancle | string | 取消按鈕 | '' | 否 |
location | string | 位置 bottom:位於底部,從底部彈出顯示 middle:位於頁面中心位置 |
'bottom' | 否 |
theme | number | 主題樣式(1: 非全屏寬度; 2: 全屏寬度) | 1 | 否 |
示例:
aui.actionSheet({ title: '上傳圖片', mask: true, touchClose: true, items: [{ name: "從相冊選擇", },{ name: "拍照" }], cancle: "取消", theme: 1, location: "bottom" },function(ret){ console.log(ret.index); });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
items | arr | 菜單列表[{name: "", icon: "", iconColor: "", img: ""}] | [] | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉模態彈窗 | true | 否 |
cancle | string | 取消按鈕 | '' | 否 |
location | string | 位置 bottom:位於底部,從底部彈出顯示 middle:位於頁面中心位置 |
'bottom' | 否 |
theme | number | 主題樣式(1: 非全屏寬度; 2: 全屏寬度) | 1 | 否 |
示例:
aui.actionMenu({ title: '分享至', mask: true, touchClose: true, items: [ {name: "微信", img: "../../img/weixin.png"}, {name: "朋友圈", img: "../../img/pengyouquan.png"}, {name: "QQ", img: "../../img/QQ.png"}, {name: "微博", img: "../../img/weibo.png"} ], cancle: "取消", theme: 1, location: "bottom" },function(ret){ console.log(ret.index); });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
items | arr | 菜單列表[{name: "", color: "", icon: "iconfont icongfont-right", iconColor: '', img: "", fontSize: "", textAlign: ""}] | [] | 否 |
mask | boolean | 是否顯示遮罩蒙版 | false | 否 |
touchClose | boolean | 觸摸遮罩是否關閉模態彈窗 | true | 否 |
location | string | 位置 top: 設置彈窗顯示到觸發元素「上」方; bottom: 設置彈窗顯示到觸發元素「下」方; |
'top' | 否 |
示例:
aui.popover.open({ warp: '.aui-header-right', items: [ {name: '微信', img: '../../img/weixin.png'}, {name: '朋友圈', img: '../../img/pengyouquan.png'}, {name: 'QQ', img: '../../img/QQ.png'}, {name: '微博', img: '../../img/weibo.png'} ], mask: true, location: 'bottom' },function(ret){ console.log(ret); aui.toast({msg: ret.el.querySelector("span").innerHTML}); })
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
title | string | 標題 | '' | 否 |
layer | number | 控制幾級聯動 | 1 | 否 |
data | arr | 數據 如:[{text: '', adcode: '', children: [{text: '', adcode: ''}]}] | [] | 否 |
示例:
aui.picker.open({ title: '選擇區域', layer: 3, data: cityData, //城市數據 select: function(ret){ console.log(ret); } },function(ret){ console.log(ret); if(ret.status == 1){ aui.picker.close(function(){ aui.alert({msg: ret.data.text + " " + ret.data.children.text + ' ' + ret.data.children.children.text}); }); } })
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉模態彈窗 | true | 否 |
image | string | 廣告圖片地址 | '' | 是 |
示例:
aui.poster({ image: 'https://xbjz1.oss-cn-beijing.aliyuncs.com/upload/default/share.png' });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
content | string | 側滑菜單元素 | '' | 是 |
moves | arr | 跟隨拖動元素; [header——頁面頭部, .content——頁面內容部分] (moveType設置爲"all-move" 或 "menu-move"時,此參數必須配置 |
[] | 是 |
moveType | string | ['main-move': '主頁面移動,側滑菜單固定'] ['menu-move': '側滑菜單移動,主頁面固定'] ['all-move': '主頁面+側滑菜單都移動'] |
'main-move' | 否 |
position | string | 側滑菜單初始化位置,默認位於頁面左側 [left: '左側', right: '右側'] | 'left' | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
maskTapClose | boolean | 觸摸遮罩是否關閉側滑菜單 | true | 否 |
speed | number | 打開、關閉頁面速度[值越大,速度越快] | 10 | 否 |
drag | object | { use: true, //--可選參數,是否開啓拖動打開、關閉菜單[true: 開啓 , false: 關閉] start: null, //--可選參數,開始拖動回調 move: null, //--可選參數,拖動中回調 end: null, //--可選參數,拖動結束 } |
{} | 否 |
style | object | 設置樣式 | { w: '80vw', h: '100vh', bg: '#333' } |
否 |
初始化:
aui.sidemenu.init({ warp: '.aui-container', content: '#aui-sidemenu-wapper', position: 'left', moveType: 'main-move', moves: ['.aui-container'], mask: true, maskTapClose: true, drag: { use: true, //start: _this.dragcallback, //move: _this.dragcallback, end: function(ret){ console.log(ret) } }, style: { w: '70vw', h: '100vh', bg: '#333' }, }).then(function(ret){ console.log(ret) });
設置配置數據:
aui.sidemenu.setData({ moveType: 'all-move', }).then(function(ret){ //console.log(ret) });
打開側滑菜單:
aui.sidemenu.open({ moveType: 'main-move', speed: 10, }).then(function(ret){ console.log(ret) });
關閉側滑菜單:
aui.sidemenu.close({speed: 10}).then(function(ret){ console.log(ret) });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
data | arr | 菜單列表[{value: '', text: ''}] | [] | 是 |
layer | number | 控制組件爲幾級 | 1 | 是 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉側滑菜單 | true | 否 |
checkedMore | boolean | 是否多選(多選限制最後一級可多選) | false | 否 |
before | function | 打開彈窗前執行 | null | 否 |
select | function | 一級以上點擊選擇後執行,獲取下級數據並return | null | 否 |
style | object | 樣式 | { width: '', height: '', top: '', left: '', padding: '', background: '', borderRadius: '', itemStyle:{ textAlign: '', fontSize: '', color: '', isLine: false, //是否顯示分割線 } } |
否 |
打開:
aui.selectMenu.open({ warp: '.orderby-items', layer: layer, // 1,2,3... data: [ {value: '0', text: '昨天'}, {value: '1', text: '本週'}, {value: '2', text: '上週'}, {value: '3', text: '本月'}, {value: '4', text: '上月'}, ], checkedMore: true, select: function(ret){ //點擊時獲取下級數據 //console.log(ret); //{value: '0', text: '昨天'} if(ret.pindex == 0){ //ajax -- 參數如ret.value var data = [ {value: '1', text: '1點'}, {value: '2', text: '2點'}, {value: '3', text: '3點'}, {value: '4', text: '4點'}, {value: '4', text: '5點'}, {value: '4', text: '6點'}, {value: '4', text: '7點'}, {value: '4', text: '8點'}, {value: '4', text: '9點'}, {value: '4', text: '10點'}, {value: '4', text: '11點'}, {value: '4', text: '12點'}, ]; } else if(ret.pindex == 1){ var data = [ {value: '0', text: '10分'}, {value: '1', text: '20分'}, {value: '2', text: '30分'}, {value: '3', text: '40分'}, {value: '4', text: '50分'}, {value: '4', text: '60分'}, ]; } return data }, }, function(ret){ isShowModal = false; for(var i = 0; i < is.parentNode.querySelectorAll('.orderby-item').length; i++){ is.parentNode.querySelectorAll('.orderby-item')[i].classList.remove('active'); } });
關閉
aui.selectMenu.close(function(){ if(ret && ret.status == 0){ console.log(ret); if(ret.data.length > 0){ is.classList.add("selected"); is.querySelector("span").innerText = ''; for(var i = 0; i < ret.data[ret.data.length-1].length; i++){ if(i != ret.data[ret.data.length-1].length - 1){ is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text + ','; } else{ is.querySelector("span").innerText += ret.data[ret.data.length - 1][i].text } } } else{ is.classList.remove("selected"); is.querySelector("span").innerText = '三級列表'; } } });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
type | string | 類型: "number"—純數字鍵盤 "point"—帶小數點鍵盤 "idcard"—輸入身份證號鍵盤 |
'number' | 否 |
value | string | 鍵盤輸入值 | '' | 否 |
num | number | 控制小數點後保留兩位 | 2 | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉側滑菜單 | true | 否 |
示例:
aui.keypad.open({ type: 'number', //一、number | 二、point | 三、idcard mask: false, value: document.querySelector('#text1').value }, function(ret){ console.log(ret); document.querySelector('#text1').value = ret.result; });
預覽
參數 | 類型 | 描述 | 默認值 | 必選 |
---|---|---|---|---|
warp | string | 父容器元素 | 'body' | 否 |
mask | boolean | 是否顯示遮罩蒙版 | true | 否 |
touchClose | boolean | 觸摸遮罩是否關閉側滑菜單 | true | 否 |
autoFocus | boolean | 是否自動獲取焦點 | false | 否 |
events | arr | 配置監聽事件(錄音,選擇附加功能...等事件監聽) | [] | 否 |
record | object | 錄音功能配置 | record: { use: true, //是否開啓錄音功能 MIN_SOUND_TIME: 800 //錄音最短期限制 } |
否 |
emotion | object | 表情功能配置 | emotion: { use: true, //是否開啓表情功能 path: '' //.json文件路徑 pageHasNum: 27, //一頁顯示按鈕數量(7 * 4 - 1) } |
否 |
extras | object | 附加功能配置 | extras: { use: true, //是否開啓附加功能 pageHasNum: 8, //一頁顯示按鈕數量(4 * 2) btns: [ /* {title: '', icon: '', img: ''} */], } |
示例:
aui.chatbox.init({ warp: 'body', autoFocus: true, record: { use: true, }, emotion: { use: true, path: '../../img/chat/emotion/', file: 'emotion.json' }, extras: { use: true, btns: [ {title: '相冊', icon: 'iconimage'}, {title: '拍攝', icon: 'iconcamera_fill'}, {title: '語音通話', icon: 'iconvideo_fill'}, {title: '位置', icon: 'iconaddress1'}, {title: '紅包', icon: 'iconredpacket_fill'}, {title: '語音輸入', icon: 'icontranslation_fill'}, {title: '個人收藏', icon: 'iconcollection_fill'}, {title: '名片', icon: 'iconcreatetask_fill'}, {title: '文件', icon: 'iconmail_fill'} ], }, events: ['recordStart', 'recordCancel', 'recordEnd', 'chooseExtrasItem', 'submit'], }, function(){ }) //開始錄音 aui.chatbox.addEventListener({name: 'recordStart'}, function(ret){ console.log(ret); //aui.toast({msg: ret.msg}) }); //取消錄音 aui.chatbox.addEventListener({name: 'recordCancel'}, function(ret){ console.log(ret); //aui.toast({msg: ret.msg}) }); //結束錄音 aui.chatbox.addEventListener({name: 'recordEnd'}, function(ret){ console.log(ret); aui.toast({msg: ret.msg}) }); //選擇附加功能 aui.chatbox.addEventListener({name: 'chooseExtrasItem'}, function(ret){ console.log(ret); aui.toast({msg: ret.data.title}); }); //發送 aui.chatbox.addEventListener({name: 'submit'}, function(ret){ console.log(ret); aui.toast({msg: ret.data.value}) });