一、背景
由于公司有一个业务需求:是要小程序中动态加载卡片内容。由于卡片内容经常变化,并且样式布局也可能改动较大。还有一种情况是卡片内容也可能由服务商提供,代码内容无法把控。出于此背景,我们调研了可能的解决方案,感觉都不能满足现状要求:
方案一: iframe 方案:由于代码运行在小程序端,iframe 方案无法满足性能要求,并且如果卡片比较多,附加众多 iframe 也不是那么一回事,
方案二: 微前端方案:由于卡片内容比较小,一般第三方也不会为此特意部署一台服务器,而且要考虑加载资源跨域问题。
方案三:提供源码方案:由于卡片内容经常变化,每次随着他们变动而变更也不是那回事。
终极方案,加载远程组件。服务商只要将自己的代码打包成 umd 格式,然后存放在远程可访问的地址上就行,比如 S3、OSS 等。当他们需求变动时,只需求重新打包上传就 OK 了,基座也不用随着他们一起发版变更。
二、优势
资源高效
灵活便捷
一次部署,N 次受益
三、使用场景
快速演示组件特性
卡片组件,自由定义
协同开发,自由组合
嵌入开发,业务附属
广告投放,引流
四、如何使用
0. 前提
远程组件必须使用 umd 格式
远程地址
必须可以跨域访问
1. 查看 DEMO
1.1 react-demo,加载 Antd5 按钮组件示例,。
效果图:
-
import React from "react"; import ReactDOM from "react-dom"; import dayjs from "dayjs"; import LoadRemoteComponent from "./components/LoadRemoteComponent"; <LoadRemoteComponent urls={["https://cdnjs.cloudflare.com/ajax/libs/antd/5.16.2/antd.min.js"]} name="antd.Button" options={{ props: { type: "primary", loading: true, }, externals: { react: { import: React, export: "React", }, "react-dom": { import: ReactDOM, export: "ReactDOM", }, dayjs: { import: dayjs, export: "dayjs", }, }, }} > 按钮文字 </LoadRemoteComponent>;
1.2 vue-demo,加载 element-plus 按钮组件示例,。
效果图:
-
<template> <LoadRemoteComponent :urls="urls" name="ElementPlus.ElButton" :options="options" > 按钮文字 </LoadRemoteComponent> </template> <script setup lang="ts"> import { ref, onMounted } from "vue"; import LoadRemoteComponent from "./components/LoadRemoteComponent/Index.vue"; const urls = ref([ "https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.7.0/index.full.min.js", "https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.7.0/index.min.css", ]); const options = ref({ props: { type: "primary", loading: true, }, externals: { vue: { import: "", export: "Vue", }, }, }); onMounted(() => { import("vue").then((vue) => { options.value.externals["vue"].import = vue; }); }); </script>
2. 属性解释
urls: 加载的远程资源地址数组;
name: 导出的组件名称;
options
- props: 导出的远程组件的属性;
- externals: 远程组件的依赖库;
五、源码
点击访问 GitHub:,👏🏻👏🏻👏🏻 欢迎 Star,欢迎批评指正。