使用H5搭建webapp主页面

最新推荐文章于 2023-08-23 19:00:00 发布
最新推荐文章于 2023-08-23 19:00:00 发布
阅读量803 收藏 1
点赞数
分类专栏： it; 文章标签： it web app 手机

使用H5搭建webapp主页面


主页面搭建


思路分析：

Meta标签中的ViewPort属性：ViewPort是承载代码层的一个View视图，而手机浏览器看到网页是承载ViewPort视图。因此，手机看到的层级关系，从上到下：代码View视图->ViewPort视图->浏览器视图。

所以我们只需要修改ViewPort这一层的属性，比如缩放等，即可对手机进行响应式布局，即安卓的自适应布局。


实现的效果图：（左右拖拽即可实现自动调整大小）



步骤一：搭建工程目录结构



步骤二：在index.html中声明ViewPort，输入meta：vp按下tab键自动生成，规定宽度为手机宽度，缩放比例为1



步骤三：由于每个浏览器的默认边距，默认属性的不同，我们需要全部初始化一遍，达到适应不同浏览器。

编写我们的common.css文件，记得在index.html中导入

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. *,  
  2. ::after,  
  3. ::before{  
  4.   margin: 0;  
  5.   padding: 0;  
  6.   /*当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色*/  
  7.   -webkit-tap-highlight-color: transparent;  
  8.   /*设置所有是以边框开始计算宽度  百分比*/  
  9.   -webkit-box-sizing:border-box;  
  10.   box-sizing: border-box;  
  11. }  
  12. body{  
  13.     font-size: 14px;  
  14.     font-family: "Microsoft YaHei","sans-serif";  
  15.     color: #333;  
  16. }  
  17. a{  
  18.     color: #333;  
  19.     text-decoration: none;  
  20. }  
  21. a:hover{  
  22.     text-decoration: none;  
  23. }  
  24. input{  
  25.     border: none;  
  26.     outline: none;  
  27.     /*清除移动端默认的表单样式*/  
  28.     -webkit-appearance:none;  
  29. }  
  30. li{  
  31.     list-style: none;  
  32. }  


步骤四：编写index.html文件

[html]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. <body>  
  2.     <div class="layout">  
  3.           
  4.     </div>  
  5. </body>  


步骤五：编写index.css，来对这个layout类进行布局

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. .layout{  
  2.     width: 100%;  
  3.     max-width: 640px;  
  4.     min-width: 320px;  
  5.     height: 1000px;  
  6.     margin: 0 auto;  
  7.     background: #ff0000;  
  8. }  


实现效果图：



轮播图和导航栏的搭建


思路分析：

1、导航栏实现：导航栏使用css的position=fixed和z-index=1000，使它固定在顶部并在网页的最上层，左边的icon和右边登陆按钮使用绝对位置来调整距离左边右边上边的距离，而中间的form表单只要Padding-Left和Padding-Right就可以随屏幕伸缩。

2、自动轮播效果实现：这里使用了jQuery的一个js开源库unslider。

3、十个选项按钮实现：使用一个列表，设置每一个li为块元素，宽度为20%，并且让10个选项左浮动，就可以自动排好两行。


实现的效果图：



导航栏实现

步骤一：编写html文件，将导航栏做成一个盒子，并放置需要的组件，并为它们取好类名，方便css的编写

[html]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. <!--搜索头部-->  
  2. <header class="nav_header">  
  3.     <div class="nav">  
  4.         <a href="#" class="nav_logo"></a>  
  5.         <!-- 小键盘  enter 改变成  搜索 按钮 -->  
  6.         <form action="#">  
  7.             <span class="nav_search_icon"></span>  
  8.             <input type="search" placeholder="搜索关键字"/>  
  9.         </form>  
  10.         <a href="#" class="nav_login">登录</a>  
  11.     </div>  
  12. </header>  


