引用
样式表: 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:动画时间
接收参数
- 获取当前页面 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 <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分钟左右。