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

微信小程序插件 props 传递进插件不能嵌套对象 #4658

Closed
Yaphet2015 opened this issue Oct 23, 2019 · 8 comments
Closed

微信小程序插件 props 传递进插件不能嵌套对象 #4658

Yaphet2015 opened this issue Oct 23, 2019 · 8 comments
Assignees

Comments

@Yaphet2015
Copy link

Yaphet2015 commented Oct 23, 2019

问题描述
开发插件
插件导出一个组件A
组件声明一个叫testProps的props
然后在调试用的小程序里引入这个插件的组件A,往testProps里传入一个对象,其内还会嵌套一层对象,比如

{
  a: {
    b: {
      c: 1
    }
  },
  d: 2
}

发现d被传进来了,而a是空的

我的实际例子是传进来了一个function(其实是外部声明的一个组件),进到组件里就空了

image

复现步骤
开发插件
插件导出一个组件A
组件声明一个叫testProps的props
然后在调试用的小程序里引入这个插件的组件A,往testProps里传入一个对象,其内还会嵌套一层对象,比如

{
  a: {
    b: {
      c: 1
    }
  },
  d: 2
}
// 在调试用小程序中引入插件的组件
import * as customMessages from '......'
const myPluginInterface = Taro.requirePlugin('myPlugin')

export default class Index extends Component {
    config: Config = {
    navigationBarTitleText: '首页',
    usingComponents: {
      'imrobot': 'plugin://myPlugin/imrobot'
    }
  }

  render () {
    const customMessagesParams = {
      customMessages // 这里的customMessages就是上面截图的,包含了几个字符串属性和一个函数属性的对象
    }
    console.log('customMessages outside the plugin ', customMessages)

    return (
      <View className='index'>
        <imrobot
          extraProps={customMessagesParams}
        />
      </View>
    )
  }
}

// 在插件代码里声明组件
export default class Imrobot extends Component {

  render() {
    console.log('customMessages inside the plugin ', this.props.customMessages)
    ......
  }
}

期望行为
嵌套对象能被正常传入

报错信息
image

系统信息
👽 Taro v1.3.18

Taro CLI 1.3.18 environment info:
System:
OS: macOS 10.14.6
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
npmPackages:
@tarojs/async-await: 1.3.18 => 1.3.18
@tarojs/cli: ^1.3.18 => 1.3.18
@tarojs/components: 1.3.18 => 1.3.18
@tarojs/plugin-babel: 1.3.18 => 1.3.18
@tarojs/plugin-csso: 1.3.18 => 1.3.18
@tarojs/plugin-less: 1.3.18 => 1.3.18
@tarojs/plugin-uglifyjs: 1.3.18 => 1.3.18
@tarojs/router: 1.3.18 => 1.3.18
@tarojs/taro: 1.3.18 => 1.3.18
@tarojs/taro-alipay: 1.3.18 => 1.3.18
@tarojs/taro-h5: 1.3.18 => 1.3.18
@tarojs/taro-swan: 1.3.18 => 1.3.18
@tarojs/taro-tt: 1.3.18 => 1.3.18
@tarojs/taro-weapp: 1.3.18 => 1.3.18
@tarojs/webpack-runner: 1.3.18 => 1.3.18
eslint-config-taro: 1.3.18 => 1.3.18
eslint-plugin-taro: 1.3.18 => 1.3.18
nerv-devtools: ^1.4.0 => 1.5.0
nervjs: ^1.4.0 => 1.5.0

补充信息
是不是新的props系统的问题
毕竟传入属性需要用一种不太寻常的方式 extraProps 字段传进来
只做了一层遍历?

@taro-bot
Copy link

taro-bot bot commented Oct 23, 2019

欢迎提交 Issue~

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

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

Good luck and happy coding~

@Yaphet2015
Copy link
Author

Yaphet2015 commented Oct 23, 2019

另外还有小程序插件引入 async-await 就报错的问题
#4025
求解决

@Yaphet2015
Copy link
Author

Yaphet2015 commented Oct 23, 2019

试了一下原生小程序插件是好使的

Component({
  data: {
    list:[]
  },
  properties: {
    testProps: Object
  },
  attached: function(){
    this.setData({
      list: [{
        name: '电视',
        price: this.data.testProps.a
      }, {
        name: '电脑',
        price: this.data.testProps.b.d() // 这里执行外面通过props传进来的function可以正常取到值
      }, {
        name: '手机',
        price: this.data.testProps.c
      }]
    })
  },
})

@Chen-jj Chen-jj self-assigned this Oct 24, 2019
@Chen-jj
Copy link
Contributor

Chen-jj commented Oct 25, 2019

@JasonYan2015 提供一下项目

@Yaphet2015
Copy link
Author

@Chen-jj 需要怎么提供?

@Chen-jj
Copy link
Contributor

Chen-jj commented Oct 25, 2019

Zip包,或者上传到你的github然后提供链接。最好先精简一下代码。

@Yaphet2015
Copy link
Author

@Chen-jj 大概删了一些东西,插件里面的可能东西还比较多,不过你应该主要看调用插件部分的参数以及插件入口的那句log就好。
主要是我上面issue截图的那两句console部分
辛苦了
https://github.com/JasonYan2015/testTaroPlugin.git

@Chen-jj
Copy link
Contributor

Chen-jj commented Nov 14, 2019

@JasonYan2015 不是对象层级问题,以前小程序不支持传函数,setData 前一刻数据中函数会被过滤掉。测试 ok 可以去掉这个限制。

不过你通过 extraProps 传 Class Component,包括 JSX 等,都是不支持的。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants