02-mui常用代码块

1 代码块概述

• 在HBuilder7.1+或下载mui_html_snippets.rb、mui_js_snippets.rb替换使用
• 代码块的作用能提高开发效率

2 代码块详解

2.1 在HTML中使用的代码块

2.1.1 mui相关组件代码块

组件	触发字符	说明
mDoctype	mdoctype	mui_dom网页结构
mHeader	mheader	标题栏
mHeader	mheaderwithBack	带返回箭头的标题栏
mBody	mbody	主体内容
mIcon	micon	图标（需额外引入icons-extra.css文件）
mbadge	mbadge	数字角标
mbadge	mbadgeintverted	数字角标无底色
mButton	mbutton	按钮
mButton	mbutton_block	块状按钮
mButton	mbutton_outline	按钮无底色，有边框
maccordion	maccordion	折叠面板
mGrid	mgrid	九宫格
mPopover	mpopover	弹出菜单
mActionsheet	mactionsheet	H5模式弹出菜单
mprogressbar	mprogressbar	进度条-有进度条
mprogressbar	mprogressbarinfinite	进度条-无限循环
mScroll	mscroll	区域滚动
mrefreshContainer	mpullrefresh	刷新容器
slide	mslider	轮播组件
mGallery	mslider_gallery	图片轮播
mGallery-Table	mslider_gallery_table	图文表格
mTab	mtab	底部选项卡
mTabSegmented	mtabsegmented	DIV选项卡
mTabSegmented	mtabviewpage	可左右拖动的选项卡
mscrollsegmented	mscrollsegmented	横向滚动
mOffcanvas	moffcanvasall	侧滑导航-主界面、菜单同时移动
mOffcanvas	moffcanvasmain	侧滑导航-主界面移动、菜单不动
mOffcanvas	moffcanvasmenu	侧滑导航-主界面不动，菜单移动
mOffcanvas	moffcanvasscalable	缩放式侧滑（类手机QQ）
mList	mlist	列表
mListMedia	mlist_Media_left	图文列表图片居左
mListMedia	mlist_Media_right	图文列表图片居右
mPagination	mpagination	分页
mForm	mform	表单
mCheckbox	mcheckbox	复选框
mCheckbox	mcheckbox_disabled	复选框禁用选项
mCheckbox	mcheckbox_left	复选框居左
mRadio	mradio	单选框
mRadio	mradio_disable	禁用单选框
mRadio	mradio_left	单选框居左
mRadios	mradio_selected	默认选中指定项
mSwitch	mswitch	开关
mSwitch	mswitchblue	开关-蓝色
mSwitch	mswitchmini	开关Mini
mSwitch	mswitchminiblue	开关Mini-蓝色
mRange	mrange	Label+滑块
mText_clear	minputclear	带清除按钮的文本框
mText_search	minputsearch	搜索框
mText_speech	minputspeech	语音输入
mText	minput	文本框
mnumbox	mnumbox	数字输入框

2.1.2 html相关标签代码块

标签	触发字符	说明
html原始标签	html原始标签	快速新建html原始标签
a_href	ahref	新建a标签，快速定位href属性
a_href_javascript	ajsvoid	新建a标签，并设置href属性为javascript:void(0);
a_mailto	amail	新建a标签，并设置href属性为mailto:
div_class	divc	新建div标签，快速定位class属性
dl_dt_dd	dl	新建dl、dt、dd结构
form_submit	form	新建form标签，其中包含submit提交按钮
img_src	img	新建img标签，快速定位src属性
input_image	inimage	新建type为image的input标签
input_password	inpassword	新建type为password的input标签
input_lable	inputlable	新建input标签和关联的label标签
input_reset	inreset	新建type为reset的input标签
input_search	insearch	新建type为search的input标签
input_submit	insubmit	新建type为submit的input标签
input_text	intext	新建type为text的input标签
meta_description	metadescription	新建meta标签，并指定Description的内容
meta_GB2312	metagb	新建meta标签，并指定编码为GB2312
meta_UTF8	metautf	新建meta标签，并指定编码为UTF-8
meta_keywords	metakeywords	新建meta标签，并指定关键字Keywords的内容
meta_nocache	metanocache	新建meta标签，并设置页面为不缓存
meta_viewport	metaviewport	新建meta标签，并设置页面视图方式
script src	scsrc	新建script标签，快速定位src属性
script html5plus	sctplus	新建script标签，并设置src属性值为html5plus://ready
select_option	select	新建select标签和option标签
span_id	span	新建span标签，快速定位id属性
ul_li	ul	新建ul标签和li标签
mui-col-sm	mcolsm	新建mui的响应式栅格布局方式（适用于手机横屏或平板）
mui-col-xs	mcolxs	新建mui的响应式栅格布局方式
mui-row	mrow	新建mui的一行

