經過apicloud實現的混合開發App的Demo

時間  2019-11-05
標籤 經過 apicloud 實現 混合 開發 app demo 简体版
原文   原文鏈接
技術：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。主要實現的功能有底部導航+路由的封裝+首頁不一樣狀態的佈局顯示+輪播的多種效果+全屏遮罩+規格選擇。css

1、項目目錄

0.jpg

2、演示效果

代碼不復雜，適合入門的同窗們學習，若是想更深刻的瞭解，多看看官方提供的文檔，例子很詳細。html

3、程序實現具體步驟

首頁滑動輪播+佈局 home.htmlweb

<!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.cssapi

.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 廣告*/

 

其餘注意點：app

若是你想直接在本身的編輯器運行，請記得修改config.xml中的id="換成本身的"，不然id不一樣代碼沒法提交。dom

學習學無止境，一塊兒共勉。jsp

代碼下載：http://www.demodashi.com/demo/14987.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程