微信小程序：第五天

时间：2021-07-30 20:44:30

微信小程序：第五天

1.视图层层

视图层主要有页面描述文件和页面样式文件组成。
创建示例项目index页面的视图如下：

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

可以看到，其和html文件基本大致一样，后面我们需要实战的时候掌握其组件，所以我们需要自己将其都熟悉一下，方面便于我们以后的项目开发，也利于我们以后的工作，可以做到心中有数。

2.数据绑定

示例代码中有如下代码：

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

这就是小程序中的数据绑定。

3.条件渲染

条件渲染其实高级的数据绑定，在绑定的时候加以判断。

<view wx:if="{{condition}}"> True </view>

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

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

4.列表渲染

列表渲染就是循环绑定数据

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

5.模板

在微信小程序中，如果需要重复使用几个组件，这时，我们应该想到模板。

5.1定义模板

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

5.2使用模板

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

<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>

6.引入

我们不仅可以引入当前文件下的模板文件，我们还可以引入其他模板的文件，小程序为我们提供了两个引入方式：

6.1import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

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

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

6.2include

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

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

7.页面的事件

7.1页面事件分为两大类型：

1.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2.非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

7.2冒泡事件的类型：

  • touchstart 手指触摸动作开始
  • touchmove 手指触摸后移动
  • touchcancel 手指触摸动作被打断，如来电提醒，弹窗
  • touchend 手指触摸动作结束
  • tap 手指触摸后马上离开
  • longtap 手指触摸后，超过350ms再离开

7.3事件的绑定如下：

<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

这一天主要在学习视图层的wxml，详细文档请看官方文档。

标签：

相关文章