基于HTML5学生实训设计的几款APP

一 摘要

今天实训课结束,给大家展示一下同学们做的几款基于HTML5的APP,个人感觉都还做的蛮不错的,接下来给大家一一进行演示一下.

1.<仿淘宝>
2.<阅读>
3.<电影>
4.<新闻>

1.<仿淘宝>

整个效果图

1) 开机引导图

原理跟iOS或者安卓一样.

开机引导代码片段

function launchScreen() {
//读取本地存储，检查是否为首次启动
var showGuide = plus.storage.getItem("lauchFlag");
if(showGuide){
//有值，说明已经显示过了，无需显示；
//关闭splash页面；
plus.navigator.closeSplashscreen();
plus.navigator.setFullscreen(false);
}else{
//显示启动导航
mui.openWindow({
id:'guide',
url:'template/guide.html',
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
}
}

2)主菜单-首页

代码相关片段

var slider = mui("#slider");
var swiperTest = null;
var banerArray = new Array();

mui.init({
swipeBack:true //启用右滑关闭功能
});
var slider = mui("#slider");
slider.slider({
interval: 500
});

3)视频播放

2.<阅读>

整个效果图

1)首页

2)我的

3)数据请求代码片段

mui.plusReady(function(){       mui.ajax('http://api.maoyan.com/mmdb/movie/lp/list.json?utm_campaign=AmovieBmovieCD100&movieBundleVersion=6410&utm_source=baidumobile1&utm_medium=android&utm_term=6.4.1&utm_content=865983027494161&ci=20&net=255&dModel=2014501&uuid=E33AB822B8DCBAD7B494ACD565B57C851DEB94D55A9C81CDE575FAA8B2DB98AA%22',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
success:function(data){
//获得服务器响应
var data= data["data"];
mui.each(data,function(index,item){
var li = document.createElement('li');

li.url = item.url;//详情url
li.title = item.name;
li.className = 'tableView-cell';

}

3.<电影>

整个效果图

4.<新闻>

整个效果图

总结

总体上,大家做的都还不错,能在这么10来时间里,做出这样一个效果,非常不错了.

1.<仿淘宝>源码

2.<阅读>源码

3.<电影>源码

4.<新闻>源码

如果大家最源码比较感兴趣的话,请直接联系我.