微信小程序(2)

模板语法

WXML时框架设计的一套标签语言，结合基础套件、事件系统，可以构建出页面的结构。

<!--pages/close/close.wxml-->
<text>pages/close/close.wxml</text>
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>

数据绑定

首先我们随便打开一个页面文件的js文件，为了更好的看数据，我将其中的代码删了，写上下列代码

Page({data:{
msg:"hello world",
num:10000,
isGirl:false,
person:{
  age:18,
  height:180,
  weight:70,
  name:"DY"
}
}
})

而后，打开该页面文件夹的wxml文件，输入下列代码

<text>pages/close/close.wxml</text>
<view>{{msg}}</view>
<view>{{num}}</view>
<view>你是富婆吗：{{isGirl}}</view>
<view>what is your name: {{person.name}}</view>
<checkbox checked="{{isGirl}}">请勾选</checkbox>

text标签相当于web中的span标签，行内元素，不会换行

view相当于web中的div标签，块级元素，会换行

checkbox是复选框标签

注意：使用bool类型充当属性，字符串和花括号之间一定不要存在空格，否则会导致识别失败。例：

运算

运算这部分和其它语言是差不多的，就不多说了

<view>{{1+1}}</view>
<!-- 字符串拼接 -->
<view>{{'1'+'1'}}</view>
<!-- 三元运算符 -->
<view>{{11%2===0?'偶数':'奇数'}}</view>

列表渲染

列表循环：

wx:for=”“ wx:for-item=”item” wx:for-index=”循环项的索引”

<view>
	<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
  索引：{{index}}
  --
  值：{{item.name}}
	</view>
</view>

除此之外，我们可以添加wx:key=”唯一的值”用来提高列表渲染的性能。如果是上面的例子：则在wx:for-index=”index”后加wx:key=”id”

wx:key绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性

wx:key=”*this”就表示数组是一个普通数组，*this表示循环项。

当有数组的循环嵌套的时候，尤其要注意，以下绑定的名称不要重名：wx:for-item=”item” wx:for-index=”index”。只有一重循环时，我们可以将其省略

<!--对对象的属性和值进行循环 ，此处没有进行wx:key绑定，因为我感觉绑定这些属性都怪怪的，也能运行 -->
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key">
    属性：{{key}}
    --
    值：{{value}}
  </view>

条件渲染

wx:if

这部分的知识和其他语言的差不多，只需要注意这里的语法即可

<!--第一种 -->
<view wx:if="{{true}}">显示</view>
<!--第二种 -->
<view wx:if="{{flase}}">1</view>
<view wx:elif="{{true}}">2</view>
<!--第三种 -->
<view wx:if="{{flase}}">1</view>
<view wx:elif="{{flase}}">2</view>
<view wx:else>3</view>

hidden

有两种方式实现标签的显示或隐藏

<!--第一种 -->
<view hidden>hidden</view>
<!--第二种，true就隐藏，false显示 -->
<view hidden="{{true}}">hidden</view>

当标签不是频繁的切换显示，优先使用wx:if，这是直接把标签从页面结构给移除掉

当标签频繁的切换显示，优先使用hidden，这是通过添加样式的方式来切换显示。hidden属性不要和样式display一起使用

事件绑定

首先随便创建一个页面，打开它的js文件，将其中的代码删掉，输入下列代码：

Page({data:{
num:0
},
handleInput(e){
  // console.log(e.detail.value)
  this.setData({num:e.detail.value})
}

再打开wxml文件，输入以下代码

<input type="text" bindinput="handleInput" />
<view>
  {{num}}
</view>

事件的双向绑定就完成了，这个代码就是输入什么就输出什么。

加入一个点击事件用bindtap。在js中写入下列代码

handletap(e){
  const operation=e.currentTarget.dataset.operation
  this.setData({
    num:this.data.num+operation
  })
}

在wxml绑定button

<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
 <view>
  {{num}}
</view>

这样就可完成+、-法按钮

样式wxss

wxss是一套样式语言，用于描述wxml的组件样式

与CSS相比，wxss扩展的特性有

​ 响应式长度单位rpx

​ 样式导入

尺寸单位

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

在wxss文件中写下以下代码

view{
  width: 200rpx;
  height:200rpx;
  font-size: 40rpx;
  background-color: aqua;
}

这和之前的CSS是一样的

在wxml文件上写

<view>rpx</view>

如此一来，页面上的显示大小就可以随着页面大小改变

还有一种写法

width:calc(750rpx * 100 / 375)

样式导入

首先在pages文件夹下创建一个同级目录style，在其中创建一个wxss（common.wxss），向其中写入

view{
  color:aqua;
  font-size: 100px;
}

在页面文件夹的wxss中写入以下代码

@import "../../style/common.wxss"

注意：只支持相对路径

如果效果没有变化的话，请查看自己的wxml中的标签是否对应wxss中设置的标签

选择器

wxss不支持通配符选择器

目前支持的选择器：

其它选择器和CSS中用法一样，可以自行试试