所谓页面开发就是使用HTML5页面开发了，我们开发网页使用HTML和JS，而Hbuilder也是这样，不过呢前端框架使用的MUI，里面有写好的组件，只需要你自己拿来组装就行了。而JS呢则是使用封装的JS，可以是Jquery可以是Native.js等等。
关于mui参考文档：http://dev.dcloud.net.cn/mui/ui/#grid
同时关于Hbuilder得其他资料都在此：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/93
看一下今天实现得功能界面：
1.底部导航栏，实现点击不同栏目不同页面展示
2.顶部搜索
3.图片轮播
4.个人信息界面
粗糙得成品：（打成包放手机里截得图）
上面页面虽然简陋了点，但是还是实现了效果，后面会美化以及根据业务制定图标。
index.html是最先进入得页面，所以代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>首页信息</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<nav class="mui-bar mui-bar-tab" id="nav">
<a class="mui-tab-item mui-active" href="home.html" id="tab_home">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="tab_inventory">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">库存</span>
</a>
<a class="mui-tab-item" id="tab_statistics">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">统计</span>
</a>
<a class="mui-tab-item" id="tab_myinfo">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
subpages:[
//首先加载首页
{
url:'page/home.html',
id:'tab_home',
styles:{
top:'0px',
bottom:'60px'
}
}
],
preloadPages:[//预加载其他页面
{
url:'page/inventory.html',
id:'tab_inventory' ,
styles:{
top:'0px',
bottom:'60px'
}
},
{
url:'page/inventory.html',
id:'tab_statistics',
styles:{
top:'0px',
bottom:'60px'
}
},
{
url:'page/setting.html',
id:'tab_myinfo',
styles:{
top:'0px',
bottom:'60px'
}
}
]
});
mui.plusReady(function(){
var arr =document.getElementsByClassName("mui-tab-item");
var objYe = ["page/home.html","page/inventory.html","page/inventory.html","page/setting.html"];
var objStyle = {top:"0px",bottom:"60px"};
var objs=[];
var self = plus.webview.currentWebview();//取到当前的主页窗口
for (var i=0;i<arr.length;i++){
!function(i){
var obj = plus.webview.create(objYe[i],objYe[i],objStyle);
objs.push(obj);
arr[i].addEventListener("tap",function(){
for(var j=0;j<arr.length;j++){
if(j!=i){objs[j].hide()}
else{objs[j].show()}
}
self.append(objs[i])
})
}(i)
}
mui.trigger(arr[0],"tap");
})
</script>
</html>JS中的页面也给出，基本上都是使用MUI帮助文档中组建粘贴进来的
home.html:这个就是看到的首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页九宫格页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
<!-- <style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
</style>-->
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #00A9F6;">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<div class="mui-input-row mui-search" style="position: absolute;left: 80px;">
<input type="search" class="mui-input-clear" placeholder="商品、订单、库存">
</div>
</header>
<div class="mui-content">
<!--轮播图片-->
<div id="slider" class="mui-slider" style="height: 120px;">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="./images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<br/>
<!--9宫格-->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">商品管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">采购单</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">销售单</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">客户管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">库存管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">订单管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">账务管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">统计管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">系统管理</div></a></li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
//图片轮播
var slider = mui("#slider");
slider.slider({
interval: 5000
});
</script>
</html>inventory.html：这个是库存界面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>库存页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #00A9F6;">
<h1 class="mui-title">库存</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">商品管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">采购单</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">销售单</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">客户管理</div></a></li>
</ul>
<br>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">商品管理</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">采购单</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">销售单</div></a></li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>setting.html:这个就是我的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-pages {
top: 46px;
height: auto;
}
.mui-scroll-wrapper,
.mui-scroll {
background-color: #efeff4;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}
.mui-navbar .mui-bar {
position: absolute;
background: transparent;
text-align: center;
}
.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}
.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
.mui-page .mui-table-view:first-child {
margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
margin-bottom: 30px;
}
.mui-table-view {
margin-top: 20px;
}
.mui-table-view span.mui-pull-right {
color: #999;
}
.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}
.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}
.head {
height: 40px;
}
#head {
line-height: 40px;
}
.head-img {
width: 40px;
height: 40px;
}
#head-img1 {
position: absolute;
bottom: 10px;
right: 40px;
width: 40px;
height: 40px;
}
.update {
font-style: normal;
color: #999999;
margin-right: -25px;
font-size: 15px
}
.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
/*问题反馈在setting页面单独的css*/
#feedback .mui-popover{
position: fixed;
}
#feedback .mui-table-view:last-child {
margin-bottom: 0px;
}
#feedback .mui-table-view:first-child {
margin-top: 0px;
}
.mui-plus.mui-plus-stream .mui-stream-hidden{
display: none !important;
}
/*问题反馈在setting页面单独的css==end*/
</style>
<link rel="stylesheet" type="text/css" href="../css/feedback.css" />
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar">
</div>
<div class="mui-pages">
</div>
</div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="setting" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-center mui-title">设置</h1>
</div>
<!--页面标题栏结束-->
<!--页面主内容区开始-->
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right" href="#account">
<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
<div class="mui-media-body">
Hello MUI
<p class='mui-ellipsis'>账号:hellomui</p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#account" class="mui-navigate-right">账号与安全</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#notifications" class="mui-navigate-right">新消息通知</a>
</li>
<li class="mui-table-view-cell">
<a href="#privacy" class="mui-navigate-right">隐私</a>
</li>
<li class="mui-table-view-cell">
<a href="#general" class="mui-navigate-right">通用</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.1.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell" style="text-align: center;">
<a>退出登录</a>
</li>
</ul>
</div>
</div>
</div>
<!--页面主内容区结束-->
</div>
<!--单页面结束-->
<div id="account" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">账号与安全</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head">
<img class="head-img mui-action-preview" id="head-img1" src=""/>
</span>
</a>
</li>
<li class="mui-table-view-cell">
<a>姓名<span class="mui-pull-right">Hbuilder</span></a>
</li>
<li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>QQ号<span class="mui-pull-right">88888888</span></a>
</li>
<li class="mui-table-view-cell">
<a>手机号<span class="mui-pull-right">18601234567</span></a>
</li>
<li class="mui-table-view-cell">
<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="notifications" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">新消息通知</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
通知显示消息详情
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-content-padded">
<p>若关闭，当收到新消息时，通知提示将不显示发信人和内容摘要</p>
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
</li>
</ul>
<div class="mui-content-padded">
<p>设置系统功能消息提示声音和震动的时段</p>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
声音
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
震动
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-content-padded">
<p>当HelloMUI在运行时，你可以设置是否需要声音或者震动</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
<div id="notifications_disturb" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>新消息通知
</button>
<h1 class="mui-center mui-title">功能消息免打扰</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">开启</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">只在夜间开启</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">关闭</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="privacy" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">隐私</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-divider">通讯录</li>
<li class="mui-table-view-cell">
加我为朋友时需要验证
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
向我推荐QQ好友
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
通过QQ号搜索到我
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
可通过手机号搜索到我
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
向我推荐通讯录朋友
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">开启后，为你推荐已经开通HBuilder的手机联系人</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
通过HBuilder账号搜索到我
<div class="mui-switch mui-active mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-divider">关闭后，其他用户将不能通过HBuilder号搜索到你</li>
</ul>
</div>
</div>
</div>
</div>
<div id="general" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">通用</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
多语言
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
听筒模式
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
功能
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="about" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">关于MUI</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-plus-visible mui-stream-hidden">
<a id="rate" class="mui-navigate-right">评分鼓励</a>
</li>
<li class="mui-table-view-cell mui-plus-visible">
<a id="welcome" class="mui-navigate-right">欢迎页</a>
</li>
<li class="mui-table-view-cell mui-plus-visible">
<a id="share" class="mui-navigate-right">分享推荐</a>
</li>
<li class="mui-table-view-cell">
<a id="tel" class="mui-navigate-right">客服电话</a>
</li>
<li class="mui-table-view-cell">
<a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
</li>
<li id="check_update" class="mui-table-view-cell mui-plus-visible">
<a id="update" class="mui-navigate-right">检查更新</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="feedback" class="mui-page feedback">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>关于MUI
</button>
<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
<h1 class="mui-center mui-title">问题反馈</h1>
</div>
<div class="mui-page-content">
<div class="mui-content-padded">
<div class="mui-inline">问题和意见</div>
<a class="mui-pull-right mui-inline" href="#popover">
快捷输入
<span class="mui-icon mui-icon-arrowdown"></span>
</a>
<!--快捷输入具体内容，开发者可自己替换常用语-->
<div id="popover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<!--仅流应用环境下显示-->
<li class="mui-table-view-cell stream">
<a href="#">桌面快捷方式创建失败</a>
</li>
<li class="mui-table-view-cell"><a href="#">界面显示错乱</a></li>
<li class="mui-table-view-cell"><a href="#">启动缓慢，卡出翔了</a></li>
<li class="mui-table-view-cell"><a href="#">偶发性崩溃</a></li>
<li class="mui-table-view-cell"><a href="#">UI无法直视，丑哭了</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row mui-input-row">
<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
</div>
<p>图片(选填,提供问题截图,总大小10M以下)</p>
<div id='image-list' class="row image-list"></div>
<p>QQ/邮箱</p>
<div class="mui-input-row">
<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
</div>
<div class="mui-content-padded">
<div class="mui-inline">应用评分</div>
<div class="icons mui-inline" style="margin-left: 6px;">
<i data-index="1" class="mui-icon mui-icon-star"></i>
<i data-index="2" class="mui-icon mui-icon-star"></i>
<i data-index="3" class="mui-icon mui-icon-star"></i>
<i data-index="4" class="mui-icon mui-icon-star"></i>
<i data-index="5" class="mui-icon mui-icon-star"></i>
</div>
</div><br />
</div>
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.view.js "></script>
<script src='../js/feedback.js'></script>
<script>
mui.init();
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#setting'
});
//初始化单页的区域滚动
mui('.mui-scroll-wrapper').scroll();
//分享操作
var shares = {};
mui.plusReady(function() {
plus.share.getServices(function(s) {
if (s && s.length > 0) {
for (var i = 0; i < s.length; i++) {
var t = s[i];
shares[t.id] = t;
}
}
}, function() {
console.log("获取分享服务列表失败");
});
});
setTimeout(function () {
defaultImg();
setTimeout(function() {
initImgPreview();
}, 300);
},500);
//分享链接点击事件
document.getElementById("share").addEventListener('tap', function() {
var ids = [{
id: "weixin",
ex: "WXSceneSession"
}, {
id: "weixin",
ex: "WXSceneTimeline"
}, {
id: "sinaweibo"
}, {
id: "tencentweibo"
}, {
id: "qq"
}],
bts = [{
title: "发送给微信好友"
}, {
title: "分享到微信朋友圈"
}, {
title: "分享到新浪微博"
}, {
title: "分享到腾讯微博"
}, {
title: "分享到QQ"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
}, function(e) {
var i = e.index;
if (i > 0) {
var s_id = ids[i - 1].id;
var share = shares[s_id];
if (share) {
if (share.authenticated) {
shareMessage(share, ids[i - 1].ex);
} else {
share.authorize(function() {
shareMessage(share, ids[i - 1].ex);
}, function(e) {
console.log("认证授权失败：" + e.code + " - " + e.message);
});
}
} else {
mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包")
}
}
});
});
function shareMessage(share, ex) {
var msg = {
extra: {
scene: ex
}
};
msg.href = "http://www.dcloud.io/hellomui/";
msg.title = "最接近原生APP体验的高性能前端框架";
msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
if (~share.id.indexOf('weibo')) {
msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
}
msg.thumbs = ["_www/images/logo.png"];
share.send(msg, function() {
console.log("分享到\"" + share.description + "\"成功！ ");
}, function(e) {
console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
});
}
//去评分
document.getElementById("rate").addEventListener('tap', function() {
if (mui.os.ios) {
location.href = 'https://itunes.apple.com/cn/app/hello-mui/id907931805?l=en&mt=8';
} else if (mui.os.android) {
plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持");
}, "com.qihoo.appstore");
}, "com.tencent.android.qqdownloader");
}
});
//客服电话
document.getElementById("tel").addEventListener('tap', function() {
if(mui.os.plus){
plus.device.dial("114");
}else{
location.href = 'tel:114';
}
});
//检查更新
document.getElementById("update").addEventListener('tap', function() {
var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
mui.getJSON(server, {
"appid": plus.runtime.appid,
"version": plus.runtime.version,
"imei": plus.device.imei
}, function(data) {
if (data.status) {
plus.ui.confirm(data.note, function(i) {
if (0 == i) {
plus.runtime.openURL(data.url);
}
}, data.title, ["立即更新", "取 消"]);
} else {
mui.toast('Hello MUI 已是最新版本~')
}
});
});
var view = viewApi.view;
(function($) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) {
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
// console.log(e.detail.page.id + ' show');
});
view.addEventListener('pageBeforeBack', function(e) {
// console.log(e.detail.page.id + ' beforeBack');
});
view.addEventListener('pageBack', function(e) {
// console.log(e.detail.page.id + ' back');
});
})(mui);
//更换头像
mui(".mui-table-view-cell").on("tap", "#head", function(e) {
if(mui.os.plus){
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改头像",
cancel: "取消",
buttons: a
}, function(b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
}
});
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
console.log(s);
document.getElementById("head-img").src = s;
document.getElementById("head-img1").src = s;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.jpg"
})
}
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.jpg", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'head.jpg', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img").src = e;
document.getElementById("head-img1").src = e;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
},
function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'head.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
document.getElementById("head-img").src = path;
document.getElementById("head-img1").src = path;
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
},
function(e) {
console.log('copy image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
function defaultImg() {
if(mui.os.plus){
plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
var s = entry.fullPath + "?version=" + new Date().getTime();;
document.getElementById("head-img").src = s;
document.getElementById("head-img1").src = s;
}, function(e) {
document.getElementById("head-img").src = '../images/logo.png';
document.getElementById("head-img1").src = '../images/logo.png';
})
}else{
document.getElementById("head-img").src = '../images/logo.png';
document.getElementById("head-img1").src = '../images/logo.png';
}
}
document.getElementById("head-img1").addEventListener('tap', function(e) {
e.stopPropagation();
});
document.getElementById("welcome").addEventListener('tap', function(e) {
//显示启动导航
mui.openWindow({
id: 'guide',
url: 'guide.html',
show: {
aniShow: 'fade-in',
duration: 300
},
waiting: {
autoShow: false
}
});
});
function initImgPreview() {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
if (imgs && imgs.length > 0) {
var slider = document.createElement("div");
slider.setAttribute("id", "__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap", function() {
slider.style.display = "none";
});
slider.addEventListener("touchmove", function(event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id", "__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function(value, index, array) {
//给图片添加点击事件，触发预览显示；
value.addEventListener('tap', function() {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index, 0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
var img = document.createElement("img");
img.setAttribute("src", value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
}
}
if(mui.os.stream){
document.getElementById("check_update").display = "none";
}
</script>
</html>上面的代码看着太多了，尤其是最后一个，所以你不妨不看，因为都是样例组建，后面会针对每个功能修改相应的页面的，现在主要是熟悉MUI以及方法调用
里面有些页面引用的js可以从First那个项目中找，都有的。
后续有什么坑会记录。目前要开发的页面还很多，今天把页面熟悉了，后一篇将针对每一个组建进行实际开发讲解，当然了我也是边学便开发。
坑1：Tab那个页面转换是使用展示隐藏，而不是href跳转。也不支持a标签href
坑2：轮播最后一张到第一张时有空白页
坑3：开发视图下，使用js这个调用tab转换是不好使的，在手机上调试可以
最后把我打包的安卓文件包给大家，有兴趣下载到安卓手机安装就行了（*^____^*没病毒，也没能力植入病毒啥的，只支持安卓）
文件包：https://pan.baidu.com/s/11b91ra5qd7Pd8aGrfEY3DA
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
