小程序笔记wxml

痛定思痛。 2022-05-29 01:43 197阅读 0赞

数据绑定及渲染

//数据绑定 <view> { { message}} </view> //遍历 <view wx:for="{ { newobj}}">{ { item}}{ { index}}</view> //判断 <view wx:if="{ { view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{ { view == 'APP'}}"> APP </view> <view wx:else="{ { view == 'MINA'}}"> MINA </view>

模板

<template name="staffName"> <view> FirstName: { { firstName}}, LastName: { { lastName}} </view> </template> <template is="staffName" data="{ { ...staffA}}"></template> <template is="staffName" data="{ { ...staffB}}"></template> <template is="staffName" data="{ { ...staffC}}"></template> // page.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })

事件

事件分为冒泡事件和非冒泡事件：

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

<view bindtap="add"> {
       {
       count}} </view>
    Page({
      data: {
        count: 1
      },
      add: function(e) {
        this.setData({
          count: this.data.count + 1
        })
      }
    })

WXML的冒泡事件列表：

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>触发条件</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touchstart</td> 
   <td>手指触摸动作开始</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>touchmove</td> 
   <td>手指触摸后移动</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>touchcancel</td> 
   <td>手指触摸动作被打断，如来电提醒，弹窗</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>touchend</td> 
   <td>手指触摸动作结束</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>tap</td> 
   <td>手指触 摸后马上离开</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>longpress</td> 
   <td>手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td> 
   <td>1.5.0</td> 
  </tr> 
  <tr> 
   <td>longtap</td> 
   <td>手指触摸后，超过350ms再离开（推荐使用longpress事件代替）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>transitionend</td> 
   <td>会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>animationstart</td> 
   <td>会在一个 WXSS animation 动画开始时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>animationiteration</td> 
   <td>会在一个 WXSS animation 一次迭代结束时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>animationend</td> 
   <td>会在一个 WXSS animation 动画完成时触发</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>touchforcechange</td> 
   <td>在支持 3D Touch 的 iPhone 设备，重按时会触发</td> 
   <td>1.9.90</td> 
  </tr> 
 </tbody> 
</table>

事件绑定和冒泡  
事件绑定的写法同组件的属性，以 key、value 的形式。

> key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。  
> value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。  
> bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

实例解析

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

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

事件的捕获阶段  
自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

捕获与冒泡的顺序：在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
      outer view
      <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
        inner view
      </view>
    </view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
      outer view
      <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
        inner view
      </view>
    </view>

dataset data属性的使用

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

示例：
    
    <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
    Page({
      bindViewTap:function(event){
        event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
        event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
      }
    })

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

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

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

<template name="item"> <text>{ { text}}</text> </template>

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

> import 的作用域  
> import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。  
> 如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

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

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