WXML与WXSS
WXML
充当类似html的角色
和html区别
1.微信小程序将常用组件封装,提高了开发效率。
小程序常用组件:view,button,text和地图,视频,音频等组件。
2.小程序框架使用MVVM开发思路。控制能力用wx:开头的属性来表达。
在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应HTML的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS会记录一些状态到JS变量里边,同时通过DOM API 操控DOM的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让JS直接操控DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
WXML 是这么写 :
<text>{{msg}}</text>
JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 'wx:' 开头的属性来表达。
WXML简介
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件(视图容器,表单组件,导航,媒体组件,地图,画布等)、事件系统,可以构建出页面的结构。
特点:
1.WXML中的属性是大小写敏感的,也就是说 class 和 Class 在WXML中是不同的属性。
2.变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。
3.WXML标签要闭合。
1.数据绑定
1)简单的例子
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
page.js中的message值改变之后wxml中message值也会改变
2)属性值也可以动态的去改变,但属性值必须被包裹在双引号中
<text data-test="{{test}}"> hello world</text>
3)没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中
<!--
{
var2: undefined,
var3: null,
var4: "var4"
}
-->
<view>{{var1}}</view>
<view>{{var2}}</view>
<view>{{var3}}</view>
<view>{{var4}}</view>
<!--
输出:
null
var4
-->
2.逻辑语法
{{变量名}}通过数据绑定可以实现动态渲染,也可以进行简单的逻辑运算。
1)三元运算
<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
2)算术运算
<view> {{a + b}} + {{c}} + d </view>
3)字符串拼接
<view>{{"hello " + name}}</view>
4){{}}中还课直接放置数字、字符串或者是数组
<text>{{[1,2,3]}}</text>
<text>{{"hello world"}}</text>
输出:
1,2,3
hello world
3.列表渲染
渲染出来多列数据
4.条件渲染
满足一定条件时渲染
5.模板
WXSS样式
WXSS具有css大部分的特性,小程序在WXSS上也做了一些补充和修改。
1.新增尺寸单位。WXSS底层支持新的尺寸单位rpx。
rpx:可以根据屏幕宽度进行自适应。
关于换算还不是很懂。。。
2.样式导入
@import导入外联样式,后跟外联样式表的相对路径,';'表示语句结束。
如:@import"a.wxss";
3.内联样式
style接收动态的样式。静态样式写入style中会影响渲染速度。
class接收静态的样式,用于指定样式规则。 值之间用空格隔开。
4.提供全局样式和局部样式
5.WXSS仅支持部分css选择器
.class
#id
elment
elment,elment
::after
::before