步骤二：编写css文件，将放置的东西设置好宽高，宽用百分比可以自适应，高度则是自己测量

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. /*nav*/  
  2. .nav_header{  
  3.     position: fixed;  
  4.     height: 40px;  
  5.     width: 100%;  
  6.     top: 0;  
  7.     left: 0;  
  8.     z-index: 1000;  
  9. }  
  10. .nav_header> .nav{  
  11.     width: 100%;  
  12.     height: 40px;  
  13.     max-width: 640px;  
  14.     min-width: 320px;  
  15.     margin: 0 auto;  
  16.     background:rgba(201,21,35,0.00);  
  17.     position: relative;  
  18. }  
  19. .nav_header> .nav> .nav_logo{  
  20.     width: 80px;  
  21.     height: 30px;  
  22.     position: absolute;  
  23.     background: url("../img/top_logo.png") no-repeat;  
  24.     background-size: 80px 20px;  
  25.     top: 10px;  
  26.     left: 0;  
  27. }  
  28. .nav_header> .nav> .nav_login{  
  29.     width: 50px;  
  30.     height: 40px;  
  31.     line-height: 40px;  
  32.     text-align: center;  
  33.     position: absolute;  
  34.     right: 0;  
  35.     top: 0;  
  36.     color: white;  
  37.     font-size: 15px;  
  38. }  
  39. .nav_header> .nav> form{  
  40.     width: 100%;  
  41.     padding-left: 85px;  
  42.     padding-right: 50px;  
  43.     height: 40px;  
  44. }  
  45. .nav_header> .nav> form> input{  
  46.     width: 100%;  
  47.     height: 30px;  
  48.     border-radius: 15px;  
  49.     margin-top: 5px;  
  50.     padding-left: 30px;  
  51. }  
  52. .nav_header> .nav >form >.nav_search_icon{  
  53.     height: 20px;  
  54.     width: 20px;  
  55.     background:url("../img/top_search.png");  
  56.     background-size: 20px 20px;  
  57.     position: absolute;  
  58.     left: 90px;  
  59.     top: 10px;  
  60. }  


自动轮播实现

步骤一：根据官网编写自动轮播html文件

[java]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. <!--轮播图-->  
  2. <div class="banner">  
  3.     <div>  
  4.         <ul>  
  5.             <li><a><img src="img/banner_01.jpg"></a></li>  
  6.             <li><a><img src="img/banner_02.jpg"></a></li>  
  7.             <li><a><img src="img/banner_03.jpg"></a></li>  
  8.             <li><a><img src="img/banner_04.jpg"></a></li>  
  9.             <li><a><img src="img/banner_05.jpg"></a></li>  
  10.         </ul>  
  11.     </div>  
  12. </div>  


步骤二：根据官网导入js文件，需要下载unslider.js，它是基于JQuery.js的，所以需要下载2个，导入到项目中

[java]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1.        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>  
  2. <script type="text/javascript" src="js/unslider.js"></script>  
  3. <script>  
  4. $(function() {  
  5.     $('.banner').unslider({  
  6.         speed : 500,  
  7.            delay : 3000,  
  8.            nav : true,//是否启动导航图标  
  9.            dots: true,//是否出先圆点点  
  10.            arrows : false,  
  11.            autoplay : true //自动轮播             
  12.     });  
  13. })  
  14. </script>  


步骤三：为了使图片能让我们手动滑动，还需要导入2个JQuery的库，导入之后就能手动滑动了

[html]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript" src="js/jquery.event.move.js"></script>  
  2. <script type="text/javascript" src="js/jquery.event.swipe.js"></script>  


步骤四：为了让图片能刚好100%显示出来，并且实现自动轮播导航圆点，需要在css中加入实现

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. /*banner*/  
  2. .banner ul li a img{  
  3.     width: 100%;  
  4. }  
  5. .unslider {  
  6.     overflow: auto;  
  7.     margin: 0;  
  8.     padding: 0;  
  9.     /*Added*/  
  10.     position: relative;  
  11. }  
  12. .unslider-nav{  
  13.     position: absolute;  
  14.     width: 100%;  
  15.     bottom: 2%;  
  16. }  


