11.[前端开发]Day11-HTML+CSS阶段练习(仿小米和考拉页面)

最新推荐文章于 2025-02-18 14:16:33 发布
最新推荐文章于 2025-02-18 14:16:33 发布
阅读量311 收藏 8
点赞数 3
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_55135449/article/details/145381656
版权

一、小米穿戴设备（浮动）

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .dress {
      margin-top: 30px;
    }

    .dress .header {
      height: 58px;
      line-height: 58px;
    }

    .dress .header .left-area {
      float: left;
    }

    .dress .header .right-area  {
      float: right;
      font-size: 14px;
    }

    .dress .header .right-area .item {
      margin-left: 15px;
    }

    .dress .header .right-area .item:hover,
    .dress .header .right-area .item.active {
      padding: 3px 0;
      border-bottom: 2px solid red;
      color: red;
    }

    /* 列表内容 */
    .dress .list {
      margin-right: -14px;
    }

    .dress .list .item {
      float: left;
      /* position: relative;
      top: 0; */

      /* box model */
      width: 234px;
      height: 300px;
      margin-right: 14px;
      margin-bottom: 14px;

      background-color: #f00;

      /* 动画 */
      transition: all 0.3s ease-in;
    }

    .dress .list .item.item1 {
      height: 614px;
    }

    .dress .list .item.item9, 
    .dress .list .item.item10 {
      height: 143px;
    }

    .dress .list .item:hover {
      box-shadow: 0 15px 30px rgba(0,255,0,1);
      /* top: -2px; */
      transform: translateY(-2px);
    }

    .dress .list .item a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  
  <div class="mi_wrapper dress">
    <div class="header clear_fix">
      <div class="left-area">
        <h3 class="title">智能穿戴</h3>
      </div>
      <div class="right-area">
        <a class="item active hot" href="#">热门</a>
        <a class="item info" href="#">穿戴</a>
      </div>
    </div>
    <div>
      <ul class="list clear_fix">
        <li class="item item1"><a href="#">1</a></li>
        <li class="item item2"><a href="#">2</a></li>
        <li class="item item3"><a href="#">3</a></li>
        <li class="item item4"><a href="#">4</a></li>
        <li class="item item5"><a href="#">5</a></li>
        <li class="item item6"><a href="#">6</a></li>
        <li class="item item7"><a href="#">7</a></li>
        <li class="item item8"><a href="#">8</a></li>
        <li class="item item9"><a href="#">9</a></li>
        <li class="item item10"><a href="#">10</a></li>
      </ul>
    </div>
  </div>

</body>
</html>

common.css

.mi_wrapper {
  width: 1226px;
  margin: 0 auto;
}

.kl_wrapper {
  width: 1100px;
  margin: 0 auto;
}

.clear_fix::after {
  content: "";
  display: block;
  clear: both;

  height: 0;
  visibility: hidden;
}

.clear_fix {
  *zoom: 1;
}

reset.css

body, h1, h2, h3, ul, li {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}

ul, li {
  list-style: none;
}

1.区域抽取

对结构进行简单搭建

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网</title>
  <link rel="stylesheet" href="./css/common.css">
 
  <style>
    .dress{
      height: 200px;
      background-color: orange;
    }
   
  </style>
</head>
<body>
  
  <div class="mi_wrapper dress">
    <div class="header"></div>
    <div class="list"></div>
 
  </div>


</body>
</html>

common.css

.mi_wrapper{
  width:1226px;
  margin:0 auto;  /*居中*/
}

2.头部的布局

让“智能穿戴”左浮动；让“热门和穿戴”右浮动

让文字居中且对齐：用line-hight

然后进行微调，比如用a标签啊，可以有小手点击啊

用hover，鼠标放上去会变红色啊，有下划线啊