2.2 在JS中使用的代码块

注：这里不再介绍原生JS的属性和方法代码块，只要知道名字即可使用，以下内容仅介绍mui相关和plus相关代码块

2.2.1 mui.init相关代码块

组件	触发字符	说明
mui.init	minit	初始化mui
mui.init	minbeforeback	重写窗口关闭逻辑
mui.init	mingesture	手势事件
mui.init	minkeyevent	按键绑定
mui.init	minpreload	预加载页面
mui.init	minprelimit	预加载数量
mui.init	minpullrefresh	刷新组件
mui.init	minstatusbar	设置状态栏颜色
mui.init	minsubpage	创建子页面
mui.init	minswipeback	侧滑返回

2.2.2 js组件

组件	触发字符	说明
mui.ready	mready	当mui运行环境初始化成功后回调方法
mui.plusReady	mplusready	当plus运行环境初始化成功后回调方法

2.2.3 事件

组件	触发字符	说明
mui.on	mmon	事件绑定
mui.off	mmoff	事件取消绑定
mui.trigger	mtrigger	事件触发
mui.fire	mfire	自定义事件
document.getElementById	dg	根据ID属性获取页面元素
document.querySelector	ds	根据选择器获取页面元素
document.querySelector().addEventListener	dsa	根据选择器获取页面，并给元素绑定事件监听
window.addEventListener	wad	window绑定事件监听
document.addEventListener	dad	document绑定事件监听

2.2.4 dialog对话框

组件	触发字符	说明
mui.alert()	mdalert	弹出框
mui.confirm()	mdconfirm	确认弹出框
mui.prompt()	mdprompt	输入弹出框
mui.toast()	mdtoast	自动消失提示框
mui.closePopup()	mdclosePopup	关闭最外层对话框
mui.closePopups()	mdclosePopups	关闭全部对话框

2.2.5 utils工具

组件	触发字符	说明
mui(’’)	mmui	mui对象选择器
mui.each()	meach	数组、对象遍历
mui(’’).each()	mmeach	DOM元素遍历
mui.extend()	mextend	对象合并
mui.later()	mlater	setTimeOut封装
mui.scrollTo()	mscrollto	滚动到指定位置
mui.os	mos	判断当前运行环境

2.2.6 ajax请求

组件	触发字符	说明
mui.ajax()	majax	ajax请求
mui.post()	mpost	post请求
mui.get()	mget	get请求
mui.getJSON()	mjson	获取JSON请求

2.2.7 webview窗口

组件	触发字符	说明
mui.openWindow	mopen	打开新页面
mui.currentWebview	mcurrent	当前页面对象
mui.back()	mback	关闭窗口，返回上级页面
mui.backFunction()	mbackfunction	重写返回逻辑
mui.backDouble()	mbackDouble	双击退出应用
mui.backTast	mbackMoveTaskToBack	双击进入后台
mui.preload()	mpreload	预加载

2.2.8 plus对象

组件	触发字符	说明
plusReady	pready	创建plus对象初始化成功后的回调方法及相关代码
plus.accelerometer	pacce	设备加速度传感器对象
plus.audio	paudio	音频管理对象
plus.barcode	pbarcode	条码识别对象
plus.camera	pcamera	设备的摄像头对象
plus.contacts	pcontacts	系统通讯录对象
plus.device	pdevice	设备信息对象
plus.gallery	pgallery	系统相册对象
plus.geolocation	pgeolocation	设备位置信息对象
plus.io	pio	本地文件系统对象
plus.key	pkey	设备按键事件对象
plus.maps	pmaps	地图控件对象
plus.messaging	pmessaging	设备通讯功能对象
plus.nativeObj	pnativeObj	系统原生对象
plus.nativeUI	pnativeUI	系统原生界面对象
plus.navigator	pnavigator	浏览器运行环境信息
plus.orientation	porientation	设备的方向信息
plus.payment	ppayment	支付功能
plus.proximity	pproximity	设备距离传感器
plus.push	ppush	推送消息功能
plus.runtime	pruntime	当前运行环境信息
plus.oauth	poauth	用户登录授权验证功能
plus.downloader	pdown	网络文件下载任务对象
plus.share	pshare	社交分享管理对象
plus.speech	pspeech	语音输入管理对象
plus.statistic	pstatistic	统计管理对象
plus.storage	pstorage	本地数据管理对象
plus.uploader	puploader	上传管理对象
plus.webview	pweb	应用界面管理对象
plus.zip	pzip	压缩管理对象
plus.android	pandroid	调用android几乎所有的系统API（Native.js）
plus.ios	pios	调用ios几乎所有的系统API（Native.js）