Hbuilder–app 开发 之 MUI个别细节

Hbuilder–app 开发 之 MUI个别细节

1.和上拉加载，下拉刷新配套的加载子页面

mui.init({
                subpages : [qiao.h.normalPage('list')]
            });

要想实现上拉加载和下拉刷新，必须使用子页面的方式，需要在init中设置。
2.手势事件和默认事件
长按事件，后退事件，菜单事件，最好在init中设置，

mui.init({
    keyEventBind : {
        backbutton : false,
        menubutton : false
    },
    gestureConfig : {
        longtap:true
    }
});

等待加载完成
所有的nativejs方法最好都放到等待加载完成后调用，

也就是：
// 所有方法都放到这里

mui.plusReady(function(){
    window.addEventListener('detailItem', detailItemHandler);
});

如果不放到等待nativejs加载完成就执行，那么就会报错。
使用tap而非click
与传统页面不同，所有的手势点击操作都请使用tap，而非click，
这样你的app会有更好的体验。

3.页面间传值
用html做app，不可避免的是页面间传值，

比较推荐的方法有两种：

1.自定义事件传值
    在列表页面用mui.fire激活自定义事件：

  mui.fire(detailPage,'newsId',{
    id:id
  });

.fire( target , event , data )
target
Type: WebviewObject
需传值的目标webview
event
Type: String
自定义事件名称
data
Type: JSON
json格式的数据

这里写代码片

添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加。
    在目标页监听自定义事件：
    // 所有方法都放到这里

mui.plusReady(function(){
    window.addEventListener('detailItem', detailItemHandler);
});

示例：
假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻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向服务器请求新闻详情
  .....
});

2.evaljs传值

这种方法不做推荐，但是偶尔也可以使用，切不可所有传值都用evaljs传值，
在页面调用目标页方法：

qiao.h.indexPage().evalJS("showBackBtn();");

在目标页面定义相应方法：

function showBackBtn(){
    $('.menua').removeClass('mui-icon-bars').addClass('mui-icon-back');
    $('.adda').hide();
}

4.自定义样式
如果你想自定义app的样式，
很简单只需要定义css样式就好了。
推荐使用css class覆盖原生class的方法自定app样式。