使用小程序插件时,传递函数无效

GeSnowBoy commented 3 years ago

复现步骤

                // 原始代码
                <auth-button
                    data-url="/packageFarfetch/pages/bag/bag"
                    onAuthSuccess={() => {
                        Taro.navigateTo({
                            url: '/packageFarfetch/pages/bag/bag',
                        });
                    }}
                >
                    登录
                </auth-button>

期望结果

点击后,跳转购物袋页面

实际结果

无任何反应跳转

环境信息

Taro CLI 3.3.0 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.2 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.3.0 => 3.3.0 
      @tarojs/mini-runner: 3.3.0 => 3.3.0 
      @tarojs/react: 3.3.0 => 3.3.0 
      @tarojs/runtime: 3.3.0 => 3.3.0 
      @tarojs/taro: 3.3.0 => 3.3.0 
      @tarojs/webpack-runner: 3.3.0 => 3.3.0 
      babel-preset-taro: 3.3.0 => 3.3.0 
      eslint-config-taro: 3.3.0 => 3.3.0 
      react: ^17.0.0 => 17.0.2 
    npmGlobalPackages:
      typescript: 4.2.2

补充信息

项目使用taro版本为3.3.0. (上面填写的选项没有). 目前在升级项目版本中. 主要原因是因为 onAuthSuccess 函数未被调用. 然后我尝试了下,添加 bindauthSuccess 字段, 发现可以使用了.

                <auth-button
                    data-url="/packageFarfetch/pages/bag/bag"
                    bindauthSuccess
                    onAuthSuccess={() => {
                        Taro.navigateTo({
                            url: '/packageFarfetch/pages/bag/bag',
                        });
                    }}
                >
                  登录
                </auth-button>

添加的那个bind 函数名是我自己试出来的. 没有任何文档这么写. 所以想问下是taro编译的问题吗

Chen-jj commented 3 years ago

@GeSnowBoy

Taro 使用原生组件/插件，JSX 绑定的事件名会影响在 dist/base.wxml 模板中绑定的事件名，目前对应的逻辑是：

https://github.com/NervJS/taro/blob/902b7554eb536b106b237fdc6996300257f38a07/packages/shared/src/template.ts#L209-L219

例如：

<auth-button
  bindauthSuccess // 对应绑定 bindauthSuccess
  onAuthsuccess // 对应绑定 bindauthsuccess
  onAuthSuccess // 对应绑定 bind:auth-success
>

至于 JSX 的事件名怎么写，就要看插件派发的事件名来确定了。

GeSnowBoy commented 3 years ago

@Chen-jj ,谢谢你的回复.可能我表述的不太好,我再复述下我的需求.

auth-button 组件是一个插件里面的组件, 需要 bind:authSuccess 属性.

我觉得按照如下写法可以,但是没有效果(按照react语法).

<auth-button
    data-url="/packageFarfetch/pages/bag/bag"
    onauthSuccess={() => {
        Taro.navigateTo({
            url: '/packageFarfetch/pages/bag/bag',
        });
    }}
>
    登录
</auth-button>

实际上,我如下写,这个属性才能正常传入

<auth-button
    data-url="/packageFarfetch/pages/bag/bag"
    bindauthSuccess  // 这里后面没有函数,只需要写一个 bindauthSuccess
    onauthSuccess={() => {
        Taro.navigateTo({
            url: '/packageFarfetch/pages/bag/bag',
        });
    }}
>
    登录
</auth-button>

而且 bindauthSuccess 这种写法没有文档,完全是我碰巧试出来的.

所以这让我很困惑,感觉 Taro 对这里的绑定是不是需要优化下,或者写进相关文档说明 ?

ps: 看了你的回复我尝试如下写法, 发现也不行


<auth-button
data-url="/packageFarfetch/pages/bag/bag"
bindauthSuccess={() => {
Taro.navigateTo({
url: '/packageFarfetch/pages/bag/bag',
});
}}

登录
</auth-button>

顺带 taro文档中 [插件组件接受外部 props](https://taro-docs.jd.com/taro/docs/miniprogram-plugin#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E7%BB%84%E4%BB%B6),我也尝试了下,发现没有用.文档如下:

> 如果需要给插件传入参数，需要将参数统一放在组件的 props 中进行传入。
``` js
// 常规 props 传递
<Plugin title={this.state.name} desc={this.state.desc} />

// 在使用插件组件时需要改造成以下形式：
const extraProps = {
  name: this.state.name,
  desc: this.state.desc
}
<Plugin props={extraProps} />

pandajk commented 3 years ago

@Chen-jj ,谢谢你的回复.可能我表述的不太好,我再复述下我的需求.

auth-button 组件是一个插件里面的组件, 需要 bind:authSuccess 属性.

我觉得按照如下写法可以,但是没有效果(按照react语法).
<auth-button
    data-url="/packageFarfetch/pages/bag/bag"
    onauthSuccess={() => {
        Taro.navigateTo({
            url: '/packageFarfetch/pages/bag/bag',
        });
    }}
>
    登录
</auth-button>
实际上,我如下写,这个属性才能正常传入
<auth-button
    data-url="/packageFarfetch/pages/bag/bag"
    bindauthSuccess  // 这里后面没有函数,只需要写一个 bindauthSuccess
    onauthSuccess={() => {
        Taro.navigateTo({
            url: '/packageFarfetch/pages/bag/bag',
        });
    }}
>
    登录
</auth-button>
而且 bindauthSuccess 这种写法没有文档,完全是我碰巧试出来的.

所以这让我很困惑,感觉 Taro 对这里的绑定是不是需要优化下,或者写进相关文档说明 ?

ps: 看了你的回复我尝试如下写法, 发现也不行
<auth-button
    data-url="/packageFarfetch/pages/bag/bag"
    bindauthSuccess={() => {
        Taro.navigateTo({
            url: '/packageFarfetch/pages/bag/bag',
        });
    }}
>
    登录
</auth-button>
顺带 taro文档中插件组件接受外部 props,我也尝试了下,发现没有用.文档如下:

如果需要给插件传入参数，需要将参数统一放在组件的 props 中进行传入。
// 常规 props 传递
<Plugin title={this.state.name} desc={this.state.desc} />

// 在使用插件组件时需要改造成以下形式：
const extraProps = {
  name: this.state.name,
  desc: this.state.desc
}
<Plugin props={extraProps} />

小写首字母解决了，我弄了好久🙄️

522109452 commented 2 years ago

使用插件，传递参数无效的问题我这边也遇到了。比如插件组件名称为 wLivePlayer 查看编译结果 base.wxml 文件，没有将传递参数编译进去 @Chen-jj

<template name="tmpl_4_wLivePlayer">
  <wLivePlayer  id="{{i.uid}}">
    <block wx:for="{{i.cn}}" wx:key="uid">
      <template is="{{xs.e(cid+1)}}" data="{{i:item,l:l}}" />
    </block>
  </wLivePlayer>
</template>

目前只能通过修改编译结果来达到预期效果