用acitve,后面js会有涉及

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网</title> 
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css"> <!--注意，这个放在后面-->>
 
  <style>
    .dress{
      margin-top:30px;
    }
    .header{
      height: 58px;
      line-height: 58px;
    }
    .dress .header .left-area{
      float: left;
    }
    .dress .header .right-area{
      float: right;
      font-size:14px;
      
    }
    .dress .header .right-area .item{
      margin-left: 15px;
    }
    .dress .header .right-area .item:hover,
    .dress .header .right-area .item.active{
      padding:3px 0;
      border-bottom: 2px solid red;
      color:red;

    }
   
  </style>
</head>
<body>
  <!-- 设置浮动后 智能穿戴 和热门 穿戴是顶部对齐的 -->
  <div class="mi_wrapper dress">
    <div class="header clear-fix"> <!-- common.css里的清浮动：clear_fix -->
      <div class="left-area">
        <h3 class="title">智能穿戴</h3>
      </div>
      <div class="right-area">
        <a class="item active hot" href="#">热门</a> <!-- 一旦写a就要对a的默认样式进行重置 -->
        <a class="item info" href="#">穿戴</a>
      </div>
    </div>
    <div class="list"></div> 
 
  </div>


</body>
</html>

reset.css

body, h1, h2, h3, ul, li {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}

ul, li {
  list-style: none;
}

/*对浏览器默认样式进行重置*/

common.css

.mi_wrapper{
  width:1226px;
  margin:0 auto;  /*居中*/
}

.clear-fix::after{
  content:"";
  display: block;
  clear: both;/*清除浮动*/

  /*为了更好的兼容*/
  height: 0;
  visibility: hidden;
}

/*为了更好的兼容*/
.clear_fix{
  *zoom:1;
}

3.内容列表布局过程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米官网</title> 
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css"> <!--注意，这个放在后面-->>
 
  <style>
    .dress{
      margin-top:30px;
    }
    .header{
      height: 58px;
      line-height: 58px;
    }
    .dress .header .left-area{
      float: left;
    }
    .dress .header .right-area{
      float: right;
      font-size:14px;
      
    }
    .dress .header .right-area .item{
      margin-left: 15px;
    }
    .dress .header .right-area .item:hover,
    .dress .header .right-area .item.active{
      padding:3px 0;
      border-bottom: 2px solid red;
      color:red;


    }
   /*列表的内容*/
   .dress .list{
    margin-left: -14px;
    

   }
   .dress .list .item{
    float: left;
    /*box model*/
    width: 234px;
    height: 300px;
    margin-right: 14px;
    margin-bottom: 14px;
    
    background-color: #f00;
   }
   .dress .list .item.item1{/*注意：item.item1没有空格*/
    height: 614px;
   }
   .dress .list .item.item9,
   .dress .list .item.item10{
    height: 143px;

   }







  </style>
</head>
<body>
  <!-- 设置浮动后 智能穿戴 和热门 穿戴是顶部对齐的 -->
  <div class="mi_wrapper dress">
    <div class="header clear-fix"> <!-- common.css里的清浮动：clear_fix -->
      <div class="left-area">
        <h3 class="title">智能穿戴</h3>
      </div>
      <div class="right-area">
        <a class="item active hot" href="#">热门</a> <!-- 一旦写a就要对a的默认样式进行重置 -->
        <a class="item info" href="#">穿戴</a>
      </div>
    </div>
    <div>
      <ul class="list">
        <li class="item item1"><a href="#">1</a></li>
        <li class="item item2"><a href="#">2</a></li>
        <li class="item item3"><a href="#">3</a></li>
        <li class="item item4"><a href="#">4</a></li>
        <li class="item item5"><a href="#">5</a></li>
        <li class="item item6"><a href="#">6</a></li>
        <li class="item item7"><a href="#">7</a></li>
        <li class="item item8"><a href="#">8</a></li>
        <li class="item item9"><a href="#">9</a></li>
        <li class="item item10"><a href="#">10</a></li>
      </ul> 

    </div>
    
 
  </div>


