文章目录效果图项目里的 LiveForm Ability 在哪里最小代码长什么样onLiveFormCreate 是入口为什么要用 LocalStoragesession.loadContent 的路径怎么写页面必须 useSharedStoragemodule.json5 也要注册从项目里学到的好习惯排查清单写在最后普通卡片负责显示在桌面上LiveForm Ability 负责加载展开后的互动页面。这篇不讲复杂业务先写一个最小版本让小白知道LiveFormExtensionAbility到底干什么。效果图先看最终要加载出来的 LiveForm 效果。普通卡片只是入口真正展开后的互动页面就是由 LiveForm Ability 加载出来的。项目里的 LiveForm Ability 在哪里当前项目有四个entry/src/main/ets/livecardability/SleepLiveCardAbility.etsentry/src/main/ets/livecardability/DeliveryLiveCardAbility.etsentry/src/main/ets/livecardability/ExerciseLiveCardAbility.etsentry/src/main/ets/livecardability/MusicLiveCardAbility.ets它们的结构很像创建LocalStorage塞数据调用session.loadContent()。最小代码长什么样你可以先看这个简化版import{formInfo,LiveFormExtensionAbility,LiveFormInfo}fromkit.FormKit;importUIExtensionContentSessionfromohos.app.ability.UIExtensionContentSession;exportclassDemoLiveCardAbilityextendsLiveFormExtensionAbility{onLiveFormCreate(liveFormInfo:LiveFormInfo,session:UIExtensionContentSession):void{conststoragenewLocalStorage();storage.setOrCreate(context,this.context);storage.setOrCreate(session,session);storage.setOrCreate(formId,liveFormInfo.formId);storage.setOrCreate(borderRadius,liveFormInfo.borderRadius);constrect:formInfo.RectliveFormInfo.rect;storage.setOrCreate(formRect,rect);session.loadContent(livecardability/pages/DemoLiveCard,storage);}}这段就是一个能工作的 LiveForm Ability 骨架。onLiveFormCreate 是入口onLiveFormCreate(liveFormInfo:LiveFormInfo,session:UIExtensionContentSession):void系统创建互动区域时会调用这个方法。liveFormInfo里有当前卡片的信息比如formIdrectborderRadiussession是加载 UI 的会话对象。你最后要通过它加载页面。为什么要用 LocalStorageAbility 和 ArkUI 页面不是一个普通函数调用关系。你不能直接把参数传进组件构造函数。项目里用LocalStorage传数据conststoragenewLocalStorage();storage.setOrCreate(formId,liveFormInfo.formId);storage.setOrCreate(formRect,liveFormInfo.rect);页面里再这样接Entry({useSharedStorage:true})Componentstruct DemoLiveCard{LocalStorageProp(formId)formId:string;LocalStorageProp(formRect)formRect?:formInfo.Rectundefined;}字段名要一致。Ability 里写formRect页面里也要写formRect。session.loadContent 的路径怎么写session.loadContent(livecardability/pages/DemoLiveCard,storage);注意几点不写entry/src/main/ets。不写.ets后缀。路径从ets目录下开始算。比如项目里的音乐页面是entry/src/main/ets/livecardability/pages/MusicLiveCard.ets加载时写session.loadContent(livecardability/pages/MusicLiveCard,storage);页面必须 useSharedStorageLiveForm 页面要这样写Entry({useSharedStorage:true})Componentstruct DemoLiveCard{LocalStorageProp(formId)formId:string;build(){Column(){Text(formId:${this.formId})}.width(100%).height(100%)}}没有useSharedStorage: true页面拿不到 Ability 传进来的LocalStorage。这是小白很容易漏的一行。module.json5 也要注册写了 Ability 文件还不够必须在module.json5注册{ name: DemoLiveCardAbility, srcEntry: ./ets/livecardability/DemoLiveCardAbility.ets, type: liveForm }然后form_config.json里绑定sceneAnimationParams:{abilityName:DemoLiveCardAbility}这两处名字必须一致。从项目里学到的好习惯项目里的MusicLiveCardAbility不只是加载页面还会准备业务数据storage.setOrCreate(triggerAction,actionData.triggerAction);storage.setOrCreate(songList,initSongs);storage.setOrCreate(currentSong,currentSong);storage.setOrCreate(previousSong,previousSong);也就是说LiveForm Ability 适合做“页面打开前的数据准备”。页面专心画 UI 和动画不要把所有初始化逻辑都堆到页面里。排查清单LiveForm 页面加载不出来时按这个顺序查module.json5是否注册了type: liveForm。form_config.json的abilityName是否对上。onLiveFormCreate()是否执行。session.loadContent()路径是否正确。页面是否写了Entry({ useSharedStorage: true })。页面里LocalStorageProp字段名是否和 Ability 里一致。写在最后LiveForm Ability 的核心不是写 UI而是“接住系统创建事件然后加载互动页面”。小白可以先跑通最小版本再慢慢加音乐列表、传感器、Canvas 动画这些复杂内容。