初识“MUI”

MUI——最接近原生APP体验的高性能前端框架。 摘自《DCloud官网》

DCloud在HBuilder中为我们提供了几个“包含MUI的HTML”模板，我们可以直接创建项目，并在其基础上做二次开发。而DCloud同时也提供了众多的HTML，JS代码块，能够使我们编写更加方便（其实是一种懒操作）。

HTML代码块^①

组件	触发字符
mDoctype(mui-dom结构)	mdo
mBody(主体)	mbo
mScroll(区域滚动容器)	msc
mrefreshContainer(刷新容器)	mre
mHeader(标题栏)	mhe
mCheckbox(复选框)	mch
mIcon(图标)	mic
mOffcanvas(侧滑导航)	mof
mText(文本框)	min puttext
mText_Search(搜索框)	min putsearch
mText_Clear(带清除按钮的文本框)	min putclear
mText_Speech(语音输入)	min putspeech
mForm(表单)	mfo
mRadio(单选框)	mra
mPopover(弹出菜单)	mpo
mprogressbar(进度条)	mpr
mActionsheet(H5模式弹出菜单)	mac
mRange(Label+滑块)	mra
mSwitch(开关)	msw
mbadge(数字角标)	mba
mTab(选项卡)	mta
mPagination(分页)	mpa
mList(列表)	mli
mGrid(九宫格)	mgr
mGallery-Table(图文表格)	msl
mactionsheet(操作表)	act
maccordion(折叠面板)	mac
mnumbox(数字输入框)	mnu
mrefreshContainer(刷新容器)	mpu
mButton(按钮)	mbu

JS代码块^①

init

组件	触发字符
mui.init	min
subpage(创建子页面)	mins
preload(预加载)	minp reload
pullRefresh(刷新组件)	minp ullRefresh
getures(手势事件)	ming
swipeback(侧滑返回)	mins
keyeventbind(按键绑定)	mink
beforBack(重写窗口关闭逻辑)	minb
setStatusbar(设置状态栏颜色)	mins
preloadlimit(预加载数量)	minp

JS组件

组件	触发字符
mui.plusReady()	mpl
mui.ready	mre

event

组件	触发字符
mui.on(事件绑定)	mmon
mui.off(事件取消)	mmoff
mui.trigger(事件触发)	mtrigger
mui.fire(自定义事件)	mfire
document.getElementById()	dg
document.getElementById().addEventListener()	dga
document.querySelector()	ds
document.querySelector().addEventListener()	dsa
window.addEventListener()	wad
document.addEventListener()	daa

dialog

组件	触发字符
mui.alert()(弹出框)	mda
mui.confirm()(确认弹出框)	mdc
mui.prompt()(输入弹出框)	mdp
mui.toast()(自动消失提示框)	mdt
mui.closePopup()(关闭最外层对话框)	mdc
mui.closePopups()(关闭全部对话框)	mdc

utils

组件	触发字符
mui()(mui对象选择器)	mmu
mui.each()(数组、对象遍历)	mea
mui().each()(DOM遍历)	mme
mui.extends(对象合并)	mex
mui.later()(setTimeOut封装)	mla
mui.scrollTo()(滚动到指定位置)	msc
mui.os()(判断当前允许环境)	mos

ajax

组件	触发字符
mui.ajax()	maj
mui.post()	mpo
mui.get()	mge
mui.getJSON()	mjs

webview

组件	触发字符
mui.open(打开新页面)	mop
mui.currentWebview(当前页面)	mcu
mui.back()(关闭窗口)	mba
mui.backFunction()(重写返回逻辑)	mba
mui.backDouble()(双击退出应用)	mba
mui.backTast()(双击进入后台)	mba
mui.preload()(预加载)	mpr

plus

组件	触发字符
plusReady	pre
plus.accelerometer(设备加速传感器)	pac
plus.audio(设备音频)	pau
plus.barcode(条码扫描)	pba
plus.camera(设备摄像头)	pca
plus.contacts(通讯录)	pco
plus.device(设备信息)	pde
plus.gallery(系统相册)	pga llery
plus.geoloction(设备位置信息)	pge olocation
plus.io(本地文件系统)	pio
plus.key(设备按键事件)	pke
plus.maps(地图控件)	pma
plus.messaging(设备通讯功能)	pme
plus.nativeObj(系统原生对象)	pna tiveObj
plus.nativeUI(系统原生界面)	pna tiveUI
plus.navigator(浏览器运行环境信息)	pna vigator
plus.orientation(设备方向信息)	por
plus.payment(支付功能)	ppa
plus.proximity(距离传感器)	ppr
plus.push(推送消息)	ppu
plus.runtime(运行环境)	pru

新建MUI项目

新建MUI项目

我们创建好项目后即可在代码编辑窗口进行代码编写。

使用快捷方式编写代码

注：① 参考DCloud MUI官网，使用相同触发字符的未进行罗列。

参考文档：

• 新手指南
• 代码块
• H5+规范

无上一章	下一章