企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] # Component is not found in path "xxxxx" ```js jsEnginScriptError Component is not found in path "components/Toast/index" (using by "components/loginModal/index");onAppRoute Error: Component is not found in path "components/Toast/index" (using by "components/loginModal/index") ``` 我们需要知道, 微信的组件**必有组件构造函数:** ``` Component({ }) ``` Taro 组件生成的代码需要如下,才算正常: ``` Component(require('../../npm/@tarojs/taro-weapp/index.js').default.createComponent(TInfo)); ``` # API 兼容性方案 | API | 兼容性 | 说明 |思路 | | --- | --- |--- |--- | | `Taro.getApp()` | h5 未实现 API | - | - | # 样式兼容 在编译时,Taro 会帮你对样式做尺寸转换操作,但是如果是在 JS 中书写了行内样式,那么编译时就无法做替换了,针对这种情况,Taro 提供了 API `Taro.pxTransform` 来做运行时的尺寸转换。 ~~~jsx Taro.pxTransform(10) // 小程序:rpx,H5:rem ~~~ 建议使用 Taro 时,设计稿以 iPhone 6 `750px` 作为设计尺寸标准。 [设计稿及尺寸单位](https://nervjs.github.io/taro/docs/size.html#文件) ## class 样式转换 [支持替换 jsx 中的属性](https://github.com/NervJS/taro/issues/2077) ~~~ jsxAttributeNameReplace: { customClass: 'custom-class', customTitleClass: 'custom-title-class', } ~~~ [https://nervjs.github.io/taro/docs/size.html](https://nervjs.github.io/taro/docs/size.html) ## 事件触发 ### 属性名必须以 `on` 开头 props 传函数,在小程序中是通过*组件事件*来实现的,在子组件中调用时无法获取到函数执行的返回值,同时给子组件传递函数时,属性名必须以`on`开头 ``` // 外部的组件上的`onChange`事件,会被编译成 `bindonchange` this.$scope.triggerEvent('onchange', { index: index }); ``` 解决办法: 自定义父组件(`\src\common\component.js`),所有自定义子组件都必须继承该组件。 ### 必须明确的使用 `stopPropagation` 在 Taro 中另一个不同是你不能使用`catchEvent`的方式阻止事件冒泡。你必须明确的使用`stopPropagation`。例如,阻止事件冒泡你可以这样写: ```jsx class Toggle extends Component { constructor (props) { super(props) this.state = {isToggleOn: true} } onClick = (e) => { e.stopPropagation() this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })) } render () { return ( <button onClick={this.onClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ) } } ``` ## 组件关系 relations 当两个自定义组件之间有着**嵌套关系**的时候,可以在两个组件之内定义[relations](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html),从而直接访问对方组件的实例。**必须在两个组件中都定义 relations,否则不会生效** ## 自定义组件的 behaviors? [【bug】定义了behaviors,但是没有执行呢](https://github.com/NervJS/taro/issues/656) beta.8 版本组件已支持 behaviors 配置:`static behaviors = []` `注意`:也就是只能按照 小程序本身设置 `behaviors` 方式设置,不支持 `Taro` 生命周期。 ```js function bindBehaviors (weappComponentConf, ComponentClass) { if (ComponentClass.behaviors) { weappComponentConf.behaviors = ComponentClass.behaviors } } // 代码出处为:`taro/packages/taro-weapp/src/create-component.js` ``` 1. 不支持 relations 和 [Behavior ](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) [Taro 不支持 relations 和 Behavior ](https://nervjs.github.io/taro/docs/taroize.html#%E4%B8%8D%E6%94%AF%E6%8C%81-relations-%E5%92%8C-behavior) [微信小程序 发现之旅(三)—— 组件之间的参数传递](https://www.cnblogs.com/wisewrong/p/9110687.html) 2. [试用React语法的多端框架Taro问题汇总](https://juejin.im/post/5b8ca6236fb9a01a1b20162e)