手机App

首先让我们设置一下主页的css样式，。

<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">杰瑞教育1701</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
1.图文列表跳转详情页并传参
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
2.底部选项卡切换(系统)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
3.底部选项卡切换自定义
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
4.调用摄像头拍摄功能
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
5.图片轮播
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
6.下拉刷新&上拉加载
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
7.UI组件
</a>
</li>
</ul>
</div>

</body>

页面初始化

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：

mui.plusReady(function(){
     console.log("当前页面URL："+plus.webview.currentWebview().getURL());
});

mui.init() mui插件初始化

mui.ready() 当DOM准备就绪时，指定一个函数来执行。

代码块激活字符:

minit

创建子页面

在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。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:{}//额外扩展参数
    }]
  });
这是主页的html文件。

</script>