微信小程序开发之框架篇

news2025/1/12 17:49:16

目录

一，框架

1.页面管理

2.基础组件

3.丰富的API

二、小程序视图层 

1.响应的数据绑定

2.列表渲染 

3.条件渲染 

4.模板 

三、逻辑层 App Service

1.注册小程序

2.注册页面

2.1.使用 Page 构造器注册页面

2.2.在页面中使用 behaviors

 3.页面路由

4.小程序的生命周期

4.1.一级菜单跳一级菜单

4.2.一级菜单跳二级菜单

4.3.二级菜单跳二级菜单

4.4.二级菜单跳一级菜单

4.5.页面隔代跳一级菜单

四、小程序事件 

1.什么是事件

2.事件的使用方式

3.使用WXS函数响应事件

4.事件详解

普通事件绑定

一，框架：

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

网站：微信开放文档 (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/reference/

1.页面管理


框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到 框架 中，其他的一切复杂的操作都交由 框架 处理。

2.基础组件


框架 提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。

3.丰富的API


框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等
 

二、小程序视图层 


WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

要完整了解 WXML 语法，请参考WXML 语法参考。

用以下一些简单的例子来看看 WXML 具有什么能力

1.响应的数据绑定


框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：
 

在app中建立4个页面

app.json:

{
  "pages": [
    "pages/a/a",
    "pages/b/b",
    "pages/c/c",
    "pages/d/d",
    "pages/user/user",
    "pages/index/index",
    "pages/logs/logs"

  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "permission": {
    "scope.userLocation": {
      "desc": "展示给客户看的信息"
    }
  }
}

a.json

// pages/a/a.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      msg:"页面A",
      array:[9,87,65,432],
      users:[{id:1,name:"张三"},{id:2,name:"李四"}],
      view: 'MINA',
      staffA: {firstName: 'Hulk', lastName: 'Hu'},
      staffB: {firstName: 'Shang', lastName: 'You'},
      staffC: {firstName: 'Gideon', lastName: 'Lin'}
      
      
  },
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

a.wxml

<!--pages/a/a.wxml-->
<text>pages/a/a.wxml</text>
<view>{{msg}}</view>
<view wx:for="{{users}}" wx:key="id">用户编号：{{item.id}},用户名称：{{item.name}}</view>
<view wx:for="{{array}}">{{item}}</view>

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


var helloData = {
  name: 'Weixin'
}

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

 建立一个页面：

目前name里面是没有值的。

数据绑定

2.列表渲染 

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
  array:[9,87,65,432]
  }
})

3.条件渲染 

源码：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

4.模板 

源码：

<!--wxml-->
<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'}
  }
})

整体演示：

三、逻辑层 App Service

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

增加 App 和 Page 方法，进行程序注册和页面注册。
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
提供模块化能力，每个页面有独立的作用域。
注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

1.注册小程序


每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

详细的参数含义和使用请参考 App 参考文档 。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

2.注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

2.1.使用 Page 构造器注册页面

简单的页面可以使用 Page() 进行构造。

代码示例：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

详细的参数含义和使用请参考 Page 参考文档 。

2.2.在页面中使用 behaviors

基础库 2.9.2 开始支持，低版本需做兼容处理。

页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

具体用法参见 behaviors 。

2.3.使用 Component 构造器构造页面
基础库 1.6.3 开始支持，低版本需做兼容处理。

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

代码示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

 3.页面路由


在小程序中所有页面的路由全部由框架进行管理。

3.1.页面栈
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

路由方式    页面栈表现
初始化    新页面入栈
打开新页面    新页面入栈
页面重定向    当前页面出栈，新页面入栈
页面返回    页面不断出栈，直到目标返回页
Tab 切换    页面全部出栈，只留下新的 Tab 页面
重加载    页面全部出栈，只留下新的页面
开发者可以使用 getCurrentPages() 函数获取当前页面栈。

3.2.路由方式
对于路由的触发方式以及页面生命周期函数如下：

