uni-app 引入 mycomponents 文件夹下的支付宝自定义组件报错
uni-app 引入 mycomponents 文件夹下的支付宝自定义组件报错
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/小程序/阿里 |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 12.3.1 (21E258) |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.4.6 |
| 第三方开发者工具版本号 | 2.7.11 |
| 基础库版本号 | 3.4.6.20220420 |
| 项目创建方式 | HBuilderX |
# 示例代码：
page.js
``` json
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "",
"navigationBarTextStyle": "white",
"usingComponents": {
"subscribe-msg": "/mycomponents/subcribeMsg/index"
}
}
}对应页面引用 pages/home/home
<subscribe-msg />引用的组件为支付宝自定义空白组件，代码如下 mycomponents/subcribeMsg/index.acss 空 mycomponents/subcribeMsg/index.axml
<view></view>mycomponents/subcribeMsg/index.js
Component({
props: {},
onInit() {},
methods: {}
})mycomponents/subcribeMsg/index.json
{
"component": true
}操作步骤：
只需要调用即可复现
预期结果：
不在报错
实际结果：
一直报错
bug描述：
在调用支付宝自定义组件时候会爆出 CallMethod error Cannot read property ‘split’ of undefined/TypeError: Cannot read property ‘split’ of undefined 这个错，但是不影响组件的使用，引入几个就会爆出几个，调用样式组件也是这样，不传参也不调用方法也会导致出现该错误，使用空白的支付宝组件也可以复现
在 uni-app 中引入支付宝自定义组件时，可能会遇到一些报错。以下是一些常见的问题和解决方法：
1. 组件路径错误
确保你在引入组件时路径是正确的。例如，如果你的 mycomponents 文件夹在项目的根目录下，你应该这样引入：
import MyComponent from '@/mycomponents/MyComponent.vue';2. 组件未注册
确保你在使用组件之前已经正确注册了它。在 script 部分：
export default {
components: {
MyComponent
}
}3. 支付宝小程序特有的问题
支付宝小程序的自定义组件可能与 Vue 组件有所不同。确保你遵循了支付宝小程序的组件规范，尤其是组件的生命周期和事件处理。
4. 组件命名冲突
确保组件的名称没有与其他组件或全局变量冲突。
5. 检查组件的代码
确保组件的代码没有语法错误或其他问题。你可以尝试在支付宝小程序的开发工具中单独运行该组件，看是否有报错。
6. 使用 mp-alipay 配置
如果你是在支付宝小程序中使用自定义组件，确保你在 pages.json 或 manifest.json 中正确配置了 mp-alipay 的相关设置。
7. 检查 uni-app 的版本
确保你使用的 uni-app 版本支持支付宝小程序的特性。如果版本过旧，可能会导致兼容性问题。
8. 查看控制台报错信息
仔细查看控制台的报错信息，通常会提供更详细的错误原因。根据报错信息进行相应的调整。
9. 使用 uni.requireNativePlugin
如果你的自定义组件是原生插件，确保你使用了 uni.requireNativePlugin 来引入。
const myPlugin = uni.requireNativePlugin('myPlugin');10. 检查支付宝小程序的开发文档
支付宝小程序的开发文档中可能有关于自定义组件的特定要求和限制，确保你遵循了这些要求。
示例代码
假设你有一个自定义组件 MyComponent.vue 在 mycomponents 文件夹下：
<template>
<view>
<my-component></my-component>
</view>
</template>
<script>
import MyComponent from '@/mycomponents/MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>