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：動畫時間

 

接收參數

1. 獲取當前頁面 var webView = plus.webview.currentWebview();
2. 獲取content字符串 var content= webView.content;
3. 獲取當前序號,要取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分鍾左右。