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;
<script type="text/javascript">
(function($, doc) { mui.init({ beforeback: function() { var webView = plus.webview.currentWebview(); var pWebView = webView.opener(); $.fire(pWebView, "breck_page"); return false; } }); $.plusReady(function() {}); }(mui, document));
</script>
打开页面/关闭页面
打开页面时用mui. openWindow()方法,url:打开页面路径,id:页面Id、styles:页面样式、extras:参数(从A打开B页面在B页面可以取到该参数,)
<script type="text/javascript"> (function($, doc) { mui.init(); $.plusReady(function() { $.openWindow({ url: "course_info.html", id: "course_info.html", styles:{ top:"50px"} extras: { courseId: courseId },
})
});
}(mui, document)); </script>
关闭页面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参数进行配置.
mui.init({ preloadPages:[ { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ], preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 });
该种方案使用简单、可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应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方法预加载.
<script type="text/javascript">
(function ($, doc) {
mui.init();
$.plusReady(function () {
mui.preload({
url: 'test_select_info.html',
id: page_id,
styles: {},
extras: {},
});
page.show("none");
});
}(mui, document));
</script>
自定义事件
window.addEventListener(EventName,function(){});
EventName:事件名称
Function(){}:时间内容
B页面调取A页面的自定义事件
mui.fire(webViewObj, EventName);
webViewObj: 目标页面(类型obj)
EventName:事件名称(类型string)
异步获取数据
Var url=” http://www.zfgo360.com/App/Home/Index” mui.ajax(url, { data: loginInfo, dataType: 'json', //服务器返回json格式数据 type: 'post', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒; success: function(data) { if(data.code == 0) //登录成功将数据存入本地 { } else {
} },
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
}
});
确认事件
var btnArray = ['是','否' ];
var pageurl=nowPage.getURL();
$.confirm('您确定要结束当前练习?', '温馨提示', btnArray, function(e) {
if (e.index == 0) {
//点击是时触发
}
else{
//点击否时触发
}
})
添加子页面
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);给当前页添加子页面
上拉刷新下拉加载
添加引用
<script type="text/javascript" src="../../js/mui.pullToRefresh.js"></script>
<script type="text/javascript" src="../../js/mui.pullToRefresh.material.js"></script>
<script type="text/javascript">
(function($, doc) {
mui.init();
$.plusReady(function() {
Var pullToRefresh = mui("#pullrefresh").pullToRefresh({
down: {
callback: function() {
//下拉刷新事件
pullToRefresh.endPullDownToRefresh();//结束下拉刷新事件
}
},
up: {
callback: function() {
//上拉加载事件
pullToRefresh.endPullUpToRefresh();//结束上拉加载事件
}
}
});
});
}(mui, document));
</script>
点击事件
document.getElementById("id").addEventListener(“tap”,function(){
//事件代码
});
//或者
mui('#pano-list').on('tap', '.recommend-item',function(){
//事件代码
});
事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
自动触发按钮的点击事件:
var btn = document.getElementById("submit"); //监听点击事件 btn.addEventListener("tap",function () { console.log("tap event trigger"); }); //触发submit按钮的点击事件 mui.trigger(btn,'tap');
使用Native.js实现打开页面默认弹出软键盘
var nativeWebview, imm, InputMethodManager; var initNativeObjects = function() { if (mui.os.android) { var main = plus.android.runtimeMainActivity(); var Context = plus.android.importClass("android.content.Context"); InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager"); imm = main.getSystemService(Context.INPUT_METHOD_SERVICE); } else { nativeWebview = plus.webview.currentWebview().nativeInstanceObject(); } }; var showSoftInput = function() { var nativeWebview = plus.webview.currentWebview().nativeInstanceObject(); if (mui.os.android) { //强制当前webview获得焦点 plus.android.importClass(nativeWebview); nativeWebview.requestFocus(); imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED); } else { nativeWebview.plusCallMethod({ "setKeyboardDisplayRequiresUserAction": false }); } setTimeout(function() { //此处可写具体逻辑设置获取焦点的input var inputElem = document.querySelector('input'); inputElem.focus(); }, 200); }; mui.plusReady(function() { initNativeObjects(); showSoftInput(); });
微信支付首次支付成功,后面支付报-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分钟左右。
Hbuilder常用功能汇总的更多相关文章
- Hbuilder 常用快捷键汇总
朋友推荐用Hbuilder编辑器,看了下Hbuilder官网和那视频,感觉牛逼哄哄的, 自己也就体验了一下,打开Hbuilder的快捷键列表,每个快捷键都体验了一下,以下展示出来的,每一个都是精华,每 ...
- Idea 常用功能汇总,工作中常用技巧
1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀. 2.常用技巧 2.1 通过Alt+F8查看变量 ...
- Idea 常用功能汇总,工作中常用技巧,移出请说明原因,笔记花了好长时间汇总的
1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀. 2.常用技巧 2.1 通过Alt+F8查看变量 ...
- js常用功能汇总
var Utils = function() { this.Tools; this.ui; }; Utils = new Utils(); Utils.prototype.Tools = { year ...
- Idea常用功能汇总
1.格式化代码:Ctrl+Alt+L 2.重命名变量:光标停留在变量上,Shift+F6 3.打开文件或者项目所在目录: 右键>Show in Explorer 4.添加包围代码块的快捷键:Ct ...
- postman常用功能汇总(基础必备)
下载安装 下载地址:https://www.getpostman.com/downloads/ 安装:略 接口测试详解 包含get,post(k-v,json,上传文件,cookie) 参考:http ...
- 用前端姿势玩docker【一】Docker通俗理解常用功能汇总与操作埋坑
前言 首先一句话表达个人对docker的理解:与传统虚拟技术基于硬件及物理资源的虚拟化相比,Docker更加轻量化,docker为基于操作系统或内核级别的虚拟化,并且提供了从各种机制与操作以满足从开发 ...
- JavaScript之Array常用函数汇总
[20141121]JavaScript之Array常用功能汇总 *:first-child { margin-top: 0 !important; } body>*:last-child { ...
- ROS(indigo)机器人操作系统学习资料和常用功能包汇总整理(ubuntu14.04LTS)
ROS(indigo)机器人操作系统学习资料和常用功能包汇总整理(ubuntu14.04LTS) 1. 网站资源: ROSwiki官网:http://wiki.ros.org/cn GitHub ...
随机推荐
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
- nvm安装和配置详细教程
nvm是nodejs的版本管理工具,为什么要用nvm,你能百度到这篇文章相比是遇到不得不用的原因了,我们知道nodejs官方更新的速度非常快,有时候业务需要需要用某某版本,如果用的是msi安装,虽然安 ...
- 20155237 2016-2017-2 《Java程序设计》第5周学习总结
20155237 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 语法与继承架构 使用try...catch 与C语言中程序流程和错误处理混在一起不同,Jav ...
- Tcl与Design Compiler (十三)——Design Compliler中常用到的命令(示例)总结
本文如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 本文将描述在Design Compliler中常用 ...
- 【Flex】去除外边框,底背景透明,改变exe的icon
一.去除程序外边框 1.在 xx-app.xml文件里,找到 <!-- <systemChrome></systemChrome> --> 这句话,然后删掉注释 ...
- 手机自动化测试:appium源码分析之bootstrap十七
手机自动化测试:appium源码分析之bootstrap十七 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...
- 查看linux版本相关命令
Linux系统中,平常要装软件需要知道该系统相关信息,特别是刚刚进入公司,要接手某个系统,需要配置相关服务的时候,必须要先知道该系统的一些信息包括:内核版本信息.发行版本信息. #lsb_releas ...
- table切换
// 自己加载正确路径的jQ <!doctype html> <html><head><meta charset="utf-8">& ...
- jmeter 使用jmeter 录制 手机APP脚本
1.打开jmeter.鼠标右击工作台.添加HTTP代理服务器 2.设置配置jmeter.手机无线网络.(目标控制器也可以选择加到线程组中) 3.添加查看结果树 4.启动完成后.操作手机.jmeter就 ...
- 初识ElasticSearch
概述 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. 分布式的 ...