小程序开发DEMO实例

微信小程序 布局实例：

下面将会按照以下的顺序介绍：

布局的实现
逻辑的实现
样式的实现

1.布局的实现

最大的布局是view， view布局中包含了：一张图片，文字描述，信息栏和分界线

  
  
    
  
  
  
  小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物
  
  
  
    
      
  
       22
    
    2016.10.29
  
  
  
  
  
  
  
    
  
  
  
  小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物
  
  
  
    
      
  
       22
    
    2016.10.29
  
  
  
  
  

2.逻辑的实现

只是注册了Page界面

Page({
  
  data:{
  
  }
  
})

3.样式的实现

.home-view1样式：display规定最大View布局为弹性布局，justify-content规定内容居中，竖直排列, …

.home-view3样式：display规定了信息栏布局为弹性布局，justify-content规定内容水平平均分配

.home-view4样式：display规定了收藏图片和收藏数的父布局为弹性布局，align-items规定内容在竖直方向居中

天天团购系统

天天团购系统是一套强大的开源团购程序，采用PHP+mysql开发，系统内置支付宝、财付通、GOOGLE地图等接口，支持短信发送团购券和实物团购快递发货等；另外可通过Ucenter模块，与网站已有系统无缝整合，实现用户同步注册、登陆、退出。 天天团购系统是一套创新的开源团购程序，拥有多达10项首创功能，同时支持虚拟和实物团购，内置类似淘宝的快递配送体系，并提供强大的抽奖、邀请返利等营销功能，让您轻松

下载

.home-image1样式：规定图片的高度

.home-image-heart样式：规定收藏图片的大小

.home-text1样式：规定描述文字的样式，text-align规定文字居中，line-height规定两行文字之间的高度

.home-text-heart样式：规定收藏数的样式，border-radius规定边界圆角

.home-view-line样式：是一条分界线

.bgColor样式：规定收藏数的背景

.home-view1{
  display: flex;
  justify-content: center;
  flex-direction: column;
  
  height: 100%;
  width: 100%;
  margin: 6px;
  
}
  
.home-view3{
  display: flex;
  justify-content: space-between;
}
  
.home-view4{
  display: flex;
  align-items: center;
}
  
.home-image1{
  height: 200px;
}
  
.home-image-heart{
  width: 30px;
  height: 30px;
}
  
.home-text1{
  text-align: left;
  line-height: 25px;
  margin-top: 6px;
  margin-right: 6px;
  color: gray;
}
  
.home-text-heart{
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border-radius: 20%;
  pad: 5px;
  text-align: center;
}
  
.home-text-time{
  text-align: center;
  margin-right: 20px;
  padding-top: 5px;
  color: gray;
}
  
.home-view-line{
  
 width: 100%;
 height: 6px;
 margin-top: 5px;
 background-color: gainsboro;
}
  
.bgColor{
  background-color: lightblue;
  opacity: 0.6;
}

 【相关推荐】

1. 微信小程序完整源码下载

2. 微信小程序学习用demo：聊天室+音视频+添加内容