小程序学习day2——WXML

目录

数据绑定

1、数据绑定的基本原则

2、Mustache语法（在VUE中叫插值表达式）

三元运算

算术运算

事件绑定

1、小程序常用事件

2、target和currentTarget的区别

3、bindtap语法

4、事件传参与数据同步

bindinput语法格式

文本框和data之间数据同步

条件渲染

wx:if

结合block使用wx:if

hidden

wx:if和hidden对比

列表渲染

---

数据绑定

1、数据绑定的基本原则

①在data中定义数据

在页面对应的.js文件中，把数据定义到data对象中即可

②在WXML中使用数据

2、Mustache语法（在VUE中叫插值表达式）

格式：{{要绑定的数据名称}}

应用场景：绑定内容、绑定属性、运算（三元、算数）

.wxml

<view>{{info}}</view>
<image src="{{imageSrc}}" mode="widthFix"></image>

.js

  data: {
    info: 'hello world',
    imageSrc: 'http://www.itheima.com/images/logo.png'
  },

• 三元运算

.js

data:{
    randomNum1: Math.random() * 10  //生成10以内的随机数
}

.wxml

<view>数字：{{randomNum1}}{{randomNum1 >= 5 ? '大于或等于5':'小于5'}}</view>

• 算术运算

.js

data:{
    randomNum2: Math.random().toFixed(2)//生成一个带两位小数的随机数
}

.wxml

<view>{{randomNum2*100}}</view>

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层的行为，反馈到逻辑层进行业务处理。

1、小程序常用事件

事件对象的属性列表

当事件回调触发时，会收到一个事件对象event，详细属性如下：

2、target和currentTarget的区别

target：触发该事件的源头组件

currentTargent：当前事件所绑定的组件

3、bindtap语法

4、事件传参与数据同步

在时间处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值

.wxml

<button type="primary" bindtap="btntap1">+1按钮</button>

.js

data: {
    count:0,

  }, 
btntap1(){
    this.setData({
      count: this.data.count+1
    })
  },

点击按钮后count值+1，从0变成1

事件传参

小程序会把bindtap的属性值统一当成事件名称来处理，参数需要为组件提供data-*自定义属性传参，其中*代表的是参数的名称，

最终：

info会被解析为参数名字

数值2被解析为参数值

data-*="{{xxxxx}}"传递的是值

.wxml

<button type="primary" bindtap="btntap2" data-info="{{2}}">+2按钮</button>

.js

  btntap2(e){
    console.log(e)
  },

若使用data-*="xxxxx"传递的是字符

<button type="primary" bindtap="btntap2" data-info="2">+2按钮</button>

在事件处理函数中，通过event.targent.dataset.参数名 即可获得具体参数值

.wxml

<button type="primary" bindtap="btntap2" data-info="{{2}}">+2按钮</button>

.js

 btntap2(e){
    this.setData({
      count: this.data.count + e.target.dataset.info
    })
  },

bindinput语法格式

e.detail.value获取文本框数据

在小程序中，通过input事件来响应文本框的输入事件

1、通过bindinput为文本框绑定输入事件

<input bindinput="inputHandler"> </input>

2、在页面的.js文件中定义处理事件函数

  inputHandler(e){
    console.log(e.detail.value)
  },

文本框和data之间数据同步

<input value="{{msg}}" bindinput="inputHandler1"/>

data: {
    msg:'你好',
}  
inputHandler1(e) {
    this.setData({
        msg: e.detail.value
    })
    console.log('msg', this.data.msg)
},

在文本框输入123,同步到data的msg

条件渲染

wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块

也可以用wx:elif和wx:else来添加else判断

 data: {
    type:1	// 页面只显示男

  },

<!-- 条件渲染 -->
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

结合block使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用多个wx:if控制属性

<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

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

hidden

直接使用 hidden="{{condition}}"也能控制元素的显示与隐藏

<view hidden="{{flagtrue}}">条件为true的时候隐藏</view>
<view hidden="{{flagfalse}}">条件为false的时候显示</view>

  data: {
 
    flagtrue: true,
    flagfalse: false
  },

wx:if和hidden对比

1、运行方式不同

• wx:if以动态创建和移除元素的方式，控制元素的展示隐藏
• hidden以切换样式的方式（display:none/block;），控制元素的显示与隐藏

2、使用建议

• 频繁切换时，建议使用**hidden提高渲染效果**
• 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

列表渲染

通过wx:for根据指定的数组，循环渲染重复的组件结构

默认情况下，当前循环项的索引用index表示；当前循环项用item表示。

wx:key="index" 解决报黄

<!-- 列表渲染 -->
<view wx:for="{{arr1}}">
  索引是：{{index}},item项是：{{item}}
</view>

 data: {
    arr1: ['苹果','华为','小米']
  },

手动指定索引和当前项的变量名*

• 使用wx:for-index可以指定当前循环项的索引的变量名

• 使用wx:for-item可以指定当前项的变量名

wx:key的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率。

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

  data: {
    userList:[
      {id:1,name:'小红'},
      {id:2,name:'小白'},
      {id:3,name:'小黑'}
  ]
  },

 wxss和css

WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。

与CSS相比，WXSS扩展的特性有：

• rpx尺寸单位
• @import样式导入

rpx

rpx是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。

• 在较小的设备上，1rpx所代表的宽度较小
• 在较大的设备上，1rpx所代表的宽度较大

单位换算：

在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：750rpx=375px=750物理像素
1rpx=0.5px=1物理像素

样式导入

@import的语法格式

@import后跟需要导入的外联样式表的相对路径

common.wxss

.username {
  color: red;
}

test.wxss引用

@import '/common/common.wxss';
input {
  border: 1px solid #eee;
  padding: 5px;
  margin: 5px;
  /* 圆角 */
  border-radius: 3px;
}

全局样式和局部样式

全局样式

定义在app.wxss中的样式为全局样式，作用于每一个页面

view {
  padding: 10rpx;
  background-color: blue;
  margin: 10rpx;
}

局部样式

在页面的.wxss文件定义的样式，之作用域当前页面

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式