十个选项按钮实现

步骤一：编写html文件

[html]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. <!--导航栏-->  
  2. <nav class="item">  
  3.     <ul class="clearfix">  
  4.         <li>  
  5.             <a href="#">  
  6.                 <img src="img/nav_01.png" alt=""/>  
  7.                 <p>京东超市</p>  
  8.             </a>  
  9.         </li>  
  10.         <li>  
  11.             <a href="#">  
  12.                 <img src="img/nav_02.png" alt=""/>  
  13.                 <p>全球购</p>  
  14.             </a>  
  15.         </li>  
  16.         <li>  
  17.             <a href="#">  
  18.                 <img src="img/nav_03.png" alt=""/>  
  19.                 <p>服装城</p>  
  20.             </a>  
  21.         </li>  
  22.         <li>  
  23.             <a href="#">  
  24.                 <img src="img/nav_04.png" alt=""/>  
  25.                 <p>京东生鲜</p>  
  26.             </a>  
  27.         </li>  
  28.         <li>  
  29.             <a href="#">  
  30.                 <img src="img/nav_05.png" alt=""/>  
  31.                 <p>京东到家</p>  
  32.             </a>  
  33.         </li>  
  34.         <li>  
  35.             <a href="#">  
  36.                 <img src="img/nav_06.png" alt=""/>  
  37.                 <p>充值中心</p>  
  38.             </a>  
  39.         </li>  
  40.         <li>  
  41.             <a href="#">  
  42.                 <img src="img/nav_07.png" alt=""/>  
  43.                 <p>京东金融</p>  
  44.             </a>  
  45.         </li>  
  46.         <li>  
  47.             <a href="#">  
  48.                 <img src="img/nav_08.png" alt=""/>  
  49.                 <p>领券</p>  
  50.             </a>  
  51.         </li>  
  52.         <li>  
  53.             <a href="#">  
  54.                 <img src="img/nav_09.png" alt=""/>  
  55.                 <p>物流查询</p>  
  56.             </a>  
  57.         </li>  
  58.         <li>  
  59.             <a href="#">  
  60.                 <img src="img/nav_10.png" alt=""/>  
  61.                 <p>我的关注</p>  
  62.             </a>  
  63.         </li>  
  64.     </ul>  
  65. </nav>  


步骤二：编写css文件

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. /*item*/  
  2. .item{  
  3.     width: 100%;  
  4.     height: 180px;  
  5.     background: #fff;  
  6.     margin-top: -4px;  
  7.     border-bottom: 1px solid #e0e0e0;  
  8. }  
  9. .item> ul{  
  10.     width: 100%;  
  11. }  
  12. .item> ul> li{  
  13.     width: 20%;  
  14.     float: left;  
  15. }  
  16. .item> ul> li> a{  
  17.     width: 100%;  
  18.     display: block;  
  19.     padding-top: 20px;  
  20. }  
  21. .item> ul> li> a> img{  
  22.     width: 40px;  
  23.     height: 40px;  
  24.     display: block;  
  25.     margin: 0 auto;  
  26. }  
  27. .item> ul> li> a> p{  
  28.     text-align: center;  
  29.     color: #666;  
  30. }  


商品区块的搭建


思路分析：

1、秒杀模块：可以分为头部的倒计时和内容部分三个li存放三个图，并且右边界为1px。

2、左一大图、右两小图：这里使用模块化开发，在css写好width=50%、左右两边1px的border和左浮动右浮动的类，直接在html创建好后使用即可。左大图采用左浮动，右小图采用右浮动，大小都为50%。

3、左两小图、右一大图：左小图采用左浮动，右大图采用有浮动。


实现的效果图：



准备工作