路由方式    触发时机    路由前页面    路由后页面
初始化    小程序打开的第一个页面        onLoad, onShow
打开新页面    调用 API wx.navigateTo
使用组件 <navigator open-type="navigateTo"/>    onHide    onLoad, onShow
页面重定向    调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>    onUnload    onLoad, onShow
页面返回    调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮    onUnload    onShow
Tab 切换    调用 API wx.switchTab
使用组件 <navigator open-type="switchTab"/>
用户切换 Tab        各种情况请参考下表
重启动    调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>    onUnload    onLoad, onShow
Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面    路由后页面    触发的生命周期（按顺序）
A    A    Nothing happend
A    B    A.onHide(), B.onLoad(), B.onShow()
A    B（再次打开）    A.onHide(), B.onShow()
C    A    C.onUnload(), A.onShow()
C    B    C.onUnload(), B.onLoad(), B.onShow()
D    B    D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）    A    D.onUnload(), A.onLoad(), A.onShow()
D（从转发进入）    B    D.onUnload(), B.onLoad(), B.onShow()
3.3.注意事项
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。


4.小程序的生命周期

小程序由两大线程组成：负责界面的线程（view thread）和服务线程（appservice thread），各司其职由互相配合下面我用代码的方式来给大家演示页面跳转到底会触发那些函数。

首先准备四个页面分别是a\b\c\d，其中a和b是一级菜单，c和d是二级菜单，并在这些页面中添加按钮设置相对应的点击事件遵循navigateTo, redirectTo 只能打开非 tabBar 页面和switchTab 只能打开 tabBar 页面的原则。

小程序框架 / 逻辑层 / 页面生命周期 (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

4.1.一级菜单跳一级菜单

由原来的a页面的onHide触发到b页面的onShow触发，我们可知一级菜单跳一级菜单，原先的一级菜单会隐藏新开的一级菜单会显示。

4.2.一级菜单跳二级菜单

和一级菜单跳一级菜单不同的是，一级菜单先触发onHide随后二级菜单会触发onLoad、onShow、onReady，也就是说二级菜单需要先加载页面再显示页面最后渲染页面而一级菜单不用。

4.3.二级菜单跳二级菜单

二级菜单跳二级菜单和上一个一样，先触发原先的onHide随后二级菜单会触发onLoad、onShow、onReady。

4.4.二级菜单跳一级菜单

二级菜单跳一级菜单，会销毁原有的页面（onUnload），随后一级菜单直接展示（onShow）。

4.5.页面隔代跳一级菜单

这里有一个注意点：使用reLaunch方法

隔代跳级无论中间隔着多少子菜单都会被销毁，最后一级菜单展示（onShow） 。

结论:

1.一级菜单不会被销毁只会隐藏

2.深二级菜单跳浅二级菜单深的会销毁（d->c,d会被销毁）

3.浅二级菜单跳深二级菜单只会被隐藏（c->d,c会隐藏）

4.隔代跳级中间的所有页面会被销毁

四、小程序事件 

视图层：

1.什么是事件

  • 事件是视图层到逻辑层的通讯方式。

  • 事件可以将用户的行为反馈到逻辑层进行处理。

  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

  • 事件对象可以携带额外信息，如 id, dataset, touches。

2.事件的使用方式


在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
 

Page({
  tapName: function(event) {
    console.log(event)
  }
})
  • 可以看到log出来的信息大致如下：
{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

3.使用WXS函数响应事件


基础库 2.4.4 开始支持，低版本需做兼容处理。

从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：

在组件中绑定和注册事件处理的WXS函数。
 

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="Weixin" bindtap="{{wxs.tapName}}"> Click me! </view>
**注：绑定的WXS函数必须用{{}}括起来**
  • test.wxs文件实现tapName函数
function tapName(event, ownerInstance) {
  console.log('tap Weixin', JSON.stringify(event))
}
module.exports = {
  tapName: tapName
}

ownerInstance包含了一些方法，可以设置组件的样式和class，具体包含的方法以及为什么要用WXS函数响应事件，请点击查看详情。

4.事件详解
 


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

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

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

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

普通事件绑定

事件绑定的写法类似于组件的属性，如：

<view bindtap="handleTap">
    Click here!
</view>

如果用户点击这个 view ，则页面的 handleTap 会被调用。

事件绑定函数可以是一个数据绑定，如：

<view bindtap="{{ handlerName }}">
    Click here!
</view>

此时，页面的 this.data.handlerName 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。

自基础库版本 1.5.0 起，在大多数组件和自定义组件中， bind 后可以紧跟一个冒号，其含义不变，如 bind:tap 。基础库版本 2.8.1 起，在所有组件中开始提供这个支持。

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 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>

互斥事件绑定

自基础库版本 2.8.2 起，除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="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>

事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

属性类型说明基础库版本
typeString事件类型
timeStampInteger事件生成时的时间戳
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
markObject事件标记数据2.7.1

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

属性类型说明
detailObject额外的信息

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

属性类型说明
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息的数组

特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget。

type

代表事件的类型。

timeStamp

页面打开到触发事件所经过的毫秒数。

target

触发事件的源组件。

属性类型说明
idString事件源组件的id
datasetObject事件源组件上由data-开头的自定义属性组成的集合

currentTarget

事件绑定的当前组件。

属性类型说明
idString当前组件的id
datasetObject当前组件上由data-开头的自定义属性组成的集合

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

  • data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；

  • data-elementType ，最终会呈现为 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 // 大写会转为小写
  }
})

