Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
leslie846933 opened this issue Feb 15, 2020 · 14 comments
Assignees
Labels
enhancement New feature or request P-3 V-3 Version - 3.x

Comments

@leslie846933
Copy link

leslie846933 commented Feb 15, 2020

问题描述

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
Copy link

taro-bot bot commented Feb 15, 2020

CC @Chen-jj

@taro-bot
Copy link

taro-bot bot commented Feb 15, 2020

欢迎提交 Issue~

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

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

Good luck and happy coding~

@yuche
Copy link
Contributor

yuche commented Feb 15, 2020

#5476 是 slot 无效,那应该是可用的?

@taro-bot
Copy link

taro-bot bot commented Feb 17, 2020

Hello~

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

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

Good luck and happy coding~

@leslie846933
Copy link
Author

#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
Copy link
Contributor

yuche commented Feb 17, 2020

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

@leslie846933
Copy link
Author

@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
Copy link
Contributor

yuche commented Feb 17, 2020

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

@leslie846933
Copy link
Author

只有 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
Copy link
Contributor

yuche commented Feb 17, 2020

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

@leslie846933
Copy link
Author

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

好的,感谢

@luckyadam
Copy link
Member

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

@Chen-jj Chen-jj added enhancement New feature or request P-3 V-3 Version - 3.x and removed discussion labels Jul 3, 2020
@Chen-jj
Copy link
Contributor

Chen-jj commented Jul 13, 2020

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

@fwh1990
Copy link

fwh1990 commented Aug 1, 2020

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request P-3 V-3 Version - 3.x
Projects
None yet
Development

No branches or pull requests

5 participants