编写common.css，用于模块化开发，只要在class里面放置需要的类名即可：

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. .fl{  
  2.     float: left;  
  3. }  
  4. .fr{  
  5.     float: right;  
  6. }  
  7. .m_l10{  
  8.     margin-left: 10px;  
  9. }  
  10. .m_r10{  
  11.     margin-right: 10px;  
  12. }  
  13. .m_b10{  
  14.     margin-bottom: 10px;  
  15. }  
  16. .m_t10{  
  17.     margin-top: 10px;  
  18. }  
  19. .b_l1{  
  20.     border-left: 1px solid #e0e0e0;  
  21. }  
  22. .b_r1{  
  23.     border-right: 1px solid #e0e0e0;  
  24. }  
  25. .b_b1{  
  26.     border-bottom: 1px solid #e0e0e0;  
  27. }  
  28. .w_50{  
  29.     width: 50%;  
  30.     display: block;  
  31. }  
  32. .w_50 >img{  
  33.     width: 100%;  
  34.     display: block;  
  35. }  
  36. .clearfix::before,  
  37. .clearfix::after{  
  38.     content: "";  
  39.     height: 0;  
  40.     line-height: 0;  
  41.     display: block;  
  42.     visibility: hidden;  
  43.     clear: both;  
  44. }  


秒杀区块、左大图右小图、左小图右大图


步骤一：编写html文件

[html]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. <!--商品-->  
  2. <main class="shopItem">  
  3.     <!--秒杀区块-->  
  4.     <section class="shop_box">  
  5.         <!--头部-->  
  6.         <div class="shop_box_tit no_border">  
  7.             <div class="fl m_l10 sk_l">  
  8.                 <span class="sk_l_icon"></span>  
  9.                 <span class="sk_l_name m_l10">掌上秒杀</span>  
  10.                 <div class="sk_l_time m_l10">  
  11.                     <span>0</span>  
  12.                     <span>0</span>  
  13.                     <span>:</span>  
  14.                     <span>0</span>  
  15.                     <span>0</span>  
  16.                     <span>:</span>  
  17.                     <span>0</span>  
  18.                     <span>0</span>  
  19.                 </div>  
  20.             </div>  
  21.             <div class="fr m_r10"><a href="#">更多></a></div>  
  22.         </div>  
  23.         <!--内容-->  
  24.         <div class="sk_con">  
  25.             <ul class="clearfix">  
  26.                 <li>  
  27.                     <a href="#"><img src="img/detail01.jpg" alt=""/></a>  
  28.                     <p>¥10.00</p>  
  29.                     <p>¥100.00</p>  
  30.                 </li>  
  31.                 <li>  
  32.                     <a href="#"><img src="img/detail02.jpg" alt=""/></a>  
  33.                     <p>¥10.00</p>  
  34.                     <p>¥100.00</p>  
  35.                 </li>  
  36.                 <li>  
  37.                     <a href="#"><img src="img/detail01.jpg" alt=""/></a>  
  38.                     <p>¥10.00</p>  
  39.                     <p>¥100.00</p>  
  40.                 </li>  
  41.             </ul>  
  42.         </div>  
  43.     </section>  
  44.     <!--左大图、右小图-->  
  45.     <section class="shop_box">  
  46.         <!--头部-->  
  47.         <div class="shop_box_tit"><h3>京东超市</h3></div>  
  48.         <!--内容-->  
  49.         <div class="clearfix">  
  50.             <a href="#" class="fl w_50 b_r1"><img src="img/cp1.jpg" alt=""/></a>  
  51.             <a href="#" class="fr w_50 b_b1"><img src="img/cp2.jpg" alt=""/></a>  
  52.             <a href="#" class="fr w_50 "><img src="img/cp3.jpg" alt=""/></a>  
  53.         </div>  
  54.     </section>  
  55.     <!--左小图、右大图-->  
  56.     <section class="shop_box">  
  57.         <!--头部-->  
  58.         <div class="shop_box_tit"><h3>京东超市</h3></div>  
  59.         <!--内容-->  
  60.         <div class="clearfix">  
  61.             <a href="#" class="fr w_50 b_l1"><img src="img/cp4.jpg" alt=""/></a>  
  62.             <a href="#" class="fl w_50 b_b1"><img src="img/cp5.jpg" alt=""/></a>  
  63.             <a href="#" class="fl w_50"><img src="img/cp6.jpg" alt=""/></a>  
  64.         </div>  
  65.     </section>  
  66.     <!--左大图、右小图-->  
  67.     <section class="shop_box">  
  68.         <!--头部-->  
  69.         <div class="shop_box_tit"><h3>京东超市</h3></div>  
  70.         <!--内容-->  
  71.         <!--内容-->  
  72.         <div class="clearfix">  
  73.             <a href="#" class="fl w_50 b_r1"><img src="img/cp1.jpg" alt=""/></a>  
  74.             <a href="#" class="fr w_50 b_b1"><img src="img/cp2.jpg" alt=""/></a>  
  75.             <a href="#" class="fr w_50 "><img src="img/cp3.jpg" alt=""/></a>  
  76.         </div>  
  77.     </section>  
  78. </main>  


