hbuilderhtmlid,Hbuilder常⽤功能汇总（⽰例代码）
引⽤
样式表: mui.min.css
Js：mui.min.js
常⽤功能
获取页⾯
var webView=plus.webview.currentWebview();//获取当前页
var webView=plus.webview.currentWebview().opener();//获取上⼀页的页⾯
var webView= plus.webview.currentWebview().parent();//获取⽗级页⾯
var webView =WebviewById("index");//根据Id获取页⾯
var webView = LaunchWebview();//获取主页⾯
var all = plus.webview.all();//获取所有页⾯
⾃定义返回事件
返回：mui.back()，可在点击事件⾥添加
Beforeback：⾃定义返回按钮事件，如果要禁⽤返回时间添加  return false;
1
2 (function($, doc) {3
4 mui.init({5
6 beforeback: function() {7
8 var webView =plus.webview.currentWebview();9
10 var pWebView =webView.opener();11
12 $.fire(pWebView, "breck_page");13
14 return false;15
16 }17
18 });19
20 $.plusReady(function() {});21
22 }(mui, document));23
打开页⾯/关闭页⾯
打开页⾯时⽤mui. openWindow()⽅法，url：打开页⾯路径，id：页⾯Id、styles：页⾯样式、extras：参数(从A打开B页⾯在B页⾯可以取到该参数,)
1
2
mui框架常用组件有哪些3 (function($, doc) {4
5 mui.init();6
7 $.plusReady(function() {8
9 $.openWindow({10
11 url: "course_info.html",12
13 id: "course_info.html",14
15 styles:{ top:"50px"}16
17 extras: {18
19 courseId: courseId20
21 },22 })23 });24 }(mui, document));25
26
关闭页⾯webViewObj.close(“slide-out-bottom”,300)；参数1：关闭动画，参数2：动画时间接收参数
获取当前页⾯ var webView = plus.webview.currentWebview();
获取content字符串 var content= t;
获取当前序号，要取int型需要进⾏转换 var index= parseInt(webView.index);
预加载页⾯
⽅式⼀：
通过mui.init⽅法中的preloadPages参数进⾏配置.
1 mui.init({2
3 preloadPages:[4
5 {6
7 url:prelaod-page-url,8
9 id:preload-page-id,10
11 styles:{},//窗⼝参数
12
13 extras:{},//⾃定义扩展参数
14
15 subpages:[{},{}]//预加载页⾯的⼦页⾯
16
17 }18
19 ],20
21 preloadLimit:5//预加载窗⼝数量限制(⼀旦超出，先进先出)默认不限制
22
23 });
该种⽅案使⽤简单、可预加载多个页⾯，但不会返回预加载每个页⾯的引⽤，若要获得对应webview引⽤，还需要通过
WebviewById⽅式获得；另外，因为mui.init是异步执⾏，执⾏完mui.init⽅法后⽴即获得对应webview引⽤，可能会失败，例如如下代码：
mui.init({
preloadPages:[
{
url:‘list.html‘,
id:‘list‘
}
]
});
var list = WebviewByid(‘list‘);//这⾥可能返回空；
⽅式⼆：通过mui.preload⽅法预加载.
1
2 (function($, doc) {
3 mui.init();
4 $.plusReady(function() {
5 mui.preload({
6 url: ‘test_select_info.html‘,
7 id: page_id,
8 styles: {},
9 extras
:
{},10 });11 page.show("none");12 });13 }(mui, document));14
⾃定义事件
window.addEventListener(EventName,function(){});
EventName：事件名称
Function(){}：时间内容
B页⾯调取A页⾯的⾃定义事件
mui.fire(webViewObj, EventName);
webViewObj: ⽬标页⾯(类型obj)
EventName：事件名称(类型string)
异步获取数据
2
3 mui.ajax(url, {4
5 data: loginInfo,6
7 dataType: ‘json‘, //服务器返回json格式数据
8
9 type: ‘post‘, //HTTP请求类型
10
11 timeout: 10000, //超时时间设置为10秒；
12
13 success: function(data) {14
15 de == 0) //登录成功将数据存⼊本地
16
17 {18
19 } else{20 }21
22 },23 error: function(xhr, type, errorThrown) {24 console.log(errorThrown);25 }26 });
确认事件
1 var btnArray = [‘是‘,‘否‘];
2 var URL();
3 $.confirm(‘您确定要结束当前练习?‘, ‘温馨提⽰‘, btnArray, function(e) {
4 if (e.index == 0) {
5 //点击是时触发
6 }
7 else{
8 //点击否时触发
9 }10 })
添加⼦页⾯
mui.init({
subpages:[{
url:your-subpage-url,//⼦页⾯HTML地址，⽀持本地地址和⽹络地址
id:your-subpage-id,//⼦页⾯标志
styles:{
top:subpage-top-position,//⼦页⾯顶部位置
bottom:subpage-bottom-position,//⼦页⾯底部位置
width:subpage-width,//⼦页⾯宽度，默认为100%
height:subpage-height,//⼦页⾯⾼度，默认为100%
......
},
extras:{}//额外扩展参数
}]
});
在有些情况下不能在mui.init()⾥添加⼦页⾯需要在页⾯加载之后添加⼦页⾯
Var webView= plus.webview.currentWebview();//获取当前页
var sub = ate(pageId, subpages[i].id, styles, extras); //创建⼦页⾯
webView.append(sub)；给当前页添加⼦页⾯
上拉刷新下拉加载
添加引⽤
1
2
3
4 (function($, doc) {
5 mui.init();
6 $.plusReady(function() {
7 Var pullToRefresh = mui("#pullrefresh").pullToRefresh({
8 down: {
9 callback
: function() {10 //下拉刷新事件
dPullDownToRefresh();//结束下拉刷新事件
12 }13 },14 up: {15 callback: function() {16 //上拉加载事件
dPullUpToRefresh();//结束上拉加载事件
18 }19 }20 });21 });22 }(mui, document));23
点击事件
ElementById("id").addEventListener(“tap”,function(){
2  　//事件代码
3 });
4 //或者
5 mui(‘#pano-list‘).on(‘tap‘, ‘.recommend-item‘,function(){
6  　//事件代码
7 });
事件触发
使⽤igger()⽅法可以动态触发特定DOM元素上的事件。
⾃动触发按钮的点击事件：
1 var btn = ElementById("submit");2
3 //监听点击事件
4
5 btn.addEventListener("tap",function() {6
7 console.log("tap event trigger");8
9 });10
11 //触发submit按钮的点击事件
12
igger(btn,‘tap‘);
使⽤Native.js实现打开页⾯默认弹出软键盘
1 varnativeWebview, imm, InputMethodManager;2
3 var initNativeObjects = function() {4
5 if(mui.os.android) {6
7 var main =plus.android.runtimeMainActivity();8
9 var Context = plus.android.importClass("t.Context");10
11 InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");12
13 imm =SystemService(Context.INPUT_METHOD_SERVICE);14
15 } else{16
17 nativeWebview =plus.webview.currentWebview().nativeInstanceObject();18
19 }20

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。