uni-app项目中 component is 使用时 h5生效 小程序中渲染等不支持,下面有解决方法

前言: 由于公司业务调整,特意学习下uni项目框架,其实根据官方api就是实现很多功能,其实都是一些小坑要走,下面来说一下uni-app项目中 component is 使用时 h5生效 小程序中渲染支付宝等不支持,下面有解决方法

查了下官网时这样说的

官网地址 component | uni-app官网

单个是可以使用的 <component :is="'tmp3'"></component>对我们来说没有意义

那么如何解决呢?看代码这是第一种使用<component is

<template>
  <view class="content-list">
    <view
      class="scroll-v list"
      v-for="(item,index) in showHandleList"
      :key="index"
    >
      <component
        v-if="(+item.moduleId === 3) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp3'"
      >
      </component>
      <component
        v-if="(+item.moduleId === 4) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp4'"
      >
      </component>
      <component
        v-if="(+item.moduleId === 5) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp5'"
      >
      </component>
      <component
        v-if="(+item.moduleId === 6) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp6'"
      >
      </component>
    </view>
  </view>
</template>

<script>
import tmp3 from './tmp3.vue'
import tmp6 from './tmp6.vue'
import tmp5 from './tmp5.vue'
import tmp4 from './tmp4.vue'
import { uniOpenUrl } from '@/utils/common'
export default {
  components: {
    tmp3,
    tmp4,
    tmp5,
    tmp6,
  },
  props: {
    toLearnList: {
      type: Array,
      default: () => [],
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
  },
  computed: {
  },
  methods: {
		
	},
}
</script>

<style scoped>

</style>

这是第二种使用 组件引用 原理都是一样,如下:

<template>
	<view class="waterflow-wrap">
		<view class="tabs-change">
				<view v-for="(tab,index) in moduleData" :key="tab.id" :class="tabIndex==index ? 'uni-tab-active' : ''" @click="ontabtapt(index)">
				</view>
			<view v-if="moduleInfoList[0].moduleId==='3'>
				<tmp3 ></tmp3>
			</view>
            <view v-if="moduleInfoList[0].moduleId==='4'>
				<tmp4 ></tmp4>
			</view>
            <view v-if="moduleInfoList[0].moduleId==='5'>
				<tmp5 ></tmp5>
			</view>
        </view>
	</view>
</template>

<script>
import tmp3 from "./tmp3.vue";
import tmp6 from "./tmp6.vue";
import tmp5 from "./tmp5.vue";
import tmp4 from "./tmp4.vue";
export default {
  components: {
    tmp3,
    tmp6,
    tmp5,
    tmp4,
  },
  props: ["userInfo", "moduleData", "chargesNo"],
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>

原创不易,麻烦来个赞哟 biubiubiu...

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: 对于将uni-app小程序转换为Vue H5项目,我们需要考虑以下几个方面来实现: 1. 了解uni-app和Vue H5项目的区别和相似之处。虽然两者都是基于Vue框架开发的,但uni-app是跨多个平台的项目,而Vue H5项目只面向网页端,因此需要根据具体需求来进行修改和适配。 2. 理解uni-app小程序和Vue H5项目的架构和设计模式。首先,需要对uni-app小程序和Vue H5项目的各种组件、路由、状态管理、API使用等有比较深入的理解;其次,需要熟悉uni-app和Vue H5项目的开发规范和常见问题及解决方法。 3. 针对特定项目需求对uni-app小程序进行改造和重构,使其能够适应Vue H5项目的要求。需要注意的是,不同平台的UI适配、页面跳转、数据处理方式等会有所不同,需要进行相应的调整。 4. 组件的适配和重构:需要根据Vue H5项目的实际需求,对uni-app小程序的组件进行适配和重构,以满足开发需求。 总而言之,将uni-app小程序转换为Vue H5项目需要有深入的前端开发经验和技能。需要具备良好的编程习惯、代码规范和团队合作能力,同还需要对Vue和uni-app生态系统有较深入的理解,这样才能确保项目转换的成功和效果。 ### 回答2: Uni-app是近年来流行的一种开发框架,可以支持一次开发,多端发布。其包括小程序、H5、APP、快应用等各种端,这样无需重复编写代码,并且可以满足不同平台的开发需求。因此,从uni-app小程序转Vue H5项目是一个很常见的需求。 首先需要了解uni-app小程序和Vue H5项目的区别和联系。Uni-app小程序是基于Vue语法封装的一种小程序开发框架。Vue H5项目是基于Vue框架开发的一种web应用的项目。它们都是基于Vue语法的,但是在项目的结构、用法、以及项目特性等方面有所不同。 以下是一些步骤可以用在uni-app小程序转Vue H5项目的过程: 1. 将小程序小程序原有组件转换为H5支持的组件。例如,在Vue H5项目,可以使用更多的HTML标签和CSS属性。 2. 根据不同的需求,需要对小程序的路由配置进行调整,以满足Vue H5项目的路由需求。 3. 根据项目需求进行逻辑层的代码调整。例如,H5需要针对不同的浏览器适配,需要进行不同的代码调整。 4. 将小程序的数据存储方式和H5的存储方式进行比对,进行适当的代码转换。 5. 在Vue H5项目,可以使用许多Vue插件和库扩展项目的功能。因此需要根据项目需要选择相应的插件和库进行集成。 6. 在开发Vue H5项目过程,需要注重H5项目页面的美观与交互性。因此,需要重新设计和开发H5项目所需要的页面,以更好地适配PC平台的浏览器。 总之,将uni-app小程序转Vue H5项目的过程,需要进行许多的代码调整和UI设计。需要针对不同的项目需求进行适当的操作,在转换的过程注意一些注意项,确保项目可以正常运行。通过这种方式,可以将uni-app小程序开发的代码实现在更多的平台实现。 ### 回答3: uni-app 是一个利用Vue.js技术构建的一体化开发框架,其允许开发者使用Vue.js语法编写一次代码,即可发布到多个端(微信小程序/App/安卓/H5等),实现一次开发,多端运营,大大节省了开发者的间和成本。而vue h5则是在web端开发使用Vue框架,专门用于手机端适配的项目,在使用上类似于uni-app。 将uni-app小程序转换为vue h5项目,需要经过以下几个步骤: 1. 确认需要转换的项目内容:需要先明确需要转换的小程序页面或组件,以及对应的样式和功能。在转换过程,需要开发者将原有小程序组件和API替换成vue组件和API,同也需要对样式进行适配。 2. 安装vue-cli:在转化uni-app小程序之前,首先需要确认电脑已经安装好vue-cli。Vue CLI是官方提供的一个基于webpack的标准脚手架工具,开发者可以使用这个工具进行脚手架搭建和项目管理。 3. 创建vue h5项目:在安装vue-cli之后,可以通过命令行工具创建vue h5项目。通过创建项目之后,开发者可以在其添加需要转换的uni-app小程序内容。 4. 转换小程序内容:对于需要转换的小程序页面和组件,需要开发者根据vue h5开发需要,将其小程序组件和API进行替换,同将样式进行适配。在转化完成后,需要对代码进行调试和优化,确保项目能够正常运行。 在转换uni-app小程序为vue h5项目,需要开发者具备一定的Vue.js框架开发经验,了解小程序和H5端的开发差异,进行差异化操作和代码调试。在转换项目,开发者可以使用已有的组件库和API,降低开发成本,提高开发效率。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值