尧图网页设计 
画布应用中的 Power Apps 代码组件PCF实战从环境启用、安全校验到组件导入与更新【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilotPower Apps 组件框架PCF让专业开发者能够在画布应用中嵌入自研的代码组件让制作者像使用内置控件一样拖拽复用高级交互能力。本篇指南以仓库内 pcf-canvas-apps.instructions.md 为核心骨架结合同仓库的 PCF 系列文档与源码佐证系统讲解在画布应用中使用代码组件的完整路径前置条件与工具链、功能启用、安全审查、组件实现、导入、属性、限制、更新与删除。读完后你将掌握一套可直接落地的画布应用代码组件集成方案。代码组件与画布应用概念与定位Power Apps 组件框架赋能专业开发者和制作者共同为模型驱动应用与画布应用创建代码组件用于增强用户在表单、视图、仪表板以及画布屏幕中处理数据时的体验参见 pcf-overview.instructions.md。典型场景包括把表单中显示数字文本值的列替换为dial刻度盘或slider滑块代码组件把一个数据集列表转化为完全不同的可视化体验例如Calendar日历或Map地图组件。与 HTML Web 资源不同代码组件与宿主应用运行在同一上下文中与其他组件同时加载能为用户提供无缝体验代码组件可以跨表格、跨表单复用并把 HTML、CSS、TypeScript 等全部文件打包进单个解决方案包便于跨环境迁移甚至可通过 AppSource 分发。需要特别强调的是原文档开篇即提示某些 API 在画布应用中可能不可用建议在开发前逐一检查所用 API 在目标平台上的可用性。这一约束贯穿画布应用开发的全过程后文第 9 节会展开说明。前置条件与工具链准备在向画布应用添加代码组件之前需要满足以下条件原文档 Prerequisites 一节Power Apps 许可添加代码组件需要 Power Apps 许可。从许可角度详见 pcf-overview.instructions.md若代码组件通过浏览器客户端直接连接外部服务或数据不经过连接器则视为 premium 组件所在应用升级为 premium终端用户需要 Power Apps 许可若组件不连接外部服务应用保持 standard终端用户只需最低 Office 365 许可。在 manifest 中通过external-service-usage enabledtrue显式声明外部服务使用。系统管理员权限需要在环境中启用 Power Apps 组件框架功能启用操作要求系统管理员权限。代码组件的创建、调试与部署依赖Microsoft Power Platform CLIpac参见 pcf-tooling.instructions.md。使用 CLI 部署代码组件时必须拥有具备系统管理员或系统定制员权限的 Microsoft Dataverse 环境。本仓库还提供了开箱即用的工具包pcf-development 插件定位为使用 Power Apps 组件框架为模型驱动应用和画布应用开发自定义代码组件的完整工具包可通过copilot plugin install pcf-developmentawesome-copilot安装其 plugin.json 声明了power-apps、pcf、component-framework、typescript、power-platform等关键字是 Copilot 场景下开发 PCF 的现成入口。启用 Power Apps 组件框架功能默认情况下Power Apps 组件框架功能对模型驱动应用是启用的要在画布应用中使用代码组件必须在每个目标环境中单独开启该功能。原文档给出的操作步骤如下登录 Power Apps选择设置然后选择管理中心在左侧窗格选择环境选中要启用功能的环境再选择设置展开产品选择功能在可用功能列表中打开适用于画布应用的 Power Apps 组件框架然后选择保存。说明原文档此处配有界面截图设置入口、环境列表、功能开关本文不重复插图实操时请以上述文字步骤为准定位对应入口。安全注意事项Studio 中渲染代码组件的风险在画布应用中引入代码组件前必须理解其安全模型原文档 Security Considerations 一节的警告内容代码组件包含可能并非由 Microsoft 生成的代码在 Power Apps Studio 中渲染时可能访问安全令牌和数据。向画布应用添加代码组件时请确保代码组件解决方案来自可信来源。此漏洞在播放画布应用时不存在。也就是说风险集中在Power Apps Studio 设计时环境当你在 Studio 中打开包含代码组件的画布应用时会出现潜在不安全代码的警告提示。设计时环境中的代码组件拥有访问安全令牌的能力因此只应打开来自可信来源的组件。最佳实践原文档明确列出管理员和系统定制员在将代码组件导入环境之前应审查并验证所有代码组件只有在验证之后才将组件开放给制作者使用当使用非托管解决方案导入代码组件或使用pac pcf push安装代码组件时发布者会显示为Default默认发布者——这是识别未经验证组件的信号之一需要格外留意。实现代码组件manifest 与工程结构启用功能后即可开始实现代码组件逻辑原文档 Implementing Code Components 一节。推荐在动手前先查看组件在画布应用中的限制避免返工。一个 PCF 组件工程的元数据核心是 manifest 文件ControlManifest.Input.xml完整元素参考见 pcf-manifest-schema.instructions.md它定义了组件本身、属性、资源与平台能力声明。与画布应用集成密切相关的关键元素包括control定义组件本体namespace、constructor、version语义化版本如1.0.0、display-name-key、description-key等。其中version是组件更新机制的关键见第 11 节property声明输入/输出属性of-type决定数据类型如SingleLine.Text、Whole.None、TwoOptions、DateAndTime.DateOnlyusage取bound或inputrequired控制是否必填resources声明实现文件codeTypeScript/JavaScript 路径与加载顺序、css、img、resx本地化资源feature-usage/uses-feature声明组件用到的平台能力如Device.captureImage、Device.getCurrentPosition、Utility.lookupObjects、WebAPI并按需标记requiredexternal-service-usage声明外部服务使用enabledtrue时组件被视为 premium 组件联动第 2 节许可规则。一个典型的 manifest 结构示例节选自 pcf-manifest-schema.instructions.md 的完整示例?xml version1.0 encodingutf-8 ? manifest control namespaceSampleNamespace constructorSampleControl version1.0.0 display-name-keySample_Display_Key description-keySample_Desc_Key control-typestandard property namesampleProperty display-name-keyProperty_Display_Key description-keyProperty_Desc_Key of-typeSingleLine.Text usagebound requiredtrue / resources code pathindex.ts order1 / css pathcss/SampleControl.css order1 / img pathimg/icon.png / resx pathstrings/SampleControl.1033.resx version1.0.0 / /resources feature-usage uses-feature nameWebAPI requiredtrue / uses-feature nameDevice.captureImage requiredfalse / /feature-usage /control /manifestmanifest 会在构建过程中被校验缺少必需元素会导致构建错误非法属性值会被标记并可使用pac pcf命令验证 manifest 结构。原文档同时给出若干最佳实践对version使用语义化版本一律使用资源键而非硬编码字符串只声明真正用到的特性尽量选择最精确的数据类型CSS 必须作用域化以免污染宿主应用样式等。向画布应用添加代码组件原文档给出了在 Power Apps Studio 中完成添加的完整操作路径进入 Power Apps Studio新建画布应用或编辑已有的画布应用重要在继续下一步之前请确保包含代码组件的解决方案 .zip 文件已经导入Microsoft Dataverse。在左侧窗格选择添加 ()然后选择获取更多组件选择代码选项卡从列表中选择一个组件然后选择导入在左侧窗格选择展开代码组件然后选择要添加到应用中的组件。注意也可以通过插入 自定义 导入组件添加组件但该选项将在未来版本中移除建议使用上述流程。其中第 2 步要求解决方案 .zip 已导入 Dataverse这与组件的打包发布流程衔接。仓库中的 pcf-sample-components.instructions.md 给出了从源码到可导入 zip 的完整命令链可作为画布应用场景的落地方案# 在组件目录安装依赖以 IncrementControl 为例 npm install msbuild /t:restore # 创建并初始化解决方案 mkdir IncrementControlSolution cd IncrementControlSolution pac solution init --publisher-name powerapps_samples --publisher-prefix sample # 引用组件工程指向包含 .pcfproj 的目录 pac solution add-reference --path ../../IncrementControl # 构建出可导入的解决方案 zip msbuild /t:restore msbuild /t:rebuild /restore /p:ConfigurationRelease msbuild生成的解决方案 zip 位于解决方案目录的bin\debug下可通过 make.powerapps.com 手动导入或用pac命令连接环境后部署。PowerApps-Samples 仓库中提供了 CanvasGridControl、FacepileReactControl、IncrementControl、MapControl 等大量示例组件适合作为画布应用场景的学习起点。组件属性Properties 标签页与 manifest 版本把组件添加到画布应用后在属性标签页中可以看到代码组件声明的属性原文档 Component Properties 一节。代码组件的属性会随 manifest 中property元素的声明呈现在设计器面板中。原文档特别指出现有代码组件可以通过更新 manifest 版本来重新导入如果希望属性出现在默认的属性标签页就应这样做在此之前属性会继续出现在高级属性标签页中。因此manifest 的version字段不仅服务于运行时更新第 11 节也直接决定设计器面板中属性的呈现位置。画布应用中的 API 可用性与限制原文档强调某些 API 在画布应用中可能不可用建议逐一检查。结合 pcf-api-reference.instructions.md 与 pcf-limitations.instructions.md画布应用场景下需要重点掌握以下约束关键限制原文档及配套文档明确列出Dataverse 依赖 API含 WebAPI在画布应用中不可用Microsoft Dataverse 依赖的 API包括 WebAPI目前不适用于画布应用。这也是 pcf-best-practices.instructions.md 中开发跨宿主组件时务必检查 API 可用性例如context.webAPI在画布应用中不可用的底层原因外部库要么打包、要么使用平台库代码组件应使用 React 控件与平台库或将包括外部库内容在内的所有代码打包进主代码包可通过 Power Apps CLI 完成打包manifest 中通过库节点跨组件共享库目前尚不受支持不要使用 HTML Web 存储对象window.localStorage与window.sessionStorage的数据存储在用户浏览器或移动客户端本地既不安全也无法保证可靠可用应避免使用画布应用不支持自定义认证应改用连接器获取数据和执行操作。API 可用性概览据 pcf-api-reference.instructions.md 的可用性对照表画布应用列Client、Column、ConditionExpression、Context、DataSet、Device、Entity、Events、Factory、Filtering、Formatting、ImageObject、Linking、Mode、Navigation、NumberFormattingInfo、Paging、Popup、PopupService、PropertyHelper、Resources、SortStatus、StandardControl、UserSettings、Utility、WebApi均列示为画布应用可用AttributeMetadata列元数据为模型驱动应用独有。需要再次强调的是API 参考中的可用性标记并不等于无差别可用——Dataverse 依赖 APIWebAPI这一项以限制文档的明确表述为准任何组件上线前都应在目标画布应用环境中实测验证。画布应用场景的编码最佳实践针对画布应用宿主pcf-best-practices.instructions.md 给出了专门的实践建议可直接落到组件实现中最小化单屏组件数量每向画布应用添加一个组件都会占用渲染时间组件越多渲染越慢。目前每个代码组件会捆绑自己的共享库副本如 Fluent UI、React同一库在单个组件内不会重复加载但多个不同组件会导致浏览器加载多份库的捆绑版本因此应使用开发者性能工具仔细测量允许制作者自定义组件样式画布应用制作者希望组件风格与整个应用一致。应通过输入属性暴露颜色、尺寸等主题化配置项使用 Microsoft Fluent UI 时把这些属性映射到库提供的主题元素上遵循画布应用性能最佳实践在加入代码组件前先确保应用本身满足性能建议应用内与解决方案检查器均提供此类检查生命周期纪律init方法中请求网络资源如元数据不要等到updateView若请求未返回时updateView被调用组件必须处理该状态并展示加载指示destroy方法中关闭 WebSocket、移除容器外的监听器React 场景调用ReactDOM.unmountComponentAtNode谨慎处理空值与事件频率updateView在数据未就绪时可能收到 null 值组件要预期后续updateView周期携带更新后的数据不要在按键、鼠标移动等高频事件中每次调用notifyOutputChanged应改用失焦或手势结束等时机。更新与删除代码组件更新组件原文档 Update Existing Code Components 一节只要更新了代码组件并希望在运行时看到变化就需要修改 manifest 文件中的version属性。原文档建议每次做出修改时都更新组件版本。同时要注意现有代码组件只在应用于 Power Apps Studio 中关闭并重新打开时才会更新重新打开应用时应用会提示你更新代码组件单纯把组件从应用中删除再重新添加不会触发更新需要先在更新的解决方案中发布所有自定义项否则对代码组件的修改不会生效。这与第 6 节 manifest 中control元素的version属性一一对应——版本号既是组件的身份标识也是运行时刷新与设计器属性面板刷新的触发条件。删除组件原文档 Delete a Code Component from a Canvas App 一节打开添加了代码组件的应用在左侧窗格选择树视图然后选择添加了代码组件的屏幕在组件旁边选择更多 (...)然后选择删除保存应用以查看更改。继续深入仓库内的相关资源本仓库围绕 Power Apps 组件框架提供了完整的指令集与工具包可作为画布应用集成的延伸阅读pcf-canvas-apps.instructions.md画布应用代码组件集成指南本文核心来源pcf-overview.instructions.md组件框架总览、能力、许可与限制pcf-manifest-schema.instructions.mdmanifest 完整元素参考与校验规则pcf-api-reference.instructions.mdAPI 接口清单与平台可用性对照pcf-limitations.instructions.md画布应用场景下的四大限制pcf-best-practices.instructions.md含画布应用专节的开发最佳实践pcf-tooling.instructions.mdPower Platform CLI 工具链说明pcf-sample-components.instructions.md示例组件从源码到解决方案 zip 的完整构建流程pcf-development本仓库提供的 PCF 开发插件可直接安装到 Copilot 环境使用。把环境启用、安全校验、实现与导入、限制规避、更新删除这五条主线串起来就能在画布应用中稳定、安全地落地代码组件能力。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 画布应用中的 Power Apps 代码组件（PCF）实战：从环境启用、安全校验到组件导入与更新
画布应用中的 Power Apps 代码组件PCF实战从环境启用、安全校验到组件导入与更新【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilotPower Apps 组件框架PCF让专业开发者能够在画布应用中嵌入自研的代码组件让制作者像使用内置控件一样拖拽复用高级交互能力。本篇指南以仓库内 pcf-canvas-apps.instructions.md 为核心骨架结合同仓库的 PCF 系列文档与源码佐证系统讲解在画布应用中使用代码组件的完整路径前置条件与工具链、功能启用、安全审查、组件实现、导入、属性、限制、更新与删除。读完后你将掌握一套可直接落地的画布应用代码组件集成方案。代码组件与画布应用概念与定位Power Apps 组件框架赋能专业开发者和制作者共同为模型驱动应用与画布应用创建代码组件用于增强用户在表单、视图、仪表板以及画布屏幕中处理数据时的体验参见 pcf-overview.instructions.md。典型场景包括把表单中显示数字文本值的列替换为dial刻度盘或slider滑块代码组件把一个数据集列表转化为完全不同的可视化体验例如Calendar日历或Map地图组件。与 HTML Web 资源不同代码组件与宿主应用运行在同一上下文中与其他组件同时加载能为用户提供无缝体验代码组件可以跨表格、跨表单复用并把 HTML、CSS、TypeScript 等全部文件打包进单个解决方案包便于跨环境迁移甚至可通过 AppSource 分发。需要特别强调的是原文档开篇即提示某些 API 在画布应用中可能不可用建议在开发前逐一检查所用 API 在目标平台上的可用性。这一约束贯穿画布应用开发的全过程后文第 9 节会展开说明。前置条件与工具链准备在向画布应用添加代码组件之前需要满足以下条件原文档 Prerequisites 一节Power Apps 许可添加代码组件需要 Power Apps 许可。从许可角度详见 pcf-overview.instructions.md若代码组件通过浏览器客户端直接连接外部服务或数据不经过连接器则视为 premium 组件所在应用升级为 premium终端用户需要 Power Apps 许可若组件不连接外部服务应用保持 standard终端用户只需最低 Office 365 许可。在 manifest 中通过external-service-usage enabledtrue显式声明外部服务使用。系统管理员权限需要在环境中启用 Power Apps 组件框架功能启用操作要求系统管理员权限。代码组件的创建、调试与部署依赖Microsoft Power Platform CLIpac参见 pcf-tooling.instructions.md。使用 CLI 部署代码组件时必须拥有具备系统管理员或系统定制员权限的 Microsoft Dataverse 环境。本仓库还提供了开箱即用的工具包pcf-development 插件定位为使用 Power Apps 组件框架为模型驱动应用和画布应用开发自定义代码组件的完整工具包可通过copilot plugin install pcf-developmentawesome-copilot安装其 plugin.json 声明了power-apps、pcf、component-framework、typescript、power-platform等关键字是 Copilot 场景下开发 PCF 的现成入口。启用 Power Apps 组件框架功能默认情况下Power Apps 组件框架功能对模型驱动应用是启用的要在画布应用中使用代码组件必须在每个目标环境中单独开启该功能。原文档给出的操作步骤如下登录 Power Apps选择设置然后选择管理中心在左侧窗格选择环境选中要启用功能的环境再选择设置展开产品选择功能在可用功能列表中打开适用于画布应用的 Power Apps 组件框架然后选择保存。说明原文档此处配有界面截图设置入口、环境列表、功能开关本文不重复插图实操时请以上述文字步骤为准定位对应入口。安全注意事项Studio 中渲染代码组件的风险在画布应用中引入代码组件前必须理解其安全模型原文档 Security Considerations 一节的警告内容代码组件包含可能并非由 Microsoft 生成的代码在 Power Apps Studio 中渲染时可能访问安全令牌和数据。向画布应用添加代码组件时请确保代码组件解决方案来自可信来源。此漏洞在播放画布应用时不存在。也就是说风险集中在Power Apps Studio 设计时环境当你在 Studio 中打开包含代码组件的画布应用时会出现潜在不安全代码的警告提示。设计时环境中的代码组件拥有访问安全令牌的能力因此只应打开来自可信来源的组件。最佳实践原文档明确列出管理员和系统定制员在将代码组件导入环境之前应审查并验证所有代码组件只有在验证之后才将组件开放给制作者使用当使用非托管解决方案导入代码组件或使用pac pcf push安装代码组件时发布者会显示为Default默认发布者——这是识别未经验证组件的信号之一需要格外留意。实现代码组件manifest 与工程结构启用功能后即可开始实现代码组件逻辑原文档 Implementing Code Components 一节。推荐在动手前先查看组件在画布应用中的限制避免返工。一个 PCF 组件工程的元数据核心是 manifest 文件ControlManifest.Input.xml完整元素参考见 pcf-manifest-schema.instructions.md它定义了组件本身、属性、资源与平台能力声明。与画布应用集成密切相关的关键元素包括control定义组件本体namespace、constructor、version语义化版本如1.0.0、display-name-key、description-key等。其中version是组件更新机制的关键见第 11 节property声明输入/输出属性of-type决定数据类型如SingleLine.Text、Whole.None、TwoOptions、DateAndTime.DateOnlyusage取bound或inputrequired控制是否必填resources声明实现文件codeTypeScript/JavaScript 路径与加载顺序、css、img、resx本地化资源feature-usage/uses-feature声明组件用到的平台能力如Device.captureImage、Device.getCurrentPosition、Utility.lookupObjects、WebAPI并按需标记requiredexternal-service-usage声明外部服务使用enabledtrue时组件被视为 premium 组件联动第 2 节许可规则。一个典型的 manifest 结构示例节选自 pcf-manifest-schema.instructions.md 的完整示例?xml version1.0 encodingutf-8 ? manifest control namespaceSampleNamespace constructorSampleControl version1.0.0 display-name-keySample_Display_Key description-keySample_Desc_Key control-typestandard property namesampleProperty display-name-keyProperty_Display_Key description-keyProperty_Desc_Key of-typeSingleLine.Text usagebound requiredtrue / resources code pathindex.ts order1 / css pathcss/SampleControl.css order1 / img pathimg/icon.png / resx pathstrings/SampleControl.1033.resx version1.0.0 / /resources feature-usage uses-feature nameWebAPI requiredtrue / uses-feature nameDevice.captureImage requiredfalse / /feature-usage /control /manifestmanifest 会在构建过程中被校验缺少必需元素会导致构建错误非法属性值会被标记并可使用pac pcf命令验证 manifest 结构。原文档同时给出若干最佳实践对version使用语义化版本一律使用资源键而非硬编码字符串只声明真正用到的特性尽量选择最精确的数据类型CSS 必须作用域化以免污染宿主应用样式等。向画布应用添加代码组件原文档给出了在 Power Apps Studio 中完成添加的完整操作路径进入 Power Apps Studio新建画布应用或编辑已有的画布应用重要在继续下一步之前请确保包含代码组件的解决方案 .zip 文件已经导入Microsoft Dataverse。在左侧窗格选择添加 ()然后选择获取更多组件选择代码选项卡从列表中选择一个组件然后选择导入在左侧窗格选择展开代码组件然后选择要添加到应用中的组件。注意也可以通过插入 自定义 导入组件添加组件但该选项将在未来版本中移除建议使用上述流程。其中第 2 步要求解决方案 .zip 已导入 Dataverse这与组件的打包发布流程衔接。仓库中的 pcf-sample-components.instructions.md 给出了从源码到可导入 zip 的完整命令链可作为画布应用场景的落地方案# 在组件目录安装依赖以 IncrementControl 为例 npm install msbuild /t:restore # 创建并初始化解决方案 mkdir IncrementControlSolution cd IncrementControlSolution pac solution init --publisher-name powerapps_samples --publisher-prefix sample # 引用组件工程指向包含 .pcfproj 的目录 pac solution add-reference --path ../../IncrementControl # 构建出可导入的解决方案 zip msbuild /t:restore msbuild /t:rebuild /restore /p:ConfigurationRelease msbuild生成的解决方案 zip 位于解决方案目录的bin\debug下可通过 make.powerapps.com 手动导入或用pac命令连接环境后部署。PowerApps-Samples 仓库中提供了 CanvasGridControl、FacepileReactControl、IncrementControl、MapControl 等大量示例组件适合作为画布应用场景的学习起点。组件属性Properties 标签页与 manifest 版本把组件添加到画布应用后在属性标签页中可以看到代码组件声明的属性原文档 Component Properties 一节。代码组件的属性会随 manifest 中property元素的声明呈现在设计器面板中。原文档特别指出现有代码组件可以通过更新 manifest 版本来重新导入如果希望属性出现在默认的属性标签页就应这样做在此之前属性会继续出现在高级属性标签页中。因此manifest 的version字段不仅服务于运行时更新第 11 节也直接决定设计器面板中属性的呈现位置。画布应用中的 API 可用性与限制原文档强调某些 API 在画布应用中可能不可用建议逐一检查。结合 pcf-api-reference.instructions.md 与 pcf-limitations.instructions.md画布应用场景下需要重点掌握以下约束关键限制原文档及配套文档明确列出Dataverse 依赖 API含 WebAPI在画布应用中不可用Microsoft Dataverse 依赖的 API包括 WebAPI目前不适用于画布应用。这也是 pcf-best-practices.instructions.md 中开发跨宿主组件时务必检查 API 可用性例如context.webAPI在画布应用中不可用的底层原因外部库要么打包、要么使用平台库代码组件应使用 React 控件与平台库或将包括外部库内容在内的所有代码打包进主代码包可通过 Power Apps CLI 完成打包manifest 中通过库节点跨组件共享库目前尚不受支持不要使用 HTML Web 存储对象window.localStorage与window.sessionStorage的数据存储在用户浏览器或移动客户端本地既不安全也无法保证可靠可用应避免使用画布应用不支持自定义认证应改用连接器获取数据和执行操作。API 可用性概览据 pcf-api-reference.instructions.md 的可用性对照表画布应用列Client、Column、ConditionExpression、Context、DataSet、Device、Entity、Events、Factory、Filtering、Formatting、ImageObject、Linking、Mode、Navigation、NumberFormattingInfo、Paging、Popup、PopupService、PropertyHelper、Resources、SortStatus、StandardControl、UserSettings、Utility、WebApi均列示为画布应用可用AttributeMetadata列元数据为模型驱动应用独有。需要再次强调的是API 参考中的可用性标记并不等于无差别可用——Dataverse 依赖 APIWebAPI这一项以限制文档的明确表述为准任何组件上线前都应在目标画布应用环境中实测验证。画布应用场景的编码最佳实践针对画布应用宿主pcf-best-practices.instructions.md 给出了专门的实践建议可直接落到组件实现中最小化单屏组件数量每向画布应用添加一个组件都会占用渲染时间组件越多渲染越慢。目前每个代码组件会捆绑自己的共享库副本如 Fluent UI、React同一库在单个组件内不会重复加载但多个不同组件会导致浏览器加载多份库的捆绑版本因此应使用开发者性能工具仔细测量允许制作者自定义组件样式画布应用制作者希望组件风格与整个应用一致。应通过输入属性暴露颜色、尺寸等主题化配置项使用 Microsoft Fluent UI 时把这些属性映射到库提供的主题元素上遵循画布应用性能最佳实践在加入代码组件前先确保应用本身满足性能建议应用内与解决方案检查器均提供此类检查生命周期纪律init方法中请求网络资源如元数据不要等到updateView若请求未返回时updateView被调用组件必须处理该状态并展示加载指示destroy方法中关闭 WebSocket、移除容器外的监听器React 场景调用ReactDOM.unmountComponentAtNode谨慎处理空值与事件频率updateView在数据未就绪时可能收到 null 值组件要预期后续updateView周期携带更新后的数据不要在按键、鼠标移动等高频事件中每次调用notifyOutputChanged应改用失焦或手势结束等时机。更新与删除代码组件更新组件原文档 Update Existing Code Components 一节只要更新了代码组件并希望在运行时看到变化就需要修改 manifest 文件中的version属性。原文档建议每次做出修改时都更新组件版本。同时要注意现有代码组件只在应用于 Power Apps Studio 中关闭并重新打开时才会更新重新打开应用时应用会提示你更新代码组件单纯把组件从应用中删除再重新添加不会触发更新需要先在更新的解决方案中发布所有自定义项否则对代码组件的修改不会生效。这与第 6 节 manifest 中control元素的version属性一一对应——版本号既是组件的身份标识也是运行时刷新与设计器属性面板刷新的触发条件。删除组件原文档 Delete a Code Component from a Canvas App 一节打开添加了代码组件的应用在左侧窗格选择树视图然后选择添加了代码组件的屏幕在组件旁边选择更多 (...)然后选择删除保存应用以查看更改。继续深入仓库内的相关资源本仓库围绕 Power Apps 组件框架提供了完整的指令集与工具包可作为画布应用集成的延伸阅读pcf-canvas-apps.instructions.md画布应用代码组件集成指南本文核心来源pcf-overview.instructions.md组件框架总览、能力、许可与限制pcf-manifest-schema.instructions.mdmanifest 完整元素参考与校验规则pcf-api-reference.instructions.mdAPI 接口清单与平台可用性对照pcf-limitations.instructions.md画布应用场景下的四大限制pcf-best-practices.instructions.md含画布应用专节的开发最佳实践pcf-tooling.instructions.mdPower Platform CLI 工具链说明pcf-sample-components.instructions.md示例组件从源码到解决方案 zip 的完整构建流程pcf-development本仓库提供的 PCF 开发插件可直接安装到 Copilot 环境使用。把环境启用、安全校验、实现与导入、限制规避、更新删除这五条主线串起来就能在画布应用中稳定、安全地落地代码组件能力。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考