简述

根据微信小程序官方文档来学习WXML、WXSS吧！开干~

WXML 模板

数据绑定

用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。

在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

栗子：

index.js

Page({
  data: {
    time: (new Date()).toString()
  },
})

index.wxml

1	<text>当前时间：{{time}}</text>

通过来绑定。

<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>


<!-- 错误的写法  -->
<text data-test={{test}}> hello world </text >

属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中。

变量名是大小写敏感的，和是两个不同的变量。

逻辑语法

三元运算：{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}

算数运算：{{a + b}}

字符串拼接：{{"hello " + name}}

常量：{{"hello world"}}

条件逻辑

1
2
3

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block封装：

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

列表渲染

index.js：

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

index.wxml：

1
2
3

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

wx:for-index 指定数组当前下标的变量名

wx:for-item 指定数组当前元素的变量名

1
2
3

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

类似 block wx:if ，也可以将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容， <switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

大栗子：

index.wxml:

<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> Add Number to the front </button>

index.js:

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function() {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [     this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

模板

模板定义：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

模板使用：

1	<template is="msgItem" data="{{...item}}"/>

其中index.js中的data有：

item: {
  index: 0,
  msg: 'this is a template',
  time: '2016-06-18'
}

模板的选择：

<template name="odd">
  <view> odd </view>
</template>

<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

<!-- 输出
odd
even
odd
even
odd
-->

引用

WXML 提供两种文件引用方式import和include。

import：在该文件中使用目标文件定义的 template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!--index.wxml-->
<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

注意：import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。

include：可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

1 2	<!-- header.wxml --> <view> header </view>

1 2	<!-- footer.wxml --> <view> footer </view>

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

共同属性

所有wxml标签均支持：

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind/catch	EventHandler	组件的事件

WXSS样式

为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。

文件组成

项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面
其它样式：其它样式可以被项目公共样式和页面样式引用

尺寸单位

为了应对因不同型号手机大小不同的问题，引入rpx（response pixel）尺寸单位。

小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。

即会按固定的比例进行缩放以适应屏幕。

WXSS引用

CSS引用另一个样式文件：

1	@import url('./test_0.css')

WXSS依然可以实现样式的引用，格式有所不同：(必须使用相对路径)

1	@import './test_0.wxss'

内联样式

与Web开发基本一致（但不支持通配符* 如下）

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

小程序中：

1	<view style="color: red; font-size: 48rpx"></view>

小程序支持动态更新内联样式

<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

选择器

类型	选择器	样例	样例描述
类选择器	.class	.intro	选择所有拥有 class=”intro” 的组件
id选择器	#id	#firstname	选择拥有 id=”firstname” 的组件
元素选择器	element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
伪元素选择器	::after	view::after	在 view 组件后边插入内容
伪元素选择器	::before	view::before	在 view 组件前边插入内容

优先级：

!important:无穷>style=""（1000）>#id（100）>.class（10）>element（1）

在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

view{ // 权重为 1
  color: blue
}

.ele{ // 权重为 10
  color: red
}

#ele{ // 权重为 100
  color: pink
}

view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  color: orange
}

view.ele{ // 权重为 1 + 10 = 11
  color: green
}

官方文档：

上链接：https://github.com/Tencent/weui-wxss

简单学了WXML、CSS，就先酱

Polaris6G's blog

Wx-Programming_1

简述