Пользовательское событие апплета WeChat

WeChat

Преамбула

В предыдущей главе я познакомил вас с пользовательскими компонентами мини-программ WeChat, а в этой главе я хочу рассказать о еще одной мощной функции мини-программ — пользовательских событиях.

Что такое настраиваемое событие? Вы можете просто понять это так: при срабатывании некоторых событий дочернего компонента оно также может вызвать событие, соответствующее родительскому компоненту, и изменить некоторые данные в родительском компоненте.Событие является настраиваемым событием.

Ребята, которые прочитали и изучили учебник по пользовательским компонентам, официально предоставленный апплетом, определенно будут иметь такое же желание ругаться, как и я...

Потому что вышесказанное действительно сбивает с толку...

Но ничего, сегодня блогер подробно объяснит пользовательские события апплета WeChat.

структура корпуса

Прежде всего, я все же объясню вам это в виде кейса (это также поможет всем лучше понять это)
Кратко ознакомьтесь с содержанием кейс-проекта (на основе кейса пользовательского компонента в предыдущей главе).
название проекта:component
пользовательский подкомпонент cpt
Родительский компонент:logs

component1.png
component1.png

в подкомпонентеcptСуществует кнопка, которая отображает значение, сохраненное в данный момент компонентом кнопки.counter.

родительский компонентlogsцитата триcptДочерний компонент, у которого есть собственная первая переменная в родительском компонентеtotal.

Каждый раз, когда нажимается другая кнопка, значение на кнопке увеличивается на разные размеры,

в то же времяtotalВ переменную записывается сумма значений трех кнопок, как показано на рисунке:

logs.wxml.png
logs.wxml.png

писать подкомпоненты

cpt.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  <button bindtap="_incrementCounter">{{counter}}</button>
</view>

В подкомпоненте cpt есть кнопка, кнопка добавляет событие клика_incrementCounter, в то же время содержимое кнопки отображает ее значениеcounter

cpt.js

Component({
  properties: {
    // 这里定义了num属性，属性值可以在组件使用时指定
    num: {          // num定义的就是点击每个按钮分别增加的数值,可以在调用组件的时候进行更改
      type: Number,
      value: 1
    }
  },
  data: {
    // 这里是一些组件内部数据
    counter: 0      // counter定义的是每个按钮上的数值
  },
  methods: {
    // 这里是一个自定义方法,每次点击按钮增加对应的数值
    _incrementCounter (e) {
      let num = this.data.num
      this.setData({
        counter: this.data.counter + num
      })
     // 微信小程序中是通过triggerEvent来给父组件传递信息的
      this.triggerEvent('increment', {num: num})  // 将num通过参数的形式传递给父组件
    }
  }
})

написать родительский компонент

После написания дочернего компонента его можно использовать в родительском компоненте.logsна который ссылается, и установить для него пользовательское событие
(Не забудьте добавить в родительский компонент.jsonссылка в файле)
logs.json

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    "component-tag-name": "../components/cpt/cpt"
  }
}

logs.wxml

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
   三个按钮总和: {{total}}
  <component-tag-name bindincrement="incrementTotal" num="2"></component-tag-name>
  <component-tag-name bindincrement="incrementTotal" num="3"></component-tag-name>
  <component-tag-name bindincrement="incrementTotal" num="5"></component-tag-name> 
</view>

Здесь есть пробел, который стоит выделить: когда дается официальный вызов дочернего компонента в родительском компоненте, он используется для добавления к нему событий привязки.bind:incrementформа, но после того, как вы ее попробуете, вам все равно придется использоватьbindincrementЭтот способ написания полезен.incrementТо есть, когда вы определяете дочерний компонент, вы передаетеtriggerEventИмя переданного события.

logs.js

Page({
  data: {
    logs: [],
    total: 0,  // 父组件中的数据total用以记录三个按钮总和
  },
  incrementTotal (e) {    // 定义父组件的
    console.log(e.detail)    // 通过e.detail获取点击的那个对象
    var num = e.detail.num
    this.setData({
      total: this.data.total + e.detail.num
    })
  },
})

При нажатии на три кнопки соответственно видно, что значения изменились, а вывод консолиe.detailИмеются также соответствующиеnumАтрибуты.

result.png
result.png

послесловие

Через простой небольшой пример здесь представлены пользовательские события в апплете Те, кто выучил vue.js, узнают, каково это снова выучить vue.js o(╥﹏╥)o На самом деле, я лично думаю, что официальный документ Он хорошо написан, и студенты, которые хотят изучать небольшие программы, также могут следовать инструкциям в официальной документации.

Категории