mark

在基础库版本 2.7.1 以上，可以使用 mark 来识别具体触发事件的 target 节点。此外， mark 还可以用于承载一些自定义数据（类似于 dataset ）。

当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark 。）

代码示例：

<view mark:myMark="last" bindtap="bindViewTap">
  <button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button>
</view>

在上述 WXML 中，如果按钮被点击，将触发 bindViewTap 和 bindButtonTap 两个事件，事件携带的 event.mark 将包含 myMark 和 anotherMark 两项。

Page({
  bindViewTap: function(e) {
    e.mark.myMark === "last" // true
    e.mark.anotherMark === "leaf" // true
  }
})

mark 和 dataset 很相似，主要区别在于： mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。

细节注意事项：

  • 如果存在同名的 mark ，父节点的 mark 会被子节点覆盖。

  • 在自定义组件中接收事件时， mark 不包含自定义组件外的节点的 mark 。

  • 不同于 dataset ，节点的 mark 不会做连字符和大小写转换。

touches

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

Touch 对象
属性类型说明
identifierNumber触摸点的标识符
pageX, pageYNumber距离文档左上角的距离，文档的左上角为原点 ，横向为 X 轴，纵向为 Y 轴
clientX, clientYNumber距离页面可显示区域（屏幕除去导航条）左上角距离，横向为 X 轴，纵向为 Y 轴
CanvasTouch 对象
属性类型说明特殊说明
identifierNumber触摸点的标识符
x, yNumber距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为 X 轴，纵向为 Y 轴

changedTouches

changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1099696.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PC电脑 VMware安装的linux CentOs7如何扩容磁盘？

PC电脑 VMware安装的linux CentOs7如何扩容磁盘？

一、VM中进行扩容设置 必须要关闭当前CentOS&#xff0c;不然扩展按钮是灰色的。 输入值必须大于当前磁盘容量。然后点击扩展&#xff0c;等待扩展完成会提示一个弹框&#xff0c;点击确定&#xff0c;继续确定。 二、操作CentOS扩容——磁盘分区 第一步设置完成。那就启动 …
阅读更多...
多维时序 | MATLAB实现SSA-CNN-BiLSTM-Attention多变量时间序列预测（SE注意力机制）

多维时序 | MATLAB实现SSA-CNN-BiLSTM-Attention多变量时间序列预测（SE注意力机制）

多维时序 | MATLAB实现SSA-CNN-BiLSTM-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09; 目录 多维时序 | MATLAB实现SSA-CNN-BiLSTM-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基…
阅读更多...
Spring事务和事务的传播机制（JavaEE进阶系列7）

Spring事务和事务的传播机制（JavaEE进阶系列7）

目录 前言&#xff1a; 1.为什么需要事务 2.Spring中事务的实现 2.1编程式事务 2.2声明式事务 2.3Transactional的作用范围 2.4Transactional参数说明 2.5Transactional的注意事项 2.6Transactional工作原理 3.事务隔离级别 3.1事务特性的回顾 3.2Spring中设置事务…
阅读更多...
Android Fragment 基本概念和基本使用

Android Fragment 基本概念和基本使用