</body>
</html>

rest.css 不变

body, h1, h2, h3, ul, li {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}

ul, li {
  list-style: none;
}

/*对浏览器默认样式进行重置*/

common.css 不变

.mi_wrapper{
  width:1226px;
  margin:0 auto;  /*居中*/
}

.clear-fix::after{
  content:"";
  display: block;
  clear: both;/*清除浮动*/

  /*为了更好的兼容*/
  height: 0;
  visibility: hidden;
}

/*为了更好的兼容*/
.clear_fix{
  *zoom:1;
}

4.hover动画效果（补充）

鼠标放上去，会有弹跳的效果

注意，我们发现为啥鼠标点到红色方块，a元素上 没变成小手

原因是，a是inline元素，不会占据整个大小

解决方案；我们可以设置a为inline-block，给一个百分之百的宽度和高度。这样我们放上去后，会变成一个小手。

.dress .list .item a{
    display: inline-block;
    width: 100%;
    height: 100%;
   }

可以查MDN，看看支不支持动画（top支持）

.dress .list .item:hover{
      box-shadow: 0 15px 30px rgba(0,0,0,0.5);/*小手放上去会有阴影*/
      /*小手放上去，快快会往上走一点*/
      position: relative;
      top:-2px;
      
   }



   .dress .list .item{
      float: left;
      position: relative;
      top:0;
    /*box model*/
      width: 234px;
      height: 300px;
      margin-right: 14px;
      margin-bottom: 14px;
      
      background-color: #f00;
      /*动画*/
      transform: all 0.3s ease-in;

   }

二、考拉界面布局

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考拉布局</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .sport {
      margin-top: 20px;
      background-color: orange;
    }

    .sport .item {
      float: left;
      height: 541px;
    }

    .sport .item.left {
      width: 330px;
      background-color: purple;
    }

    .sport .item.center {
      width: 550px;
    }

    .sport .center .center-item {
      float: left;
      width: 275px;
      height: 271px;

      box-sizing: border-box;
      border: 1px solid #000;
      border-left: none;
    }

    .sport .center .center-item:nth-last-child(-n+2) {
      margin-top: -1px;
    }

    .sport .item.right {
      width: 220px;
    }

    .sport .right .item {
      float: left;
      width: 220px;
      height: 121px;

      box-sizing: border-box;
      border: 1px solid #000;
      border-left: none;
      margin-top: -1px;
    }

    .sport .right .item.header {
      height: 61px;
      margin-top: 0;
    }
  </style>
</head>
<body>
  
  <div class="kl_wrapper sport">
    <div class="item left"></div>
    <div class="item center">
      <div class="center-item">1</div>
      <div class="center-item">2</div>
      <div class="center-item">3</div>
      <div class="center-item">4</div>
    </div>
    <div class="item right">
      <div class="item header">header</div>
      <!-- .item{$}*4 -->
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>

</body>
</html>

1.页面布局分析

如果一个东西有border,需要考虑清楚，给谁加边框

整体结构怎么划分？看成下面三个整体来做。先分成三个部分，然后一个个做。

注意：

2.整体和中间的布局

可以发现宽度刚好是1100

     .sport .item.item-left{
      width: 330px;
      

    }
    .sport .item.item-center{
      width: 550px;
    }
    .sport  .item.item-right{
      width: 220px;
    }

目前的效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考拉布局</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .sport{
      height: 100px;
      margin-top: 20px;
      background-color: orange;
    }
    .sport .item{
      float:left;
      height: 541px;
    }
    .sport .item.item-left{
      width: 330px;
      background-color: purple;

    }
    .sport .item.item-center{
      width: 550px;
      background-color: skyblue;
    }
    .sport  .item.item-right{
      width: 220px;
      background-color: burlywood;
    }

  </style>
</head>
<body>
  <div class="kl_wrapper sport">
    <div class="item item-left"></div>
    <div class="item item-center"></div>
    <div class="item item-right"></div>
  </div>

