Taro: Taro v3.0.0-alpha.2 component组件中usingComponents使用微信小程序WUI组件不能正常编译

[leslie846933]

问题描述

Taro v3.0.0-alpha.2 component组件中usingComponents使用微信小程序WUI组件不能正常编译

复现步骤

/* src/components/NavigationBar/index.jsx */

import Taro from '@tarojs/taro';
import React, { Component } from 'react'
import { View } from "@tarojs/components";
import './index.less';

class NavigationBar extends Component {

  config = {
    usingComponents: {
      'mp-navigation-bar': './navigation-bar/navigation-bar'
    }
  };

  render() {
    const { loading, show, animated, background, title, back, isHome, mode } = this.props;

    return (
      <mp-navigation-bar
        loading={loading}
        show={show}
        animated={animated}
        color={mode === 'dark' ? '#000000' : '#ffffff'}
        background={background}
        title={title}
        back={back}
      >
        {
          !isHome && (
            <View className={['navigation-left', mode === 'dark' ? 'is-dark' : ''].join(' ')} slot='left'>
              <View className='yjd-icon yjd-icon-left back-action' onClick={this.clickBackHandle.bind(this)} />
              <View className='navigation-divider' />
              <View className='yjd-icon yjd-icon-home-fill home-action' onClick={this.clickHomeHandle.bind(this)} />
            </View>
          )
        }
      </mp-navigation-bar>
    )
  }
}

export default NavigationBar;

尝试在创建 src/components/NavigationBar/index.config.js 也无效

export default {
  usingComponents: {
    'mp-navigation-bar': './navigation-bar/navigation-bar'
  }
}

// src/pages/index/index.jsx

import Taro from '@tarojs/taro';
import React, { Component } from 'react'
import { View, Swiper, SwiperItem, Image, Text } from '@tarojs/components';
import NavigationBar from "@/components/NavigationBar";
import './index.less'
class Index extends Component {

  render () {
    const { navigation } = this.state;

    return (
      <UserModal>
        <View>
          <NavigationBar
            loading={navigation.loading}
            show={navigation.show}
            animated={navigation.animated}
            color={navigation.color}
            background={navigation.background}
            title={navigation.title}
            back={navigation.back}
          />
        </View>
      </UserModal>
    )
  }
}

export default Index

在2.X.X的版本是可以这样使用的，但是升级后无法正常编译了

期望行为

报错信息

系统信息

Taro CLI 3.0.0-alpha.2 environment info:
System:
OS: macOS 10.14.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 3.0.0-alpha.2 => 3.0.0-alpha.2
@tarojs/taro: 3.0.0-alpha.2 => 3.0.0-alpha.2
eslint-config-taro: 3.0.0-alpha.2 => 3.0.0-alpha.2
react: ^16.10.0 => 16.12.0

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot[bot]]

CC @Chen-jj

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[yuche]

在 https://github.com/NervJS/taro/issues/5476 是 slot 无效，那应该是可用的？

[taro-bot[bot]]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[leslie846933]

在 #5476 是 slot 无效，那应该是可用的？

因为在#5476 中，我把src/components/NavigationBar/index.jsx - config配置移动到了src/pages/index/index.config.js中了，才能显示WUI的组件的，如果这个引用微信第三方组件在component使用则不行

// src/pages/index/index.config.js
export default {
  usingComponents: {
    'mp-navigation-bar': './navigation-bar/navigation-bar'
  }
}

[yuche]

@leslie846933 next 取消了之前 config 在 component 的做法。之前的做法是在编译时捕捉 AST 转化为 JSON 对象，这种做法没办法实现动态的配置，灵活性不够。

[leslie846933]

@leslie846933 next 取消了之前 config 在 component 的做法。之前的做法是在编译时捕捉 AST 转化为 JSON 对象，这种做法没办法实现动态的配置，灵活性不够。

那如以下的结构也是无法编译的吗？

├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── components              公共组件目录
|   |   ├── NavigationBar          
|   |   |   ├── navigation-bar     微信小程序原生组件
|   |   |   ├── index.config.js    导出usingComponents: {'mp-navigation-bar': './navigation-bar/navigation-bar'} 配置
|   |   |   ├── index.jsx
|   |   |   └── index.less
|   ├── app.less            
|   └── app.js             
└── package.json

我尝试过以上配置也是无法编译的，唯有在src/pages/index/inde.config.js中导出usingComponents: {'mp-navigation-bar': '../../components/NavigationBar/navigation-bar/navigation-bar'} 才能编译

[yuche]

只有 pages 才有 *.config.js 文件，组件是没有 config 的。你可以想一下，如果组件在 A 页面中也用了，B 页面中也用了，那它到底遵循 A 还是 B 的 config 的呢？

[leslie846933]

只有 pages 才有 *.config.js 文件，组件是没有 config 的。你可以想一下，如果组件在 A 页面中也用了，B 页面中也用了，那它到底遵循 A 还是 B 的 config 的呢？

@yuche 那好吧，我本想每个页面都用到这个./navigation-bar/navigation-bar组件，想再次封装，配置一次，那么用到的所有页面我仅需引用再次封装的组件，就不需要写多次usingComponents: {'mp-navigation-bar': '../../components/NavigationBar/navigation-bar/navigation-bar'}配置了...

[yuche]

以后会在组件有 config 的时候做一个提醒，正式版发布之前也可能会有改动，这个 issue 先留着吧。

[leslie846933]

以后会在组件有 config 的时候做一个提醒，正式版发布之前也可能会有改动，这个 issue 先留着吧。

好的，感谢

[luckyadam]

后续可以支持保留组件的 config，编译时会把组件 config 合并进入页面的 config

[Chen-jj]

可以在 app.config.js 中配置 usingComponents，这样配置的组件就是全局可用的。

[fwh1990]

后续可以支持保留组件的 config，编译时会把组件 config 合并进入页面的 config

这个特性还有效吗现在？ @luckyadam