Android Fragment 基本概念和基本使用 一、基本概念 Fragment&#xff0c;简称碎片&#xff0c;是Android 3.0&#xff08;API 11&#xff09;提出的&#xff0c;为了兼容低版本&#xff0c;support-v4库中也开发了一套Fragment API&#xff0c;最低兼容Android 1.6。 过去s…
阅读更多...
Linux中使用nfs共享存储

Linux中使用nfs共享存储

NFS是一种基于TCP/IP传输的网络文件系统协议。通过使用NFS协议&#xff0c;客户机可以像访问本地目录一样访问远程服务器中的共享资源。对于大多数负载均衡群来说&#xff0c;使用NFS协议来共享数据存储是比较常见的做法&#xff0c;NFS也是存储设备必然支持的一种协议。但是由…
阅读更多...
VM虚拟机运行的Ubuntu连入同一局域网，并实现双机方法

VM虚拟机运行的Ubuntu连入同一局域网，并实现双机方法

环境&#xff1a; Windows 10 VMware Workstation Pro 16 Ubuntu 20.4 在虚拟机设置桥接模式 确保虚拟机处于关闭状态&#xff0c;在Vm中设置&#xff1a; 编辑->虚拟网络编辑器 如果你以前设置过&#xff0c;可以重置之。 重置之后&#xff0c;添加桥接模式&#xff1a; …
阅读更多...
pytorch_神经网络构建4

pytorch_神经网络构建4

文章目录 循环神经网络LSTM词嵌入skip-Gram模型N-Gram模型词性预测RNN循环神经网络的基础模块实现RNN识别图片RNN时间序列预测词向量模块词向量运用N-Gram模型lstm词性预测 循环神经网络 这个网络主要用来处理序列信息,之前处理图片时大部分是分析图片的结构信息, 什么是序列信…
阅读更多...
Mac电脑Dock窗口预览工具 DockView

Mac电脑Dock窗口预览工具 DockView

DockView是一款适用于Mac操作系统的软件&#xff0c;为用户提供了一种方便的窗口管理工具。这款软件可以让用户更高效地管理和浏览当前打开的窗口。 DockView的主要功能是在Dock栏上显示每个窗口的缩略图&#xff0c;并提供了一些相关的操作选项。当用户将鼠标悬停在Dock栏上的…
阅读更多...
前端之【数据可视化】

前端之【数据可视化】

目录 &#x1f31f;前言&#x1f31f;为什么要数据可视化(优点)&#x1f31f;前端数据可视化框架&#x1f31f;Echarts&#x1f31f;Highcharts&#x1f31f;D3 &#x1f31f;数据可视化框架的选择&#x1f31f;写在最后 &#x1f31f;前言 数据可视化主要旨在借助于图形化手段…
阅读更多...
阿里云云服务器实例使用教学

阿里云云服务器实例使用教学

目录 云服务器免费试用 详细步骤 Xshell 远程连接 云服务器免费试用 阿里云云服务器网址&#xff1a;阿里云免费试用 - 阿里云 详细步骤 访问阿里云免费试用。单击页面右上方的登录/注册按钮&#xff0c;并根据页面提示完成账号登录&#xff08;已有阿里云账号&#xff09;…
阅读更多...
Qt/C++编写物联网组件/支持modbus/rtu/tcp/udp/websocket/mqtt/多线程采集

Qt/C++编写物联网组件/支持modbus/rtu/tcp/udp/websocket/mqtt/多线程采集

一、功能特点 支持多种协议&#xff0c;包括Modbus_Rtu_Com/Modbus_Rtu_Tcp/Modbus_Rtu_Udp/Modbus_Rtu_Web/Modbus_Tcp/Modbus_Udp/Modbus_Web等&#xff0c;其中web指websocket。支持多种采集通讯方式&#xff0c;包括串口和网络等&#xff0c;可自由拓展其他方式。自定义采…
阅读更多...
视频目标语义分割自动标注——从图像轮廓提取到转成json标签文件

视频目标语义分割自动标注——从图像轮廓提取到转成json标签文件

