小程序布局

小程序使用 wxss 作为样式文件后缀,本质上是 css, 可以直接使用 css 特性。

小程序界面 宽度固定为 750rpx,在不同的分辨率下,它会自动完成转换,使得开发非常方便。开发中应全部使用 rpx 作为单位。 也可以直接对 margin、padding 等属性写固定值了。

Flex 布局

常用用法:

view {
    display: flex;
    flex-direction: row | column;
    justify-content: center;
  	align-items: center;
}
// row 表示子组件排列在一行上, column 排列在一列,row 是默认值
// justify-content 在这一行上的排列方式,center 为聚拢, space-between 为分散两边
// align-item 垂直对其方式

一般使用 justify-content 和 align-item 就能保证比较好的呈现效果,

其他属性,不太常用,可能用到的有

flex-wrap: wrap | nowrap; // 是否允许换行

Flex 布局中的子组件,可能会用 flex-grow: 1; 表示占用比例。

CSS 常用备忘

边距

margin 不占用组件的宽高,padding 占用。

margin、padding 的写法有三种,含义如下

margin: 20rpx;  // 上下左右都是 20rpx
margin: 20rpx 30rpx;  // 上下  左右
margin: 10rpx 20rpx 30rpx 40rpx;  // 上 右 下 左,助记:从上逆时针旋转
padding 与 margin 用法一样

边框

border: 1rpx solid #f8f8f8;  // 宽度 实线|虚线 颜色
border-top: 1rpx dashed #fff;
border-radius: 20rpx;  // 做圆角矩形常用写法
border-radius: 50%;  // 圆形头像常用写法

border 属于组件自己的一部分,会占用 宽高,因此实际内容的宽度要减去 border 宽度。

阴影

box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, 0.5);  // 上下偏移、左右偏移、宽度、颜色

颜色

颜色一般常用的有三种写法:

color: white;  // 直接颜色
color: #fff | #ffffff | #ffffff80;
color: rgb(255, 255, 255) | rgba(0, 0, 0, 0.8);

颜色由三色决定,助记:全 255 表示最亮,即白色,全0为黑色

使用透明度一般使用第三种方式,第二种方式可能兼容性不好,透明度取值为 0~1

颜色使用心得:一般使用 page 背景色 为 #f8f8f8,内容背景为 white 视觉效果比较好。

WXS

之前一直不知道 这个称为 wxscript 的东西到底是做什么的,直到遇到了下面这个需求

<view>{{ name.substring(0, 6) }}</view>

需求是把绑定的一个字符串 截取前六个字符显示,但是这个运行不了,因为 xml 模板绑定中的代码并不能等同 js 代码,不支持完整的 js 语法,此时就需要 wxs 登场了。

<wxs module="util">
  var subString = function(str, length) {
    if (str.length <= length) return str;
    return str.substring(0, length);
  }
  module.exports.subString = subString;
</wxs>
<view>{{ util.subString(name, 6) }}</view>

自定义导航栏

"window": {
    "backgroundTextStyle": "dark", // 小圆点样式
    "navigationStyle": "custom", // 自定义导航栏
}

只支持全局设置自定义导航栏,不支持对单个页面自定义,可以编写一个自定义组件,每个页面引入就可以了。

此处小圆点样式有 light 和 dark 两种方式,这是页面下拉刷新时顶部的三个小圆点,若 page 为白色背景,应采用 dark,否则可能开不到效果。

自定义组件

小程序支持自定义组件,组件可以重复使用,非常方便。

组件内部的样式默认不受外部样式影响,起到很好的封装作用,自定义组件,通常主要编写自定义属性和事件。以下以自定义导航栏为例。

  1. navBar.wxml
<view class='nav-view'>
    <image class='nav-image' src='/images/back.png' bindtap='onBackTap'></image>
	<view class='nav-title' style='color:{{color}}'>{{title}}</view>
</view>
  1. navBar.js
Component({
  // 组件的属性列表
  properties: {
    title: { type: String, value: '' },
    color: { type: String, value: 'black' }
  },
  data: { },
  methods: {
    onBackTap: function(e) {
      // 将点击事件派发出去
      this.triggerEvent('backTap', e)
    }
  }
})
  1. index.xml
<view class='container'>
    <!-- bindbackTap 对应内部触发的 'backTap' -->
	<navBar title='标题' color='blue' bindbackTap='onTap'></navBar>
</view>

其它

下拉刷新

页面内置的下拉刷新会和 scroll-view 的滑动冲突,一般来说,可以不使用 scroll-view, 因为页面可以自动拓展高度,配合页面内置的下拉和上拉操作就能完成动态加载的需求。

图片适配模式

一般采用 固定宽度,高度根据图片分辨率自动缩放,这样可以保证图片不变形,即采用 widthFix。

特殊布局

即 position 属性, 默认属性是 static, 会忽略 top|bottom|left|right 属性。

TOP