</body>
</html>

common.css

.kl_wrapper{
  width: 1100px;
  margin: 0 auto;

}

.clear-fix::after{
  content:"";
  display: block;
  clear: both;/*清除浮动*/

  /*为了更好的兼容*/
  height: 0;
  visibility: hidden;
}

/*为了更好的兼容*/
.clear_fix{
  *zoom:1;
}

我们设置宽度为271px，蓝色块1的下边框被蓝色快3盖住，所以蓝色1的高度是270px，块3有上下边框，所以是271px

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考拉布局</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .sport{
      height: 100px;
      margin-top: 20px;
      background-color: orange;
    }
    .sport .item{
      float:left;
      height: 541px;
    }
    .sport .item.left{
      width: 330px;
      background-color: purple;

    }
    .sport .item.center{
      width: 550px;
      background-color: skyblue;
    }
    .sport .center .center-item{
      float: left;
      width: 275px;
      height: 271px;

      box-sizing: border-box;/*让边框算在宽度里面*/
      border: 1px solid black;
      border-left: none;
    }
    .sport .center .center-item:nth-last-child(-n+2){
      margin-top: -1px;
    }
    .sport  .item.right{
      width: 220px;
      background-color: burlywood;
    }

  </style>
</head>
<body>
  <div class="kl_wrapper sport">
    <div class="item left"></div>
    <div class="item center">
      <div class="center-item">1</div>
      <div class="center-item">2</div>
      <div class="center-item">3</div>
      <div class="center-item">4</div>

    </div>
    <div class="item right"></div>
  </div>

</body>
</html>

3.右侧的布局

右侧，每块只用加三边的边框即可

      box-sizing: border-box;

      border:1px solid black;

      border-left: none;

现在的状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考拉布局</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .sport{
      height: 100px;
      margin-top: 20px;
      background-color: orange;
    }
    .sport .item{
      float:left;
      height: 541px;
    }
    .sport .item.left{
      width: 330px;
      background-color: purple;

    }
    .sport .item.center{
      width: 550px;
      background-color: skyblue;
    }
    .sport .center .center-item{
      float: left;
      width: 275px;
      height: 271px;

      box-sizing: border-box;/*让边框算在宽度里面*/
      border: 1px solid black;
      border-left: none;
    }
    .sport .center .center-item:nth-last-child(-n+2){
      margin-top: -1px;
    }
    .sport  .item.right{
      width: 220px;
      background-color: burlywood;
    }
    .sport .right .item{
      float: left;
      width: 220px;
      height: 120px;

      box-sizing: border-box;
      border:1px solid black;
      border-left: none;
    }
    .sport .right .item.header{
      height: 60px;

    }


  </style>
</head>
<body>
  <div class="kl_wrapper sport">
    <div class="item left"></div>
    <div class="item center">
      <div class="center-item">1</div>
      <div class="center-item">2</div>
      <div class="center-item">3</div>
      <div class="center-item">4</div>

    </div>
    <div class="item right">
      <div class="item header">header</div>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>

</body>
</html>

我们可以这样做：

    .sport .right .item{
      float: left;
      width: 220px;
      height: 121px;

      box-sizing: border-box;
      border:1px solid black;
      border-left: none;
      margin-top: -1px;
    }
    .sport .right .item.header{
      height: 61px;
      margin-top: 0; 

    }

