uniapp实现远程组件动态加载功能

uniapp实现远程组件加载

前言

在复杂的应用开发中,远程组件加载是一个非常实用的功能。它可以帮助我们实现应用的动态更新、按需加载,从而提升应用性能和用户体验。本文将详细介绍如何在UniApp中实现远程组件的动态加载。

实现原理

远程组件加载的核心原理是通过动态执行远程JavaScript代码来创建组件。主要步骤包括:

1. 从远程服务器获取组件代码
2. 解析组件代码并创建组件实例
3. 将组件挂载到指定位置
   

1. 创建远程组件包装器

// components/remote-loader.vue
<template>
  <view class="remote-component">
    <component 
      v-if="dynamicComponent" 
      :is="dynamicComponent" 
      v-bind="componentProps"
      @click="handleClick"
      @custom-click="handleCustomClick"
    />
    <view v-else-if="loading">加载中...</view>
    <view v-else-if="error">{{ error }}</view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { h, defineComponent, markRaw } from 'vue' // 导入 markRaw

const props = defineProps({
  componentUrl: String,
  componentProps: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['click', 'custom-click'])

const dynamicComponent = ref(null)
const loading = ref(false)
const error = ref(null)

const handleClick = (event) => {
  emit('click', event)
}

const handleCustomClick = (data) => {
  emit('custom-click', data)
}

async function fetchComponent(url) {
  const response = await uni.request({
    url: url,
    method: 'GET'
  })
  return response.data
}

function parseComponent(code) {
  try {
    code = code.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '')
    
    const evalCode = `
      var exports = {};
      var module = { exports: {} };
      ${code};
      return module.exports;
    `
    
    const fn = new Function('require', 'h', evalCode)
    return fn(null, h)
  } catch (err) {
    console.error('Parse error:', err)
    throw new Error('组件解析失败: ' + err.message)
  }
}

async function loadComponent() {
  if (!props.componentUrl) return
  
  loading.value = true
  error.value = null
  
  try {
    const code = await fetchComponent(props.componentUrl)
    const componentDef = parseComponent(code)
    
    // 使用 markRaw 包装组件定义
    dynamicComponent.value = mark...

点击查看剩余70%