步骤二：编写css文件

[css]  view plain  copy 
  在CODE上查看代码片 派生到我的代码片
  1. /*shopItem*/  
  2. .shopItem{  
  3.     padding: 0 5px;  
  4. }  
  5. .shopItem> .shop_box{  
  6.     width: 100%;  
  7.     margin-top: 10px;  
  8.     background: #fff;  
  9.     box-shadow: 0 0 1px #e0e0e0;  
  10. }  
  11. .shopItem> .shop_box> .shop_box_tit{  
  12.     width: 100%;  
  13.     height: 32px;  
  14.     line-height: 32px;  
  15.     border-bottom: 1px solid #e0e0e0;  
  16. }  
  17. .shopItem> .shop_box> .shop_box_tit.no_border{  
  18.     border-bottom: none;  
  19. }  
  20. .shopItem> .shop_box> .shop_box_tit> h3{  
  21.     padding-left: 18px;  
  22.     font-size: 15px;  
  23.     color: #666;  
  24.     font-weight: normal;  
  25.     position: relative;  
  26. }  
  27. .shopItem> .shop_box> .shop_box_tit> h3::before{  
  28.     content: "";  
  29.     width: 3px;  
  30.     position: absolute;  
  31.     top: 10px;  
  32.     left: 10px;  
  33.     height: 12px;  
  34.     background: #d8505c;  
  35. }  
  36. .shop_box_sk{  
  37.       
  38. }  
  39. /*秒殺*/  
  40. .sk_l> .sk_l_icon{  
  41.     background: url("../img/sk_icon.png") no-repeat;  
  42.     background-size: 16px 20px;  
  43.     float: left;  
  44.     width: 16px;  
  45.     height: 20px;  
  46.     margin-top: 6px;  
  47. }  
  48. .sk_l> .sk_l_name{  
  49.     font-size: 15px;  
  50.     color: #d8505c;  
  51.     float: left;  
  52. }  
  53. .sk_l> .sk_l_time{  
  54.     margin-top: 10px;  
  55.     float: left;  
  56. }  
  57. .sk_l> .sk_l_time> span{  
  58.     float: left;  
  59.     width: 15px;  
  60.     line-height: 15px;  
  61.     height: 15px;  
  62.     text-align: center;  
  63.     background: #333;  
  64.     color: #fff;  
  65.     margin-left: 3px;  
  66. }  
  67. .sk_l> .sk_l_time> span:nth-child(3n){  
  68.     color: #333;  
  69.     background: #fff;  
  70.     width: 5px;  
  71. }  
  72. .sk_con> ul{  
  73.     width: 100%;  
  74.     margin: 8px 0;  
  75. }  
  76. .sk_con> ul> li{  
  77.     width: 33.33%;  
  78.     float: left;  
  79. }  
  80. .sk_con> ul> li> a{  
  81.     display: block;  
  82.     width: 100%;  
  83.     margin: 0 auto;  
  84.     border-right: 1px solid #e0e0e0;  
  85. }  
  86. .sk_con> ul> li:last-child> a{  
  87.     border-right:0;  
  88. }  
  89. .sk_con> ul> li> a> img{  
  90.     width: 67%;  
  91.     margin: 0 auto;  
  92.     display: block;  
  93. }  
  94. .sk_con> ul> li> p{  
  95.     text-align: center;  
  96. }  
  97. .sk_con> ul> li> p:first-of-type{  
  98.     color: #d8505c;  
  99. }  
  100. .sk_con> ul> li> p:last-of-type{  
  101.     font-size: 12px;  
  102.     color: #666;  
  103.     text-decoration:line-through;  
  104. }  


