说明
如果看过上一节你就会明白“首页”是由只有头部的index页面和列表list页面组成的,
本节涉及到:
1.几种页面的打开方式
2.websql的应用
4.页面实现
几种页面打开方式
如果看过以前的章节你会明白,在Hbuilder,mui中需要放弃href跳转,
而专用mui自带的页面打开方式,为什么?请浏览:http://ask.dcloud.net.cn/article/122
这里大概讲一下,详细讲解请关注下一节,
1.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_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:http://www.dcloud.io/docs/api/zh_cn/webview.html
webviewstyle:http://www.dcloud.io/docs/api/zh_cn/webview.html#plus.webview.WebviewStyle
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那使用本地存储,websql足以;
如果是联网的app,则可以mui.ajax去请求。
本教程针对本地app,使用本地存储和websql,
在index.js的最后可以看到help相关的内容,
大概是,如果本地没有help则新建help,如果有则不操作。
websql可以详见这里:http://uikoo9.com/book/chapterDetail/5
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_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就初始化一些数据,
每次进入list页面都回去websql中读取数据,并用jquery拼装好放到页面上,
这里用jq简单的拼装,没有引入其他复杂的js模版,js mv*框架。
ok
到现在,整个首页算是初步完整了,想想:
1.index.html
2.list.html
3.看看本文顶部的效果吧。
更多教程:
HBuilder开发App教程:http://uikoo9.com/book/detail/3
更多学习笔记:http://uikoo9.com/book
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。