通过apicloud实现的混合开发App的Demo
技术:html+css+js+apicloud封装的api
概述
本Demo主要基本的HTML+CSS+JS实现的混合App,通过第三方平台apicloud主要页面有首页资讯+商城,目前数据都是静态的,未模拟动态数据,css布局运用的是flex布局。
详细
Demo属于入门实例,未做深入研究,关于Apiclou中的api未做详细介绍。主要是通过HTML+CSS+JS所实现的App。主要实现的功能有底部导航+路由的封装+首页不同状态的布局显示+轮播的多种效果+全屏遮罩+规格选择。
一、项目目录
二、演示效果
代码不复杂,适合入门的同学们学习,如果想更深入的了解,多看看官方提供的文档,例子很详细。
三、程序实现具体步骤
首页滑动轮播+布局 home.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" /> <meta name="format-detection" content="telephone=no, email=no, date=no, address=no"> <title>首页</title> <link rel="stylesheet" type="text/css" href="../../css/api.css" /> <link rel="stylesheet" href="../../css/swiper.min.css"> <link rel="stylesheet" href="../home/statc/css/home.css"> <script src="../../script/nutil.js"></script> </head> <body> <header> <div class="title">有钱有矿</div> <div style="flex:1"></div> <div>图标</div> </header> <div class="content"> <!-- 导航 --> <div class="lists-paraent"> <ul class="lists"> <li class="list"> <a href="#" class="hongbao" onclick="push_navigator('RedEnvelopes','../RedEnvelopes/RedEnvelopes.html')"> <img class='list-img' src="../../image/hongbao.png" alt=""> <span class="list-text">红包</span> </a> </li> <li class="list"> <img class='list-img' src="../../image/dianying.png" alt=""> <span class="list-text">影视大全</span> </li> <li class="list"> <img class='list-img' src="../../image/xiaoshuo.png" alt=""> <span class="list-text">小说</span> </li> <li class="list"> <img class='list-img' src="../../image/zixun.png" alt=""> <span class="list-text">资讯</span> </li> <li class="list"> <a href="#" class="hongbao"> <img class='list-img' src="../../image/hongbao.png" alt=""> <span class="list-text">红包</span> </a> </li> <li class="list"> <img class='list-img' src="../../image/dianying.png" alt=""> <span class="list-text">影视大全</span> </li> <li class="list"> <img class='list-img' src="../../image/xiaoshuo.png" alt=""> <span class="list-text">小说</span> </li> <li class="list"> <img class='list-img' src="../../image/zixun.png" alt=""> <span class="list-text">资讯</span> </li> </ul> </div> <!-- 导航 --> <!-- 资讯推荐一条模版一 左右布局--> <div class="info" onclick="push_navigator('newContent','../home/content.html')"> <div class="info-text"> <div class="info-title">宝宝被小鸡逗得忍不住大笑,这笑声太有感染力了,根本停不下来</div> <div class="info-load">鹦鹉娱乐</div> </div> <div style="flex:1"></div> <div class="info-img"> <img src="../../image/7.png" alt=""> </div> </div> <!-- 资讯推荐一条模版一 左右布局--> <!-- 资讯推荐一条模版二 上下布局--> <div class="infos"> <div class="infos-text">宝宝被小鸡逗得忍不住大笑,这笑声太有感染力了,根本停不下来</div> <div class="infos-img"> <img src="../../image/8.jpg" alt=""> <img src="../../image/9.jpg" alt=""> <img src="../../image/10.jpg" alt=""> </div> <div class="info-load">鹦鹉娱乐</div> </div> <!-- 资讯推荐一条模版二 上下布局--> <!-- 滑动轮播 模版三 --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../../image/5.jpg" alt=""> <div class="swiper-load">快手</div> </div> <div class="swiper-slide"> <img src="../../image/6.jpg" alt=""> <div class="swiper-load">快手</div> </div> <div class="swiper-slide"> <img src="../../image/5.jpg" alt=""> <div class="swiper-load">快手</div> </div> <div class="swiper-slide"> <img src="../../image/6.jpg" alt=""> <div class="swiper-load">快手</div> </div> <div class="swiper-slide"> <img src="../../image/5.jpg" alt=""> <div class="swiper-load">快手</div> </div> <div class="swiper-slide"> <img src="../../image/6.jpg" alt=""> <div class="swiper-load">快手</div> </div> </div> </div> <div class="infos"> <div class="infos-text">宝宝被小鸡逗得忍不住大笑,这笑声太有感染力了,根本停不下来</div> <div class="infos-img"> <img src="../../image/1.jpg" alt=""> <img src="../../image/2.jpg" alt=""> <img src="../../image/3.jpg" alt=""> </div> <div class="info-load">鹦鹉娱乐</div> </div> <div class="info" onclick="push_navigator('newContent','../news/content.html')"> <div class="info-text"> <div class="info-title">宝宝被小鸡逗得忍不住大笑,这笑声太有感染力了,根本停不下来</div> <div class="info-load">鹦鹉娱乐</div> </div> <div style="flex:1"></div> <div class="info-img"> <img src="../../image/7.png" alt=""> </div> </div> <div class="infos"> <div class="infos-text">宝宝被小鸡逗得忍不住大笑,这笑声太有感染力了,根本停不下来</div> <div class="infos-img"> <img src="../../image/4.jpg" alt=""> <img src="../../image/5.jpg" alt=""> <img src="../../image/6.jpg" alt=""> </div> <div class="info-load">鹦鹉娱乐</div> </div> <div class="infos"> <div class="infos-text">宝宝被小鸡逗得忍不住大笑,这笑声太有感染力了,根本停不下来</div> <div class="infos-img"> <img src="../../image/3.jpg" alt=""> <img src="../../image/2.jpg" alt=""> <img src="../../image/4.jpg" alt=""> </div> <div class="info-load">鹦鹉娱乐</div> </div> <!-- 滑动轮播 模版三--> <!-- 广告 --> <div class="widsue"> <div class="widsue-title">快乐小游戏:赚钱神奇</div> <div class="widsue-img"> <img src="../../image/12.jpg" alt=""> </div> <div class="widsue-load">(广告)快乐小游戏:赚钱神奇</div> </div> <!-- 广告 --> </div> </body> <script src="../../script/swiper.min.js"></script> <script src="../../script/api.js"></script> <script src="../home/statc/js/home.js"></script> <script> // $api.addEvt($api.dom('.hongbao'), 'click', function(){ // console.log('333') // }); </script> </html>
首页滑动轮播+布局 home.css
.title{ font-size: 20px; } .content{ margin-top: 40px; box-sizing: border-box; } /*list state*/ .lists-paraent{ border-bottom:4px solid #f5f5f5; padding-bottom: 14px; } .lists-paraent .lists{ display: flex; flex-wrap: wrap; box-sizing: border-box; } .lists-paraent .list{ width: 16.66%; justify-content: center; align-items: center; text-align: center; padding-top: 14px; } .lists-paraent .list-img{ width: 28px; height: 28px; } .lists-paraent .list-text{ font-size: 12px; display: block; color: #808080; } /*list*/ /*info模版一*/ .info{ display: flex; padding: 13px 13px 10px 13px; box-sizing: border-box; overflow: hidden; border-bottom: 1px solid #f5f5f5; /*display: none;*/ } .info-text .info-title{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; height: 50px; line-height: 25px; color: #333; font-size: 16px; padding-right: 13px; box-sizing: border-box; } .info-text .info-load{ font-size: 12px; color: #808080; padding-top: 8px; } .info-img img{ width: 120px; height: 80px; } /*info模版一*/ /*info模版二*/ .infos{ padding: 13px 13px 10px 13px; box-sizing: border-box; overflow: hidden; border-bottom: 1px solid #f5f5f5; } .infos-text{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; height: 50px; line-height: 25px; color: #333; font-size: 16px; padding-bottom: 10px; } .infos-img{ width: 100%; } .infos-img img{ width: 32.3%; height: 80px; } .infos .info-load{ font-size: 12px; color: #808080; padding-top: 8px; } /*info模版二*/ .swiper-container{ padding: 13px 13px 10px 13px; box-sizing: border-box; overflow: hidden; border-bottom: 1px solid #f5f5f5; } .swiper-slide{ height: 200px; } .swiper-slide img{ width: 100%; height: 90%; } .swiper-load{ font-size: 12px; color: #808080; padding-top: 3px; } /*widsue 广告*/ .widsue{ padding: 13px 13px 10px 13px; box-sizing: border-box; overflow: hidden; border-bottom: 1px solid #f5f5f5; } .widsue .widsue-title{ color: #333; font-size: 16px; padding-bottom: 10px; } .widsue-img img{ width: 100%; height: 200px; } .widsue-load{ font-size: 12px; color: #808080; padding-top: 8px; } /*widsue 广告*/
其他注意点:
如果你想直接在自己的编辑器运行,请记得修改config.xml中的id="换成自己的",否则id不同代码无法提交。
学习学无止境,一起共勉。