小程序初级指南--视图层--页面布局
发布于 5 年前 作者 kfang 1245 次浏览 来自 分享

内容主要包括wxml wxss  layout  boxModel

WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。事件系统常见的已经了解过了，基础组件多看文档，没有什么总结的内容。

WXML 是什么

wxml 是小程序框架涉及的一套标签语言，构建页面的结构。网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。<br />同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色，它和 HTML 非常相似，WXML 由标签、属性等等构成。所以不需要慌张。万变不离其宗。

WXML 与 HTML 的差别

  1. 标签名称不一样
  2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式。

网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

微信小程序没有开源，现代前端框架很多积累出的成果都没有及时的实现(可能未来会逐一实现)，但是目前小程序基本特性已经很完善了。

WXML 常见语法

常用的语法     数据绑定 列表渲染 条件渲染 
不常用的语法        模版  引用

// 数据绑定
<view> {{message}} </view>

// 列表渲染
<view wx:for="{{array}}" wx:key="index"> {{item}} </view>

// 条件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>


Page({
  data: {
    message: 'Hello MINA!',
    array: [1, 2, 3, 4, 5],
    view: 'APP'
  }
})

wxss

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。

wxss 新特性

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。<br />与 CSS 相比，WXSS 扩展的特性有：

  • 尺寸单位
  • 样式导入
尺寸单位

在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，需要注意的是运算结果会和预期结果有一点点偏差。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

样式导入

@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

@import "common.wxss";
内联样式

小程序框架组件上支持使用 style、class 属性来控制组件的样式。重点–> style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

全局样式和局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

wxss 日常使用

小程序支持全局样式，如果你平时是模块化开发，那就很舒服了。利用全局样式我们可以实现内置样式的效果，比如 HTML 常用的 reset.css 这种，统一风格。在比如我们会把常用的 js 方法封装成一个工具函数，那常用的css 也可以做一个 util.css。举例，常用的 padding 或者 margin，文本处理，多行溢出这些。不光小程序可以用，平时开发 web 项目也可以。增加开发乐趣提升开发体验。

layout

MDN 介绍如下

CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：

  • 块布局：用来布置文件。块布局包含以文档为中心的功能，例如 浮动元素或将其放置在多列上的功能。
  • 行内布局：用来布置文本。
  • 表格布局：用来布置表格。
  • 定位布局：用来对那些与其他元素无交互的定位元素进行布置 。
  • 弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。
  • 网格布局：用来布置那些与一个固定网格相关的元素。

作为一个切图崽必须掌握的技能，页面布局掌控能力决定了你是否是一个优秀的切图崽。常见的兼容性和适配需要去多联系，不至于写的页面随随便便就垮掉。

padding

padding属性设置一个元素的__内边距__，padding 区域指一个__元素的内容__和其__边界之间的空间__，该属性不能为负值。

margin

margin属性为给定元素设置所有四个（上下左右）方向的__外边距属性__。可以使用负值。

老板，我要切页面。切，切大块的。所以说我们要切大块的切。 配合全局样式，加上你良好的编码规范。切页面轻轻松松。推荐模块化布局～

boxModel

MDN

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…)

又一个逃不过和知识点。盒模型。

content-box

属性width,height只包含内容content，不包含border和padding。

宽度和高度的计算值不包含内容的边框（border）和内边距（padding）使用border 或者 padding 会改变模型的大小。

border-box

属性width,height包含border和padding，指的是content+padding+border。

_

box-sizing

CSS 中的 **box-sizing **属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

如果布局是按照模块来切，一般我们会在在定一块的宽高，内部用padding定内容区域。你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

最开始切页面的时候先定300的高度，内部用 padding 或者某些有 border 属性就会破坏布局，每次都是加个border就要减掉一点高度。。。再后来使用统一 reset css 慢慢就忽视了这些。最近写代码片段的时候，使用 padding 破坏了整体布局，当时我是蒙的，没有想到盒模型，使用 box-sizing 去修改盒模型。哎～

小结

画重点

WXSS 具有 CSS 大部分特性,具体请查看官方文档。

wxss 新增 rpx 尺寸单位，可以免去换算的麻烦，但是需要注意的是，运算结果会有一点点偏差，另外建议设计稿用iPhone6 视觉稿。

wxss 可以使用全局样式，局部页面样式 page.wxss 仅对当前页面生效。

wxss 可以进行导入外联样式表，但是要注意是文件的__相对路径__

wxss 支持使用 style 属性来控制组件的样式。但是要注意 静态的样式写在 class 中，style 接受动态样式，在运行是解析，避免将静态样式写入 style 中，避免影响渲染速度。

回到顶部