zoukankan      html  css  js  c++  java
  • 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,//子页面底部位置
    
            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分钟左右。

  • 相关阅读:
    netty用户退出,网络断开,重连删除用户信息
    netty的 ctx.writeAndFlush()方法
    netty实现动态定时器
    springboot java.sql.SQLException: sql injection violation, multi-statement not allow : update XXX(table)
    SpringBoot用流多次读取request请求中的数据
    mysql分组统计,按照时间排序
    Flash Player离线安装包下载指南
    maven pom.xml配置详解
    oracle 权限管理
    Oracle 表空间管理
  • 原文地址:https://www.cnblogs.com/HJbk/p/6856282.html
Copyright © 2011-2022 走看看