hbuilder html id,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 =plus.webview.getWebviewById("index");//根据Id获取页面

var webView = plus.webview.getLaunchWebview();//获取主页面

var all = plus.webview.all();//获取所有页面

webViewObj.reload(true);//刷新页面

自定义返回事件

返回：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

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= webView.content;

获取当前序号,要取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引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，例如如下代码：

mui.init({

preloadPages:[

{

url:‘list.html‘,

id:‘list‘

}

]

});

var list = plus.webview.getWebviewByid(‘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)

异步获取数据

1 Var url=” http://www.zfgo360/App/Home/Index”

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 if(data.code == 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 pageurl=nowPage.getURL();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 = plus.webview.create(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 //下拉刷新事件

11 pullToRefresh.endPullDownToRefresh();//结束下拉刷新事件

12 }13 },14 up: {15 callback: function() {16 //上拉加载事件

17 pullToRefresh.endPullUpToRefresh();//结束上拉加载事件

18 }19 }20 });21 });22 }(mui, document));23

点击事件

1 document.getElementById("id").addEventListener(“tap”,function(){2 　　//事件代码

3 });4 //或者

5 mui(‘#pano-list‘).on(‘tap‘, ‘.recommend-item‘,function(){6 　　//事件代码

7 });

事件触发

使用mui.trigger()方法可以动态触发特定DOM元素上的事件。

自动触发按钮的点击事件：

1 var btn = document.getElementById("submit");2

3 //监听点击事件

4

5 btn.addEventListener("tap",function() {6

7 console.log("tap event trigger");8

9 });10

11 //触发submit按钮的点击事件

12

13 mui.trigger(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("android.content.Context");10

11 InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");12

13 imm =main.getSystemService(Context.INPUT_METHOD_SERVICE);14

15 } else{16

17 nativeWebview =plus.webview.currentWebview().nativeInstanceObject();18

19 }20

21 };22

23 var showSoftInput = function() {24

25 var nativeWebview =plus.webview.currentWebview().nativeInstanceObject();26

27 if(mui.os.android) {28

29 //强制当前webview获得焦点

30

31 plus.android.importClass(nativeWebview);32

33 nativeWebview.requestFocus();34

35 imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);36

37 } else{38

39 nativeWebview.plusCallMethod({40

41 "setKeyboardDisplayRequiresUserAction": false

42

43 });44

45 }46

47 setTimeout(function() {48

49 //此处可写具体逻辑设置获取焦点的input

50

51 var inputElem = document.querySelector(‘input‘);52

53 inputElem.focus();54

55 }, 200);56

57 };58

59 mui.plusReady(function() {60

61 initNativeObjects();62

63 showSoftInput();64

65 });

微信支付首次支付成功，后面支付报-1错误

这个是签名生成工具：

https://open.weixin.qq/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319167&token=&lang=zh_CN

应用签名的修改位置：

开放平台-->管理中心(页面顶部)-->移动应用(左上角)-->点击查看按钮-->跳转到应用详情页面，

在页面末尾有个开发信息，然后点击修改。

签名修改后，要过一段时间才会生效，我过了10分钟左右。