说明
接着上节的内容,本节讲首页的list页面,
如果看过上一节你就会明白“首页”是由只有头部的index页面和列表list页面组成的,
本节涉及到:
1.几种页面的打开方式
2.websql的应用
3.页面内容的加载
4.页面实现
几种页面打开方式
如果看过以前的章节你会明白,在Hbuilder,mui中需要放弃href跳转,
而专用mui自带的页面打开方式,为什么?请浏览:MUI开发注意事项 - DCloud问答
这里大概讲一下,详细讲解请关注下一节,
1.open方式
这种方式简单粗暴,直接open一个页面
2.preload方式
这种方式会提前加载好页面,当你需要显示的时候只需要show一下,避免了等待和卡顿
3.subpages方式
这是子页面方式,首页的index.html+list.html就是这种方式,子页面还用来实现下拉刷新和上拉加载
index.html
上一节只实现了index.html的页面部分,也就是html部分,这里讲下js部分,只讲js加载list页面部分,
原谅我又变换了文件结构,不用着急,最后会开源,可能之后还会改变,
上图是上节讲到的页面结构,这里从index.js开始
// 初始化
mui.init({
subpages : [qiao.h.normalPage('list')]
});
var main = null;
var showMenu = false;
var menu = null;
var add = null;
var detail = null;
// 所有方法都放到这里
mui.plusReady(function(){
// 初始化数据库
initDb();
});
// 初始化数据库
function initDb(){
var db = qiao.h.db();
qiao.h.update(db, 'create table if not exists t_plan_day_todo (id unique, plan_title, plan_content)');
qiao.h.update(db, 'create table if not exists t_plan_day_done (id unique, plan_title, plan_content)');
var help = qiao.h.getItem('help');
if(!help){
qiao.h.insertItem('help', 'first');
}
}
1.mui.init
以后你会看到所有页面开头都有这个东西,这个东西必不可少,页面初始化,
有很多用处,子页面,预加载,各种设置等等,这里只用到了子页面,也就是list.html页面
2.subpages
subpages是一个js对象数组,每个对象都是一个子页面,对象形式:
{
url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置 、
width:subpage-width,//子页面宽度,默认为100%
height:subpage-height,//子页面高度,默认为100%
......
},
extras:{}//额外扩展参数
}
其中url是页面的地址,你可以写本地的,也可以写线上的,本例中是list.html
id是标志,以后你要在其他页面获取list页面都靠这个id,
styles,是这个页面整体的样式,比如高宽,比如距离顶部,底部的距离,本例中因为index.html已经占用了头部,所以top会空开。
3.对象文档
看到这里是不是会疑惑,这些页面对象,页面样式对象,到底有哪些属性,哪些方法,
难道一定要在官网例子中去找,太费劲了吧,
其实所有的mui中的对象都是nativejs中的对象,这里用到两个:
webview:HTML5+ API Reference
webviewstyle:HTML5+ API Reference
4.plusready
上面说到mui是ui+对nativejs一部分的封装,
而nativejs想要调用都需要等待nativejs完成,在mui中就是mui.plusready,
基本上每个页面中的最外层的方法就一个mui.init负责初始化,一个mui.plusready负责页面方法执行
5.初始化数据库
上面介绍了这么多,其实index.js在这里只做了两件事情,
一件是mui.init中初始化了子页面list.html,
一件是mui.plusready中初始化数据库
6.数据存储
要做一个app,既然少不了数据存储,
如果仅是本地app那使用本地存储,websql足以;
如果是联网的app,则可以mui.ajax去请求。
本教程针对本地app,使用本地存储和websql,
在index.js的最后可以看到help相关的内容,
大概是,如果本地没有help则新建help,如果有则不操作。
websql可以详见这里:读书-uikoo9.com
7.源码
看到这里是不是被index.js中的一些封装吓到了,其实很简单,这里是源码。
想想
现在停下来想想过程,
app打开——加载index.html——加载index.js
通过mui.init加载list.html子页面
通过mui.plusready初始化数据库(用到websql)
在app第一次启动的时候写入本地help=first键值(用到本地存储)
list.html
页面源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- mui -->
<link type="text/css" rel="stylesheet" href="@/css/mui.min.css"/>
<script type="text/javascript" src="@/js/mui.min.js"></script>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view" style="margin-top:0;display:none;" id="todolist"></ul>
</div>
<!-- jquery -->
<script type="text/javascript" src="@/js/lib/jquery-1.11.2.min.js"></script>
<!-- qiao.js -->
<script type="text/javascript" src="@/js/lib/qiao.js"></script>
<!-- app -->
<script type="text/javascript" src="@/js/app/list.js"></script>
</body>
</html>
是不是发现和index.html大同小异了,不同的是这里用到了mui中的列表组件,可以在这里找到它。
js源码
// 初始化
mui.init({
});
var tapId = null;
// 所有的方法都放到这里
mui.plusReady(function(){
// 获取列表
initHelp();
});
function initHelp(){
var help = qiao.h.getItem('help');
if(help == 'first'){
qiao.h.update(qiao.h.db(), getSql(1, '事项5', '待办事项5'));
qiao.h.update(qiao.h.db(), getSql(2, '事项4', '待办事项4'));
qiao.h.update(qiao.h.db(), getSql(3, '事项3', '待办事项3'));
qiao.h.update(qiao.h.db(), getSql(4, '事项2', '待办事项2'));
qiao.h.update(qiao.h.db(), getSql(5, '事项1', '待办事项1'));
qiao.h.update(qiao.h.db(), getSql(6, '功能8', '退出程序'));
qiao.h.update(qiao.h.db(), getSql(7, '功能7', '右滑菜单'));
qiao.h.update(qiao.h.db(), getSql(8, '功能6', '左上角查看完成事项'));
qiao.h.update(qiao.h.db(), getSql(9, '功能5', '右上角添加待办事项'));
qiao.h.update(qiao.h.db(), getSql(10, '功能4', '长按待办事项可以删除'));
qiao.h.update(qiao.h.db(), getSql(11, '功能3', '右滑待办事项可以完成'));
qiao.h.update(qiao.h.db(), getSql(12, '功能2', '点击待办事项可以查看详情'));
qiao.h.update(qiao.h.db(), getSql(13, '功能1', '首页显示待办事项列表'));
qiao.h.insertItem('help','notfirst');
}
initList();
}
function getSql(index, title, content){
return 'insert into t_plan_day_todo (id, plan_title, plan_content) values (' + index + ', "' + title + '", "' + content + '")';
}
// 初始化待办事项
function initList(){
var $ul = $('#todolist').empty();
qiao.h.query(qiao.h.db(), 'select * from t_plan_day_todo order by id desc', function(res){
for (i = 0; i < res.rows.length; i++) {
$ul.append(genLi(res.rows.item(i)));
}
showList($ul);
});
}
function genLi(data){
var id = data.id;
var title = data.plan_title;
var content = data.plan_content;
var li =
'<li class="mui-table-view-cell" id="todoli_' + id + '" data-id="' + id + '">' +
'<div class="mui-slider-right mui-disabled">' +
'<a class="mui-btn mui-btn-red doneBtn">完成</a>' +
'</div>' +
'<div class="mui-slider-handle">' +
'<div class="mui-media-body">' +
title +
'<p class="mui-ellipsis">'+content+'</p>' +
'</div>' +
'</div>' +
'</li>';
return li;
}
function showList(ul){
if(ul.find('li').size() > 0 && ul.is(':hidden')) ul.show();
}
可以看到js中只做了两件事情:
1.初始化一些数据
用index页面添加到本地存储的help=first做判断,如果是第一次启动app就初始化一些数据,
然后用websql给表中添加了一些数据
2.获取数据并显示
每次进入list页面都回去websql中读取数据,并用jquery拼装好放到页面上,
这里用jq简单的拼装,没有引入其他复杂的js模版,js mv*框架。
ok
到现在,整个首页算是初步完整了,想想:
1.index.html
入口页面,只有一个头,或者头和底部,加载其他页面
2.list.html
首页的主体部分,读取websql,显示数据
3.看看本文顶部的效果吧。