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 <script type="text/javascript">
 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 </script>

打开页面/关闭页面

打开页面时用mui. openWindow()方法,url:打开页面路径,id:页面Id、styles:页面样式、extras:参数(从A打开B页面在B页面可以取到该参数,)

 1 <script type="text/javascript">
 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: courseId
20
21                 },
22             })
23         });
24     }(mui, document));
25
26 </script>

关闭页面webViewObj.close(“slide-out-bottom”,300);参数1:关闭动画,参数2:动画时间

接收参数

  1. 获取当前页面 var webView = plus.webview.currentWebview();
  2. 获取content字符串 var content= webView.content;
  3. 获取当前序号,要取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 <script type="text/javascript">
 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 </script>

自定义事件

window.addEventListener(EventName,function(){});

EventName:事件名称

Function(){}:时间内容

B页面调取A页面的自定义事件

mui.fire(webViewObj, EventName);

webViewObj: 目标页面(类型obj)

EventName:事件名称(类型string)

异步获取数据

 1 Var url=” http://www.zfgo360.com/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 <script type="text/javascript" src="../../js/mui.pullToRefresh.js"></script>
 2 <script type="text/javascript" src="../../js/mui.pullToRefresh.material.js"></script>
 3 <script type="text/javascript">
 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 </script>

点击事件

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 var nativeWebview, 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.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319167&token=&lang=zh_CN

应用签名的修改位置:

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

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

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

时间: 2024-10-04 17:20:42

Hbuilder常用功能汇总的相关文章

YII常用功能汇总

Yii: 返回数据表中指定字段以及添加自定义字段值 - 陈小峰-iefreer的专栏 - 博客频道 - CSDN.NET YII常用功能汇总,码迷,mamicode.com

Hbuilder 常用快捷键汇总

朋友推荐用Hbuilder编辑器,看了下Hbuilder官网和那视频,感觉牛逼哄哄的, 自己也就体验了一下,打开Hbuilder的快捷键列表,每个快捷键都体验了一下,以下展示出来的,每一个都是精华,每一个快捷键都要知道怎么用,而且会经常用. 那就几乎可以脱离鼠标来写前端代码了. 另外还有一些实用的组合键: Alt+T→V (检验语法文档) Alt+L→H (代码历史版本) Hbuilder也要吐槽一下: 1.打开相对慢. 2.新建文件,为什么不能存放到电脑的目录. 3.emmet输入 w100,

Idea 常用功能汇总,工作中常用技巧,移出请说明原因,笔记花了好长时间汇总的

1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀.  2.常用技巧 2.1 通过Alt+F8查看变量在当前断点的当前值 2.2 使用Live Template创建代码模板 2.3 粘贴 历史 复制 快捷键 Ctrl+Shift+V,可以显示文本复制的历史记录. 修改复制历史记录数量,执行 Setting-Editor,修改“Maximum number of contents to keep in

JavaScript之Array常用函数汇总

[20141121]JavaScript之Array常用功能汇总 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table

Linux 常用命令汇总

Linux 常用命令汇总 1. 显示日期与时间:date 可修改显示日期格式,如:date +%Y/%m/%d %H:%M à2016/12/25 17:05(%Y:年:%m:月:%d:日:%H:24小时制:%M:分) date –d 参数后可加:today/yesterday/tomorrow 来显示今天.昨天.明天日期 2. 显示日历:cal(默认显示本月月历) cal 2001 可显示2001年整年日历:cal 10 2001 可具体显示某月月历 3.  计算器:bc 4. Tab键:用在

Keil的使用方法 - 常用功能(三)

Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(二),该文章接着上一篇文章总结. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链接(微信点击阅读原文),Keil使用方法(汇总): http://blog.csdn.net/ybhuangfugui/article/details/51647893 今天总结关于Keil配置里面的选项一些常用功能,不会总结每一个功能,计划在今后的文章中会整理出详细的文档说明. 本着免费分享的原则,方便大家手机学习知识,每天在微信

Keil的使用方法 - 常用功能(二)

Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(一),关于(文件和编译)工具栏每一个按钮的功能描述和快捷键的使用. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链接(微信点击阅读原文),Keil使用方法(汇总): http://blog.csdn.net/ybhuangfugui/article/details/51647893 今天总结关于工程目标(配置)选项的常用功能,不会总结每一个功能,计划在今后的文章中会整理出详细的文档说明. 本着免费分享的原则,方

Java常用英语汇总(面试必备)

Java常用英语汇总(面试必备) abstract (关键字)             抽象 ['.bstr.kt] access                            vt.访问,存取 ['.kses]‘(n.入口,使用权) algorithm                     n.算法 ['.lg.riem] annotation                     [java]代码注释 [.n.u'tei..n] anonymous                

前端常用功能记录(二)—datatables表格(转)

前端常用功能记录(二)—datatables表格 并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添花!DataTables提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化.统计等强大功能. 工作中对程序员的学习模式才深有体会,不是从入门到精通,而是从会用到了解.对于我来说,基本都是拿到一个知识先做个东西出来,再来细细品味个中的细节,然后