!12488 增加卡片场景的示例

Merge pull request !12488 from zhongjianfei/cherry-pick-1670988478

zh-cn/application-dev/application-models/widget-development-stage.md

@@ -70,14 +70,14 @@ FormExtensionAbility类拥有如下API接口，具体的API介绍详见[接口
 
 FormExtensionAbility类还拥有成员context，为FormExtensionContext类，具体的API介绍详见[接口文档](../reference/apis/js-apis-inner-application-formExtensionContext.md)。
 
-  | 接口名 | 描述 | 
+| 接口名 | 描述 |
 | -------- | -------- |
 | startAbility(want: Want, callback: AsyncCallback<void>): void | 回调形式拉起一个卡片所属应用的UIAbility（系统接口，三方应用不支持调用，需申请后台拉起权限）。 |
 | startAbility(want: Want): Promise<void> | Promise形式拉起一个卡片所属应用的UIAbility（系统接口，三方应用不支持调用，需申请后台拉起权限）。 |
 
 formProvider类有如下API接口，具体的API介绍详见[接口文档](../reference/apis/js-apis-app-form-formProvider.md)。
 
-  | 接口名 | 描述 | 
+| 接口名 | 描述 |
 | -------- | -------- |
 | setFormNextRefreshTime(formId: string, minute: number, callback: AsyncCallback<void>): void; | 设置指定卡片的下一次更新时间。 |
 | setFormNextRefreshTime(formId: string, minute: number): Promise<void>; | 设置指定卡片的下一次更新时间，以promise方式返回。 |
@@ -86,7 +86,7 @@ formProvider类有如下API接口，具体的API介绍详见[接口文档](../re
 
 formBindingData类有如下API接口，具体的API介绍详见[接口文档](../reference/apis/js-apis-app-form-formBindingData.md)。
 
-  | 接口名 | 描述 | 
+| 接口名 | 描述 |
 | -------- | -------- |
 | createFormBindingData(obj?: Object \| string): FormBindingData | 创建一个FormBindingData对象。 |
 
@@ -452,7 +452,7 @@ onUpdateForm(formId) {
 
 ### 开发卡片事件
 
-卡片支持为组件设置交互事件（action），包括router事件和message事件，其中router事件用于Ability跳转，message事件用于卡片开发人员自定义点击事件。
+卡片支持为组件设置交互事件（action），包括**router**事件和**message**事件，其中router事件用于Ability跳转，message事件用于卡片开发人员自定义点击事件。
 
 关键步骤说明如下：
 
@@ -539,19 +539,60 @@ onUpdateForm(formId) {
         "action": "router",
         "abilityName": "EntryAbility",
         "params": {
-          "message": "add detail"
+          "info": "router info",
+          "message": "router message"
         }
       },
       "messageEvent": {
         "action": "message",
         "params": {
-          "message": "add detail"
+          "detail": "message detail"
+        }
+      }
     }
   }
+  ```
+
+- 在UIAbility中接收router事件并获取参数
+
+  ```ts
+  import UIAbility from '@ohos.app.ability.UIAbility'
+  
+  export default class EntryAbility extends UIAbility {
+      onCreate(want, launchParam) {
+          // 获取router事件中传递的info参数
+          if (want.parameters.info === "router info") {
+              // do something
+              // console.log("router info:" + want.parameters.info)
+          }
+          // 获取router事件中传递的message参数
+          if (want.parameters.message === "router message") {
+              // do something
+              // console.log("router message:" + want.parameters.message)
           }
       }
+      // ...
+  };
   ```
 
+- 在FormExtensionAbility中接收message事件并获取参数
+
+  ```ts
+  import FormExtension from '@ohos.app.form.FormExtensionAbility';
+  
+  export default class FormAbility extends FormExtension {
+      // ...
+      onFormEvent(formId, message) {
+          // 获取message事件中传递的detail参数
+          let msg = JSON.parse(message)
+          if (msg.params.detail === "message detail") {
+              // do something
+              // console.log("message info:" + msg.params.detail)
+          }
+      }
+      // ...
+  };
+  ```
 
 ## 相关实例