微信小程序入门布局

【微信小程序入门布局】

微信小程序结构

*.js：javascript

*.json:json数据

*.wxml:页面,类似html

*.wxss:样式,类似css

结构没啥好说的,官网介绍很清楚，微信小程序布局也是标签+CSS样式，熟悉html的入手非常快

一、基础布局标签

view:布局主要标签，类似html的div

<view class="container"></view>

scroll-view:带滚动条视图

<scroll-view scroll-y="true" class="center" bindscrolltolower='onReachBottom'></scroll-view>

二、布局样式

样式top的view中含有样式top_l、top_c、top_r的view

<view class="top">
    <view class='top_l' >
      
    </view>
    <view class='top_c'>
      
    </view>
    <view class='top_r'>
      
    </view>
</view>

1、横向布局

样式top_l、top_c、top_r的view左中右排版

.top{
  height: 120rpx;
  width:500rpx;
  display: flex;  
  flex-direction: row; 
}

.top_l{
  height: 120rpx;
  width:100rpx;
}

.top_c{
  height: 120rpx;
  flex: 1;
}
.top_r{
  height: 120rpx;
  width:100rpx;; 
}

display: flex; 将样式top的view设置成弹性布局

flex-direction: row; 将样式top的view设置成横向布局

当.top_l和.top_r固定宽度的前提，.top_c设置flex:1,样式top_c的view宽度自适应，也就是默认剩余宽度

当三个view不设置宽度,均设置flex:1,平均分配.top宽度

2、纵向布局

样式top_l、top_c、top_r的view上中下排版

.top{
  height: 500rpx;
  width:100rpx;
  display: flex;  
  flex-direction: column; 
}

.top_l{
  height: 100rpx;
  width:100rpx;
}

.top_c{
  width:100rpx;
  flex: 1;
}
.top_r{
  height: 100rpx;
  width:100rpx;
}

display: flex; 将样式top的view设置成弹性布局

flex-direction: column; 将样式top的view设置成纵向布局

当.top_l和.top_r固定高度的前提，.top_c设置flex:1,样式top_c的view高度自适应，也就是默认剩余高度

当三个view不设置高度,均设置flex:1,平均分配.top高度

三、深入学习样例

图文混排、JS伪交互样例下载