源码下载：http://download.csdn.net/detail/qq_30379689/9640215


文章来源：http://blog.csdn.net/qq_30379689/article/details/52648978

如辇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5搭建教程
07-31
H5搭建教程H5搭建教程H5搭建教程H5搭建教程H5搭建教程H5搭建教程
快速搭建|企业开发H5，低成本获取高收益
最新发布
YesPMP平台
04-28 1352
H5开发已经成为越来越多企业选择的开发方式。它具有跨平台兼容性强、网页链接分享、更新迭代方便快捷、低开发成本、可搜索和优化、数据分析与追踪、灵活性与扩展性以及无需下载安装等特点。不仅可以提高企业的开发效率，降低开发成本，还能为用户提供更好的用户体验。
h5搭建教程（文本教程）
Qqq1256722227的博客
06-12 2773
首先需要服务器系统linux（centos7.2） 然后安装宝塔控制面板 安装宝塔命令：yum install -y wget && wget -O install.sh && sh install.sh 编译安装需要45分钟 放行端口:[1-10000] 放行端口:[888] 放行端口: [39000-40000] 放行端口:[22] 放行端口:[8888] 放行端口:[80] 把源码传到根目录 把根目录的数据库文件导入到数据库 打开根目录data/conf/db.php
HelloH5+搭建
weixin_30314813的博客
06-05 393
一、所用工具 代理服务器：squid 编辑工具：HBuilder 调试工具：weinre 参考工具：Hello MUI HelloH5 二、涉及项目 ***-pifa---------------类浏览器壳 ***-pifa-web----------app项目（html+js） ***--------------web项目（php） 三、环境搭建 服...
H5web app移动开发
04-08
8套实用漂亮的H5移动开发源码
教育网站网页版和APP版本，小程序和H5页面
03-18
综上所述，教育网站、APP、小程序和H5页面各有优势，开发者应根据目标用户群体、使用场景和业务需求，选择合适的形式，以实现最佳的教育服务。同时，随着技术的发展，跨平台兼容和混合式开发工具也在不断进步，使得...
Qt使用QtWebApp搭建Http服务器实现文件下载
07-05
以上就是使用Qt和QtWebApp搭建HTTP服务器实现文件下载的基本步骤。请注意，这只是一个简单的示例，实际应用中你可能需要处理更多细节，如错误处理、安全性、多线程等。同时，为了提高性能和安全性，你可能还需要考虑...
webapp_游戏活动webapp_游戏活动h5自适应手机_
10-02
【game.html】和【game_huodong.html】很可能是游戏主界面和活动页面，展示游戏的基本信息以及当前进行中的活动。开发者可能会使用JavaScript或者jQuery等库来实现动态效果和交互。 【index.html】通常是网站的主页...
Andriod使用WebView制作webAPP
04-17
在Android平台上，使用WebView制作WebAPP是一种常见的方法，它允许开发者快速构建应用界面，而无需进行复杂的原生UI设计。WebView本质上是一个可以在Android应用中展示网页的组件，它可以直接加载HTML、CSS和...
h5reader:基于h5的书城WebApp
04-30
h5reader基于h5的书城WebApp.使用 node.js 模拟后台数据，无实际后台，完全的前后端分离开发。调用第三方api（ 追书神器api抓取数据到页面上进行渲染。技术栈vue.js + zepto.js + ejs + node.js + koa2 + ES5/6 + ...
WEBAPP-HTML5开发入门
01-26
WEBAPP HTML5移动开发基础知识和基本理论。
h5实现静态的登录页面
11-30
最近练习了一下h5等前端知识，写了一个登录页面，上传这里交流学习
带你搭建一个H5游戏平台，附源码下载
热门推荐
我是香菜
12-26 2万+
最近有个小伙伴想搭建一个简单的H5 的游戏平台找到我，我想这个简单呐，所以我想着整理一下写个说明文档，这也就是这篇文章产生的原因。 我们开始吧。 1、整理事情的顺序 首先买一台服务器 部署一个web服务器 部署源代码 大的步骤基本上就上面三步，具体的详细步骤我们下面一步一步的详细说 2.买个服务器 现在最方面的就是搞个云服务器，这玩意不需要维护，只需要专注于自己的业务就可以了，我推荐京东的云服务器。 原因有以下几点： 1.现在是测试性质的，所以需要找一个尽可能便宜的
H5测试搭建知识宝典
软件测试技术交流分享
07-15 452
针对H5页面以及性能测试，常常测试小伙伴不知道从何下手，那么针对H5测试的前提我们必须了解H5的一些属性以及页面结构，整个扭转流程，只有了解如下，我们在更好的针对H5做一些测试。
从零开发H5可视化搭建项目
sybh的博客
10-23 1293
配套视频教学！由浅入深从根上理解可视化搭建这回事，紧贴业务设计符合业务需要的搭建体系。
关于H5开发移动端APP
my_web000的博客
04-25 1120
使用H5开发移动端app 优点： 很大的好处就是快速、简单、方便，一套代码几乎不用怎么修改就可以同时打包iOS、Android安装包。 基于前端各方面应用技术栈成熟，资料齐全。 有不少的平台和开发工具可供选择，集代码编辑、调试、打包几乎一条龙服务 ， 基于H5+的环境与原生底层交互越来越多，很多功能界面在效果上几乎和原生的没啥区别。 不足： H5开发APP的不足在与原生的相比，有些场景暴露的很彻底...
会员管理系统实战开发教程02-H5应用创建
低代码布道师的博客
08-23 263
H5创建的时候，需要创建自定义应用。自定义应用的特点是像一个画布一样，需要我们自己添砖加瓦。打开控制台，点击创建应用，点击新建自定义应用应用创建好之后，我们要选择H5构建本篇我们讲解了自定义应用的创建方法，并且介绍了会员列表功能及新增功能的开发。管理端我们通常就是五个基本动作列表、新增、修改、删除、查看，熟练掌握基本功能的开发是低码开发应用的基本功，基本功打扎实了应用开发就是水到渠成的一件事。
APP页面都是HTML5做的吗,Html5与App的通讯方式详解
weixin_39546092的博客
06-03 862
前言现在不管是桌面客户端还是移动客户端，都会夹杂着一部分H5页面，这种混合式的应用也是我们常说的Hybrid App。为什么会出现Hybrid App呢，早期是因为开发一个Android或iOS的客户端，需要的人力成本比较大，开发周期比较长，后来有些团队就通过将部分页面拆分出来，由前端来完成，再通过在客户端里的Webview来展示。由于小编我半路转行当程序猿，只对前端领域有所了解，对其他编程领域接...
qt 使用qtwebapp搭建http服务器
11-11
使用QtWebApp搭建HTTP服务器的步骤如下： 第一步，我们需要安装QtWebApp库。可以通过下载源代码编译安装，也可以使用包管理工具来安装QtWebApp。 第二步，创建一个新的Qt项目，并在项目文件（.pro）中添加QtWebApp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值