技术：html+css+js+apicloud封装的api

概述

本Demo主要基本的HTML+CSS+JS实现的混合App，通过第三方平台apicloud主要页面有首页资讯+商城，目前数据都是静态的，未模拟动态数据,css布局运用的是flex布局。

详细

代码下载：http://www.demodashi.com/demo/14987.html

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不同代码无法提交。

学习学无止境，一起共勉。

代码下载：http://www.demodashi.com/demo/14987.html

注：本文著作权归作者，由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 一. ...

随机推荐

OpenJ_Bailian 2810 完美立方
题目地址: https://vjudge.net/problem/OpenJ_Bailian-2810 形如a3= b3 + c3 + d3的等式被称为完美立方等式.例如123= 63 + 83 + ...
ASP.NET 页面执行顺序
1.对象初始化(Onlnit方法) 页面中的控件(包括页面本身)都是在它们最初的form中被首次初始化的,通过在aspx页面的后台代码文件的构造器中声明你的对象,页面将知道对象的类型,并知道需要创建多 ...
2200: [Usaco2011 Jan]道路和航线（拓扑排序+dijstra）
Description Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇 (1 <= T <= 25,000),编号为1T.这些城镇之间通过R条 ...
Django分页(二)
Django分页(二) 要求 .设定每页显示数据条数 # # .用户输入页码(第一页.第二页...) # # .设定显示多少页号 # # .获取当前数据总条数 # # .根据设定显示多少页号和数据总条 ...
php mysql 编码问题
php mysql 编码问题问题: PHP从数据库中读取数据,并echo出来,数据中文显示正常:但是echo出新定义的中文字符串,新定义的字符串会乱码. 由此可能是数据库中提取出来的中文编码和php ...
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
在大潮流下,大家都在研究MVVM框架,但是做面向搜索引擎的外网项目还是得用服务器渲染. 在.Net中肯定就是用Razor模板引擎了. .Net Core断臂式重构后,很多在老得Mvc中使用得好好的一些 ...
ddctf2019--web部分writeup
0x00前言上周五开始的DDCTF 2019,整个比赛有一周,题目整体来说感觉很不错,可惜我太菜了,做了4+1道题,还是要努力吧 0x01 web 滴~ 打开看着url,就像文件包含文件名1次he ...
谈谈《Dotnet core结合jquery的前后端加密解密密码密文传输的实现》一文中后端解密失败的原因
详情请看<Dotnet core结合jquery的前后端加密解密密码密文传输的实现>,正常来讲,这个博客里面的代码是没有问题的,但是我有时候却会直接报错,原因是后台解密失败:Interna ...
多表查询、可视化工具、pymysql模块
create table dep( id int primary key auto_increment, name varchar(16), work varchar(16) ); create ta ...
UOJ.35.[模板]后缀排序(后缀数组倍增)
题目链接论找到一个好的教程的正确性.. 后缀数组下标从1编号: //299ms 2560kb #include <cstdio> #include <cstring> #i ...

通过apicloud实现的混合开发App的Demo

概述

详细

代码下载：http://www.demodashi.com/demo/14987.html

代码下载：http://www.demodashi.com/demo/14987.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

通过apicloud实现的混合开发App的Demo的更多相关文章

随机推荐

热门专题