See You Tomorrow

jiojun的个人小博客

Hbuilder常用功能汇总

1.Hbuilder 引用

CSS:mui.min.css

Js:mui.min.js

2.常用功能

2.1 获取页面

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);//刷新页面

2.2 自定义返回事件

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

2.3 打开页面/关闭页面

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

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

<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>

2.4 接收参数

1. 获取当前页面 var webView = plus.webview.currentWebview();

2. 获取content字符串 var content= webView.content;

3. 获取当前序号,要取int型需要进行转换 var index= parseInt(webView.index);

2.5 预加载页面

方式一

通过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>

2.6 自定义事件

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

EventName:事件名称

Function(){}:时间内容

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

mui.fire(webViewObj, EventName);

webViewObj: 目标页面(类型obj)

EventName:事件名称(类型string)

2.8 异步获取数据

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);
     }
});

2.9 确认事件

var btnArray = ['是','否' ];
    var pageurl=nowPage.getURL();
    $.confirm('您确定要结束当前练习?', '温馨提示', btnArray, function(e) {
        if (e.index == 0) {
            //点击是时触发
        }
        else{
            //点击否时触发
        }
    })

2.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);给当前页添加子页面

2.11 上拉刷新下拉加载

<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>

2.12 点击事件

document.getElementById("id").addEventListener(“tap”,function(){
  //事件代码
});
//或者
mui('#pano-list').on('tap', '.recommend-item',function(){
  //事件代码
});

2.13 事件触发

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

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

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

//监听点击事件

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

  console.log("tap event trigger");

});

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

mui.trigger(btn,'tap');

2.14 使用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();

});

2.15 微信支付首次支付成功,后面报-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分钟左右。

微信开放平台

微信开放平台-开发信息

 

上一遍:没有了
下一遍:没有了
来都来了,你不打算说点什么吗?
最新留言
暂无留言信息!