Hbuilder app 整理资料

mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
...
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});




mui.post('http://server-name/login.php',{
username:'username',
password:'password'
},function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
...
},'json'
);


mui.get('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
},'json'
);




mui.post,mui.get不处理timeout和异常（若需处理异常及超时，请使用mui.ajax()方法）




mui.getJSON('http://server-name/list.php',{category:'news'},function(data){
//获得服务器响应
...
}
);




-------------------------------------------------




-------------------------------------------------
手势事件
-------------------------------------------------


分类 参数 描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动 swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动 dragstart 开始拖动
drag 拖动中
dragend 拖动结束






mui.init({
  gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false，不监听
   release:false//默认为false，不监听
  }
});


注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关




-------------------------------------------------
事件监听
-------------------------------------------------
同标准click事件一样，上述手势事件支持添加到任意DOM对象上，如下为一个示例：


elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});










-------------------------------------------------
预加载
-------------------------------------------------
所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。


方式一：通过mui.init方法中的preloadPages参数进行配置


mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ]
});


该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应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方法预加载.


var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});


通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；










-------------------------------------------------
下拉刷新
-------------------------------------------------


主页面内容比较简单，只需要创建子页面即可：


mui.init({
    subpages:[{
      url:pullrefresh-subpage-url,//下拉刷新内容页面地址
      id:pullrefresh-subpage-id,//内容页面标志
      styles:{
        top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px；
        .....//其它参数定义
      }
    }]
  });




内容页面需按照如下DOM结构构建：


<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">
      
    </ul>
  </div>
</div>




其次，通过mui.init方法中pullRefresh参数配置下拉刷新各项参数，如下：


mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    down : {
      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    }
  }
});


最后，根据具体业务编写刷新函数，需要注意的是，加载完新数据后，需要执行endPulldownToRefresh()方法；
function pullfresh-function() {
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}


















-------------------------------------------------
输入增强
-------------------------------------------------


mui目前提供的输入增强包括：快速删除和语音输入两项功能。要删除输入框中的内容，使用输入法键盘上的删除按键，只能逐个删除字符，mui提供了快速删除能力，只需要在对应input控件上添加.mui-input-clear类，当input控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；另外，为了方便快速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech类，就会在该控件右侧显示一个语音输入的图标，点击会启用科大讯飞语音输入界面。




-------------------------------------------------
开关事件
-------------------------------------------------
mui提供了开关控件样式，点击滑动两种手势都可以对开关控件进行操作，在开关控件进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，在开关切换时执行特定业务逻辑。如下为使用示例：


document.getElementById("mySwitch").addEventListener("toggle",function(event){
  if(event.detail.isActive){
    console.log("你启动了开关");
  }else{
    console.log("你关闭了开关");  
  }
})




若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：


var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
  console.log("打开状态");
}else{
  console.log("关闭状态");  
}


若使用js打开、关闭开关控件，可使用switch插件的toggle()方法，如下为示例代码：


mui("#mySwitch").switch().toggle();






-------------------------------------------------
监听自定义事件
-------------------------------------------------
window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});


-------------------------------------------------
触发自定义事件
-------------------------------------------------


通过mui.fire方法可触发目标窗口的自定义事件：


mui.fire(targetPage,'customEvent',{
  //自定义事件参数
});




示例：假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：


在列表页面中预加载详情页面（假设为detail.html）
列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；
详情页面监听newsId自定义事件




列表页面代码如下：


//初始化预加载详情页面
mui.init({
  preloadPages:[{
    id:'detail.html',
    url:'detail.html'           
  }
  ]
});


var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面          
  mui.openWindow({
    id:'detail.html'
  });
});




详情页面代码如下：


//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});






-------------------------------------------------
图片轮播
-------------------------------------------------


mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：


//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});














-----------------


(function(mui) {
var detailPage = null;
            detailPage = mui.preload({
                    id: 'zgManage.html',
                    url: 'zgManage.html'
                })
                //添加列表项的点击事件
            mui('.mui-content').on('tap', '.item-id', function(e) {
                var id = this.getAttribute('id');
                //获得详情页面
                console.log('====' + id)
                    /*if (!detailPage) {
                        detailPage = plus.webview.getWebviewById('zgManage.html');
                    }*/
                    //触发详情页面的newsId事件
                mui.fire(detailPage, 'xxx', {
                    id: id
                });
                //打开详情页面          
                mui.openWindow({
                    id: 'zgManage.html',
                    // url: 'zgManage.html'
                });
            });
        })(mui);


================================


mui.back = function(){
    //首次按键，提示‘再按一次退出应用’
    if(!first){
        first = new Date().getTime();
        mui.toast('再按一次退出应用');
        setTimeout(function(){
            first = null;
        },1000);
    }else{
        if(new Date().getTime()-first<1000){
           plus.runtime.quit();
       }
}
    alert(e.keyType+"\n"+e.keyCode);
    return false;
}










===================================================


plus.device.dial( number, confirm )启动的是拨打电话的界面，并不会直接拨出电话。
直接拨出电话的nativeJs代码：


var Uri = plus.android.importClass("android.net.Uri");
var Intent = plus.android.importClass("android.content.Intent");
var number = new Uri.parse("tel:4001109999");
var callIntent = new Intent(Intent.ACTION_CALL, number);//这步是关键，ACTION_CALL而不是ACTION_DIAL
plus.android.runtimeMainActivity().startActivity(callIntent);








========================================================


mui.plusReady(function() {
                //首页返回键处理
                //处理逻辑：1秒内，连续两次按返回键，则退出应用；
                var first = null;
                plus.key.addEventListener('backbutton', function() {
                    //首次按键，提示‘再按一次退出应用’
                    if (!first) {
                        first = new Date().getTime();
                        mui.toast('再按一次退出应用');
                        setTimeout(function() {
                            first = null;
                        }, 1000);
                    } else {
                        if (new Date().getTime() - first < 1000) {
                            plus.runtime.quit();
                        }
                    }
                }, false);
            });


========================================================




plusReady仅说明plus准备好了。


mui.ready是指dom准备好了。


两种方案：


1.把你的代码放到你的html代码后边执行。


2.把dom相关代码放到ready里边。






上拉刷新,加载出第二页后。再执行 下拉刷新，我此时获取的的是 第一页的数据。可是在上拉时 就不能执行上拉


========================================================


http://dcloudio.github.io/mui/javascript/




http://ask.dcloud.net.cn/question/8866




http://www.html5plus.org/doc/zh_cn/device.html#plus.device.uuid    --获取设备唯一编号
plus.device.uuid;


http://ask.dcloud.net.cn/article/122   -------布局规则


http://www.html5plus.org/doc/zh_cn/webview.html


 http://ask.dcloud.net.cn/article/182 ----------App资源在线升级更新


http://www.html5plus.org/doc/zh_cn/maps.html ----地图定位功能


http://ask.dcloud.net.cn/article/29  ----地图定位功能




http://ask.dcloud.net.cn/article/38  ------离线打包


http://ask.dcloud.net.cn/question/2673   ----------


http://www.dcloud.io/docs/api/zh_cn/navigator.shtml -----API




RQCsC8ebKBmIQIiXBmX1v7lf iOS端
OsWGjhLVqiGjwiK6r8lB3urS Android端    WSlgzefYAXM1GzG05t7rNWIZ