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

  • 背景:开发微信小程序。使用uniapp提供的框架进行开发。在pc端可以使用的component 动态组件标签不被支持。HbuilderX中启动微信小程序时报编译错误。
  • 替代方案。在诸多收费的自定义表单中。很少有提供微信小程序端的渲染组件。可能是基于此原因。也有支持的,但仅仅是在web-view页面中使用。
  • 通过if-else判断。暂时能满足要求
js 复制代码
<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>
相关推荐
2501_915918417 小时前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者87 小时前
iOS 上架 uni-app 流程全解析,从打包到发布的完整实践
android·ios·小程序·https·uni-app·iphone·webview
说私域8 小时前
“互联网 +”时代商业生态变革:以开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序为例
人工智能·小程序·开源
低代码布道师14 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
软工的小白16 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
程序员陆通17 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发18 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩18 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师18 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_9160088918 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview