初识“MUI”

2021-10-03

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项目

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

文章图片
使用快捷方式编写代码

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

参考文档：

新手指南
代码块
H5+规范

无上一章	下一章

推荐阅读

上一篇：学习|学习,对美好的事物“上瘾”

下一篇：何晏