当前位置：首页 > news >正文

uniapp小程序不支持动态组件问题

news 来源：原创 2025/6/15 5:55:02

背景：开发微信小程序。使用uniapp提供的框架进行开发。在pc端可以使用的component动态组件标签不被支持。HbuilderX中启动微信小程序时报编译错误。
替代方案。在诸多收费的自定义表单中。很少有提供微信小程序端的渲染组件。可能是基于此原因。也有支持的，但仅仅是在web-view页面中使用。
通过if-else判断。暂时能满足要求

<template><view class="dynamic-form"><form><input type="text" value="测试" v-model="a" placeholder="请输入内容" name="testInput" /><view v-for="item in formItems" :key="item.formItemId" class="form-item"><!-- 图片 --><image name="image" v-if="item.type === 'IMAGE'" :src="item.scheme.src" mode="aspectFit"/><!-- 文本描述 --><rich-text v-else-if="item.type === 'DESC_TEXT'" :nodes="item.scheme.content"v-model="formDataVar[item.scheme.vModel]"></rich-text><!-- 多选框 --><view v-else-if="item.type === 'CHECKBOX'"><text>{{ item.label }}</text><checkbox-group :name="item.vModel"><label v-for="(option, index) in item.scheme.config.options" :key="index"><checkbox :value="option.value" /> {{ option.label }}</label></checkbox-group></view><!-- 输入框 --><view v-else-if="item.type === 'INPUT'"><text>{{ item.label }}</text><input :type="item.scheme.config.dataType.type || 'text'" :placeholder="item.placeholder" :name="item.vModel" v-model="formDataVar[item.scheme.vModel]"/></view><!-- 省市联动 --><view v-else-if="item.type === 'PROVINCE_CITY'"><text>{{ item.label }}</text><!-- <picker mode="region" range="{{['北京','上海']}}" @change="handleRegionChange" @columnchange="handleColumnChange"name="provinceCity"><view class="picker">当前选择：{{ region[0] }}，{{ region[1] }}</view></picker> --></view><!-- 日期 --><view v-else-if="item.type === 'DATE'"><text>{{ item.label }}</text><picker mode="date" :range="dateRange" @change="(e) => handleDateChange(item, e)" name="date" ><view class="picker">当前选择：{{ formDataVar[item.scheme.vModel] || '请选择日期' }}</view></picker></view></view><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p><button type="submit" @click="handleSubmit">提交</button><!-- 提交按钮 --><view class="fixed-bottom"></view></form><view></view></view></template><script>
export default {props: {formData: {type: Object,required: true},/** 流程定义ID */processDefId: {type: String,required: true}},data() {return {formItems: this.formData?.formItems || [],region: ['北京市', '北京市'],dateRange: [],selectedDate: '',formDataVar: {},message: ''};},mounted() {console.log('formData2:', this.formData);console.log('formItems2:', this.formItems);// 初始化 formDataVar 数据this.formItems.forEach(item => {if (item.type === 'CHECKBOX') {this.$set(this.formDataVar, item.scheme.vModel, []);} else if (item.type === 'DATE') {this.$set(this.formDataVar, item.scheme.vModel, '');} else {this.$set(this.formDataVar, item.scheme.vModel, '');}});console.log('formDataVar:', this.formDataVar)},methods: {handleSubmit(e) {// console.log('Form submitted e:', this.$refs.rform);// 处理表单提交逻辑// console.log('Form submitted:', e.detail.value);// console.log('formdatavar: ', this.formItems)// console.log('formDataVar:', this.formDataVar);// 调用父组件的 submitFormData 方法this.$emit('submitFormData', this.formDataVar)},handleRegionChange(e) {const regions = ['北京', '上海']; // 示例地区this.region = [regions[e.detail.value[0]], regions[e.detail.value[1]]];},handleColumnChange(e) {// 可以在这里处理列变化},handleDateChange(item,  e) {// const date = new Date(e.detail.value).toLocaleDateString();// this.selectedDate = date;console.log('日期变化:', e.detail.value);const date = new Date(e.detail.value).toLocaleDateString();this.formDataVar[item.scheme.vModel] = date;}}
};
</script><style scoped>
.dynamic-form {padding: 20px;
}.form-item {margin-bottom: 20px;
}.fixed-bottom {position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx;background-color: #fff;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);z-index: 999;}
</style>