前言 语义分割数据标注是为训练语义分割模型准备数据的过程。语义分割是计算机视觉领域的任务&#xff0c;其中需要为图像中的每个像素分配一个类别标签&#xff0c;以区分不同的对象或区域。标注数据时&#xff0c;通常需要为每个对象或区域分配一个唯一的标签&#xff0c;并…
阅读更多...
STM32 HAL库高级定时器输入捕获脉宽测量

STM32 HAL库高级定时器输入捕获脉宽测量

STM32 HAL库高级定时器输入捕获脉宽测量 &#x1f4cc;相关篇《STM32 HAL库定时器输入捕获SlaveMode脉宽测量》 ✨相比于上面所使用的高级定时器输入捕获从模式来测量PWM信号&#xff0c;实现方法更为复杂一下&#xff0c;但是还是将实现的方法记录下来。 &#x1f4cc;本篇实现…
阅读更多...
OpenCV16-图像连通域分析

OpenCV16-图像连通域分析

OpenCV16-图像连通域分析 1.图像连通域分析2.connectedComponents3.connectedComponentsWithStatus 1.图像连通域分析 连通域是指图像中具有相同像素值并且位置相邻的像素组成的区域。连通域分析是指在图像中寻找彼此互相独立的连通域并将其标记出来。 4邻域与8邻域的概念&am…
阅读更多...
TatukGIS Developer Kernel使用教程：如何为FMX创建第一个应用程序

TatukGIS Developer Kernel使用教程：如何为FMX创建第一个应用程序

概述&#xff1a;TatukGIS Developer Kernel&#xff08;DK&#xff09;是一个用于开发自定义地理信息系统&#xff08;GIS&#xff09;应用程序以及解决方案的综合性软件开发工具包&#xff08;SDK&#xff09;。本篇文章主要介绍用DK11为FMX创建一个应用程序&#xff0c;现在…
阅读更多...
solidworks 2024新功能之--保存为低版本 硕迪科技

solidworks 2024新功能之--保存为低版本 硕迪科技

大家期盼已久的SOLIDWORKS保存低版本文件功能来了&#xff0c;从SOLIDWORKS 2024 开始&#xff0c;您可以将在最新版本的SOLIDWORKS 中创建的SOLIDWORKS零件、装配体和工程图另存为SOLIDWORKS 早期版本的全功能文档&#xff08;完成的特征树与相关参数&#xff09;。 将文件另…
阅读更多...
Spring Boot项目中使用 TrueLicense 生成和验证License

Spring Boot项目中使用 TrueLicense 生成和验证License

1、Linux 在客户linux上新建layman目录&#xff0c;导入license.sh文件&#xff0c; [rootlocalhost layman]# mkdir -p /laymanlicense.sh文件内容&#xff1a; #!/bin/bash # 1.获取要监控的本地服务器IP地址 IPifconfig | grep inet | grep -vE inet6|127.0.0.1 | awk {p…
阅读更多...
Kubernetes简略架构

Kubernetes简略架构

kubectl kubectl是Kubernetes的命令行工具。它的全称为Kubernetes Command Line Tool&#xff0c;是用于管理Kubernetes集群的工具。它可以用来创建、更新、删除资源对象、查看日志等操作 Node: Kubernetes 通过将容器放入在节点&#xff08;Node&#xff09;上运行的Pod 中…
阅读更多...
5、使用 pgAdmin4 图形化创建和管理 PostgreSQL 数据库

5、使用 pgAdmin4 图形化创建和管理 PostgreSQL 数据库

通过上几篇文章我们讲解了如何安装 PostgreSQL 数据库软件和 pgAdmin4 图形化管理工具。 今天我们继续学习如何通过 pgAdmin4 管理工具图形化创建和管理 PostgreSQL 数据库。 一、PostgreSQL的基本工作方式 在学习如何使用PostgreSQL创建数据库之前&#xff0c;我们需要了解一…
阅读更多...
C++学习： 文件I/O

C++学习： 文件I/O

作者: 苏丙榅 原文链接: https://subingwen.cn/c/file/ 文章目录 1. 文件概述1.1 什么是文件I/O1.2 磁盘文件分类 2. 文件的打开和关闭2.1 文件指针2.2 打开文件 2.3 关闭文件3. 文件的读写3.1 按照字符读写文件3.1.1 写文件3.1.2 读文件3.1.3 EOF 3.2 按照行读写文件3.2.1 写文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023