uni-app

uni-app copied to clipboard

问题描述 [问题描述：尽可能简洁清晰地把问题描述清楚]

引入最新的vant组件，编译运行报错。

https://github.com/youzan/vant-weapp

复现步骤 [复现问题的步骤]

1. 下载 https://github.com/youzan/vant-weapp 的 dist 文件（2021年08月11日 11：25）

2. 放入 wxcomponents

3. 引入 "van-field": "/wxcomponents/vant/field/index"

4. 使用 van-field

<van-field v-model="value" placeholder="请输入用户名"></van-field>

5. yarn run dev:h5

6. 到对应页面看到控制台报错

chunk-vendors.js:29671 [Vue warn]: Unknown custom element: <include> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VanField> at wxcomponents/vant/field/index.vue
       at pages/login/index.vue

[或者可以直接贴源代码]

预期结果 [使用简洁清晰的语言描述你希望生效的预期结果] 正常使用组件

实际结果 [这里请贴上你的报错截图或文字]

chunk-vendors.js:29671 [Vue warn]: Unknown custom element: <include> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VanField> at wxcomponents/vant/field/index.vue
       at pages/login/index.vue

系统信息:

• 发行平台: H5平台
• 操作系统: chrome
• HBuilderX版本：无
• uni-app版本： uni-app v3.1.22 uni-app cli v2.0.0-31920210709003
• 设备信息：MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)

补充信息 [可选] [根据你的分析，出现这个问题的原因可能在哪里？]

uni-app 编译wx文件生成vue文件时，没有兼容微信的 include 组件

以前 vant 用的 是 textarea 的，现在改用 include 了

7个月前的版本 这里造出来的vue是

wxcomponents 内部使用暂时支持有限，后续会优化。

请问上面的问题解决了吗？

可以考虑在非微信小程序端端条件编译全局注册自定义组件,根据src传入的类型替换成不同的元素

// main.js
// #ifndef MP-WEIXIN
Vue.component('include', include)
// #endif

// include.vue
<template>
	<textarea v-if="!isInput"></textarea>
	<input v-else/>
</template>

<script>
	export default {
		props: {
			src: String
		},
		data() {
			let isInput = /input/.test(this.src)
			return {
				isInput
			}
		}
	}
</script>