m0_zj
关注
小程序领域开发语言的前端框架对比
最新发布
小程序开发
05-01 771
本文章的目的在于对小程序领域的前端框架进行系统性的对比分析，帮助开发者了解不同框架的特点、优势和局限性，以便在实际开发中做出更合适的选择。文章涵盖了市面上常见的小程序前端框架，包括但不限于原生小程序框架、Vue.js 衍生的小程序框架、React 衍生的小程序框架等，从多个维度进行比较，如开发效率、性能表现、学习成本、生态系统等。本文将按照以下结构进行阐述：首先介绍相关的核心概念和框架之间的联系，包括框架的基本原理和架构；
微信小程序开发技术选型之uniapp、微信原生wxml开发、mpvue、taro、kbone等框架的对比
风中追风
04-07 6703
咱们先看一组数据：据腾讯目前披露，截止至2022年第三季度，微信小程序日活账户数破6亿，同比增长超30%，其日均使用次数实现更快增长，同比增长超50%。小程序在用户规模及商业化方面都取得了极大的成功。支付宝、百度、字节跳动小程序的月活也纷纷超过3亿。从数据来看，小程序依然占据了市场的半壁江山，拥有广泛的市场前景。对应小程序开发领域，这一年也发生了巨大变化。开发框架从单纯的微信小程序开发，过渡到多端框架成为标配，进一步提升开发效率成为开发者的强烈需求。
7大主流小程序开发框架对比： Taro, uniapp等
rock---you的博客
01-07 3963
原生开发是小程序开发的基础，但对于复杂场景和多端支持，使用框架可以显著提升效率。如果团队熟悉 Vue.js，可以优先选择uni-app或Taro。如果团队熟悉 React.js，可以选择Taro或Remax。根据需求和项目复杂度，合理选择框架可以降低开发成本并提升代码复用率。
小程序开发框架比较
tsang荒男的博客
12-01 1145
1、小程序为什么那么流行 小程序开发算是这几年的流行趋势了，他为什么那么受欢迎呢？我们可以从几方面来分析 成本低：相对于app来说，小程序开发成本低很多，一般公司都能接受 客户体验好：微信小程序无需申请注册，在微信里面检索就可以开启，能够使用微信一键登录，给客户给予了便捷；并且无需安装 顺应潮流：现阶段各种互联网大佬陆续发布微信小程序作用，都是在合理布局挪动网络平台 平台客户群体大：一般大家称呼小程序都是只微信小程序，是因为微信的客户群体基数大，覆盖范围广 2、小程序比较 小程序的开发框架发展到现在也五
小程序框架比较
A_bad_horse的专栏
04-02 427
3 款小程序框架以及5 个小程序平台架编译对比
Chenduzi的博客
02-15 1439
很多开发者朋友在初次认识 FinClip时，都不免将其与市面上常见的小程序平台（如百度智能小程序，字节小程序，微信小程序，支付宝小程序）进行对比，好奇同样的一份小程序代码在不同平台中的编译速度与体验如何。 此外，开发者在使用常见的第三方小程序框架（如 taro，kbone，uniapp）时，会发现各家框架厂商都宣称通过自己的框架能编译出不同平台下最好用，最流畅的小程序，开发者受限于精力与时间不够，也无法对其进行足够仔细地辨别与区分。 在本文中，我们邀请了 FinClip 前端开发工程师蒋雪，使用不同..
开发者选型：小程序原生or 小程序框架？
finogeeks的博客
05-15 1121
市场业务需求也越来越大，但是对于开发者来说哦，用原生去开发小程序很难受，尤其是业务比较复杂的项目如果用原生开发很难去管理和迭代。
微信小程序-简易小程序源码小程序项目源码-原生开发框架-含效果截图示例.zip
05-27
微信小程序-项目源码-原生开发框架 源码特色： 原生体验：基于微信原生框架开发，流畅不卡顿。 功能丰富：集成微信支付、分享等核心功能，满足多种业务需求。 易上手：提供详细文档和示例，快速入门。 可定制：...
小程序开发效率对比：uniapp和原生开发
百锦再的博客
02-18 9446
uni-app是一个使用 Vue.js 开发的跨平台小程序开发框架。它可以同时支持微信小程序支付宝小程序百度小程序字节跳动小程序等多个平台，同时也支持H5和App的开发。uni-app 通过一次编写，多个平台运行的理念，极大地提高了开发效率。uni-app 在跨平台开发方面具有无可比拟的优势，可以大大节省时间和精力。而原生开发需要为每个平台单独编写代码，开发效率相对较低。uni-app 提供的 HBuilderX 开发工具让开发者可以在统一环境下进行跨平台开发，节省了很多在不同工具间切换的时间。
Mpx是一款致力于提高小程序开发体验的增强型小程序框架
10-15
总结，Mpx是一款强大的、面向未来的跨端小程序开发框架，它的出现为开发者带来了新的可能性，无论是提升开发效率还是优化用户体验，Mpx都提供了坚实的技术支撑。在未来，随着小程序和Web平台的不断发展，Mpx有望成为...
小程序多端框架对比
Joven0的专栏
07-18 1695
本文主要对4个主流的小程序多端框架进行对比，他们是wepy，mpvue，taro，uni-app，主要从性能，兼容性，上手容易程度，生态丰富程度进行对比。
微信小程序第三方框架对比 之 wepy / mpvue / taro
10-17
主要介绍了小程序第三方框架对比 ( wepy / mpvue / taro ) 分析，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
用Vue开发小程序的框架
03-29
今天，我们来介绍一款由美团点评研发，使用 Vue.js 来开发微信小程序的前端框架 —— mpVue。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小 ...       在尤大微博铺垫着“将会引入一些关于 TypeScript 的改进”一周之后，代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前。从 Release Notes 可以看到，Vue.js 2.5 有着更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染。具体如下： 更
微信小程序教程（第四篇）
沃普专栏
01-22 1888
微信小程序教程（第四篇）----小程序开发基本框架及其限制与优化
微信小程序-03-小程序开发框架
肖朋伟
09-15 8632
微信小程序-03-小程序开发框架 官方文档： https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 小程序开发框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务 框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScri...
【小程序开发框架选型】7大小程序开发框架，哪一个更适合你？
全栈弄潮儿
04-13 8774
小程序越来越流行，微信小程序、百度小程序、支付宝小程序、头条小程序等等不断涌入我们的生活，随着小程序的火爆，各种小程序框架不断出现。小程序开发公认的7个小程序开发框架: 原生、uni-app、taro、mpvue、wepy、chameleon、remax。各有利弊。
真实测评：小程序开源框架选型对
小程序公社
07-04 1160
从 2016 年微信小程序内测到现在，各大公司对小程序的业务开发需求越来越大，但是微信的原生工具在实际使用时很不便捷，尤其是业务比较复杂的项目很难通过其进行管理和迭代。 使用原生开发的问题： 小程序本身不支持常用的 css 预编译器 不支持 ES7 以上的高级语法，如 async await 等特性； 不支持工程化，如环境、变量等管理 缺少统一的 request 拦截请求 缺少统一的本地缓存读取管理 目前市面上开源的框架可以帮助我们解决上述问题，有些框架还有比较便捷的脚手架工具、以及支持多端的能力。本文
微信小程序开发02：开发框架
MOOG007的博客
03-29 231
WXML WXML（WeiXin Markup Language）是程序设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构 WXML语法：<标签名 属性名=“属性值” 属性名=“属性值” …>…</标签名> WXML的作用：数据绑定、列表渲染、条件渲染、模板引用 数据绑定 helloworld.wxml <view>{{msg}}&lt...
微信小程序三种开发方式对比（原生，wepy，mpvue）
boy火巨的博客
04-11 3817
前言 如今公司随潮流，把现有h5项目，重做成小程序项目！网上搜索到 现微信小程序的三种开发方式 做下对比！ 不足之处请多多指点！ 开发文档 原生开发小程序文档：点此进入 wepy 开发文档：点此进入 mpVue 开发文档：点此进入 三者的简单对比 小程序缺点 个人认为小程序开发中，最大的缺点，也是很蛋疼的问题 不支持vue的过滤器filters(因此数据都得提前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值