通过apicloud实现的混合开发App的Demo
概述
详细
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不同代码无法提交。
学习学无止境，一起共勉。
注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权
通过apicloud实现的混合开发App的Demo的更多相关文章
- H5混合开发app常用代码
1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...
- react混合开发APP，资源分享
第一个: 链接:https://pan.baidu.com/s/1KdIs8EUcB9YTuK9VW1dC7g 密码:b68m 第二个: 链接:https://pan.baidu.com/s/1mi7 ...
- cordova 使用H5混合开发APP
cordova 中文官网 http://cordova.axuer.com/docs/zh-cn/latest/
- 谈谈App的混合开发
一.概念 App混合开发,顾名思义,是一个开发模式,指的是开发一个App一部分功能用native构建一部分功能用html5构建,英文名叫:Hybrid App. 在几年前就已经出现了App混合开发模式 ...
- Cordova 开发 App
Cordova 是一个开源的移动开发框架.允许你用标准的 Web 技术——HTML5,CSS3 和 JavaScript 做跨平台开发.应用在每个平台的具体执行被封装了起来,并依靠符合标准的 API ...
- APICloud开发App总结(一)
apiCloud app 开发是最近一两年刚刚兴起的一种混合开发方式.常用的模块以原生方式开发好,然后用js进行粘合.组织,完成整个的app的逻辑.这种开发方式极大的提高了软件模块的复用率,加快了ap ...
- 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下，android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
- 浅谈App原生开发、混合开发及HTML5开发的优劣
App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...
- 基于ionic+angulajs的混合开发实现地铁APP
基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...
随机推荐
- 蓝桥杯 跳蚱蜢 （bfs）
转载自:https://blog.csdn.net/wayway0554/article/details/79715658 本题的解题关键就在于将蚱蜢在跳转换为盘子在跳. 当使用string当做每一个 ...
- mac 命令操作
内核空间和用户空间 x86架构中将内核地址空间划分三部分:ZONE_DMA.ZONE_NORMAL和 ZONE_HIGHMEM. 自动加载(开机自动启动服务) ln -sfv /usr/local/o ...
- Idea问题：“marketplace plugins are not loaded”解决方案
博主本人遇见该问题时是想要通过Idea的plugins工具下载阿里巴巴的代码规约工具 但是在我点开settings,然后打开plugins工具时竟然给我提示“marketplace plugins a ...
- Addition Chains POJ - 2248 （bfs / dfs / 迭代加深）
An addition chain for n is an integer sequence <a0, a1,a2,...,am=""> with the follow ...
- Django 学习第九天——请求与响应
一.HttpRequest 对象: 服务器接收到http协议的请求后,会根据报文创建 HttpRequest 对象视图函数的第一个参数是HttpRequest 对象再django.http 模块中定义 ...
- 基于335X的UBOOT网口驱动分析
基于335X的UBOOT网口驱动分析 一.软硬件平台资料 1. 开发板:创龙AM3359核心板,网口采用RMII形式 2. UBOOT版本:U-Boot-2016.05,采用FDT和DM. 参考链 ...
- oracle中to_timestamp和to_date什么区别
date类型是Oracle常用的日期型变量,时间间隔是秒.两个日期型相减得到是两个时间的间隔,注意单位是“天”. timestamp是DATE类型的扩展,可以精确到小数秒(fractional_sec ...
- shell编程第一天
shell编程基础 脚本:简单来说就是一条条的文字命令(一些指令的堆积)Shell属于内置的脚本 1.程序开发效率非常高,依赖于功能强大的命令可以迅速地完成开发任务(批处理) 2.语法简单,代码写起来 ...
- 熔断器---Hystrix
Hystrix:熔断器,容错管理工具,旨在通过熔断机制控制服务和第三方库的节点,从而对延迟和故障提供更强大的容错能力. 说到熔断器,先要引入另外一个词,雪崩效应. 雪崩效应,百度百科的解释是这样的: ...
- 给有C或C++基础的Python入门 ：Python Crash Course 4 操作列表 4.4 -- 4.5
上接前一篇文章. 4.4 使用列表的一部分 一,切片 切边,顾名思义,就是处理列表的部分元素. 我们可以联系一下C++的一段语句:for(int i = 0; i < n-2; ++i) cou ...