How to transfer event objects and user-defined parameters simultaneously in Huawei express applications

Phenomenon description

The following methods are used in fast application js Event method of binding component , If you pass the event object and custom parameters at the same time, you will find that the parameters are not received correctly in the callback method , As shown below ：

Problem code ：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <input id="input1" type="button" value=" Jump " onclick="jump(event,1)"/>
  </div>
</template>
<script>
  module.exports = {
    jump: function (event, v) {
      console.info("e = " + JSON.stringify(event));
      console.info("v = " + v);
    }
  }
</script>

Print the log as follows ：

Problem analysis

The supported writing of event callback （ among { {}} It can be omitted ）：

• "fn"：fn Call back the function name for the event （ stay <script> There is a corresponding function implementation in ）.
• "fn(a,b)"： Function parameters, such as a,b It can be a constant , Or in <script> Of data Variables defined in （ Don't write in front this.）.
• "a+b"： expression , among a,b The data type is the same as above .

When the callback function is called , An... Will be automatically added at the end of the parameter list evt Parameters , adopt evt Parameter to access context data related to callback events （ Please refer to the component callback event description for the data content ）, For example, click location of click event x,y.

Solution

Modify the code as follows ：

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <input id="input1" type="button" value=" Jump " onclick="jump(1)" />
  </div>
</template>
<script>
  module.exports = {
    jump: function (v, evt) {
      console.info("e = " + JSON.stringify(evt));
      console.info("v = " + v);
    }
  }
</script>

Print the log as follows ：

Introduction to fast application event binding ：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-template#h1-1575379149868