devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【HarmonyOS】低代码开发之FA卡片开发流程

作者：小丑西瓜9 | 2024-05-14 04:13:38

赞

踩

卡片开发

【关键词】

低代码开发、FA卡片开发

1开发准备

1.1FA卡片开发注意事项

参考文档：

基于JS UI实现的Java卡片开发指导

1、只定义一个FA卡片

首先通过DevEco Studio创建一个工程，创建完成之后，找到src/main/config.json文件，

在config.json配置文件中，在module--->abilities--->forms节点下，只有一条数据。

forms节点下的isDefault字段值为true，表示该卡片为默认卡片，每个Ability有且只有一个默认卡片。

备注：forms节点的数据结构是数组，这里的要求是内部只有一个{}对象数据。

 2、提供多种尺寸

在forms节点下的supportDimensions字段中配置多种尺寸，比如这里配置了1*2和2*2两种尺寸：

3、对应卡片的js相关资源

“js”模块中的name字段要与“forms”模块中的jsComponentName字段的值一致，为js资源的实例名。

4、添加相应权限

例如：卡片需要请求网络数据，需要添加相应的网络权限，打开config.json文件，在module节点下添加reqPermissions节点，如下图所示：

 5、快照

需要在元服务开发态默认将快照图定义成和2*2卡片相同的内容，用于对新用户展示。

 1.2低码SDK初始化

基于景区模板开发可以跳过此步骤，低码模板中已经有低码SDK。

在项目工程的根目录下build.gradle文件中的dependencies闭包中添加如下依赖：

在entry的根目录下的build.gradle文件的头部添加以下内容：

 同时在dependencies闭包中添加低码SDK的依赖：

 在entry/src/main/java/包名/MyApplication.java文件中进行SDK初始化：

1.3数据模型初始化

基于景区模板开发可以跳过此步骤，此步骤主要介绍如何在云侧创建数据模型。

登录AppGallery Connect控制台，找到对应的项目，然后选中低代码平台中的数据模型，点击新建数据模型：

之后点击编辑，为该数据模型添加所需的字段：

 所需的数据字段创建完成之后，点击保存。

回到数据模型列表所在页面，点击管理数据，之后点击新建，创建以上数据模型所需的数据：

在所需的数据全部添加完成之后，数据模型就创建完成了。

1.4差异化内容展示方案

第一种：负一屏通过AGC自定义参数

在云侧数据模型中创建了extraParam这个预留参数字段（注意：此处可以创建多个字段，需要和AGC管理台位置感应服务中创建的字段保持一致），通过在AGC管理台---位置感应服务---服务申请中创建相应的字段，端侧获取该字段值，通过对不同值进行判断处理，控制端侧卡片展示不同样式内容。

第二种：小艺建议通过不同POI ID

在云侧数据模型中创建了poi_id字段（字段名称需要根据实际创建），端侧获取该字段值，通过对不同值进行判断处理，小艺建议通过不同POI ID实现控制端侧卡片展示不同的样式内容。

2开发卡片

2.1卡片目录结构

卡片的典型开发目录结构如下图所示，详细介绍参见文件组织。

 目录中主要文件夹如下：

  • pages：用于存放卡片的页面。
  • common：用于存放公共资源文件，比如：图片资源。
  • resource：用于存放资源配置文件，比如：多分辨率加载配置文件。
  • i18n：用于配置不同语言场景下资源内容，比如：应用文本词条、图片路径等。

目录中文件分类如下：

  • .hml结尾的HML模板文件：用于描述卡片页面的布局结构。
  • .css结尾的CSS样式文件：用于描述页面的样式。
  • .json结尾的JSON文件：用于配置卡片中使用的变量action事件。

2.2布局卡片

在index.hml文件中实现卡片的页面布局。最外层使用div组件和stack组件。stack组件内部使用了两个div组件分别布局1x2和2x2两种不同大小的卡片样式，并且绑定click事件。1x2格式卡片为左右结构，左侧text组件显示标题，右侧Image组件显示播放按钮，绑定消息事件。2x2格式卡片为上下结构，上方text组件显示标题，下方Image组件显示播放按钮，并且绑定消息事件。

  1. <div class="container">
  2. <stack style="height: 100%;width: 100%;">
  3. <div class="item-container-small" show="{{smallCard}}" "routerEvent">
  4.   <text class="title-small">{{title}}</text>
  5. <image src="{{btnSrc}}" class="btn-img-small" "messageEvent"></image>
  6. </div>
  7. <div class="item-container-normal" show="{{normalCard}}" "routerEvent">
  8. <text class="title-normal">{{title}}</text>
  9. <image src="{{btnSrc}}" class="btn-img-normal" "messageEvent"></image>
  10. </div>
  11. </stack>
  12. </div>

2.3设置卡片样式

在index.css文件中定义页面样式，除通用样式外，各组件还可以定义自己特有的样式。例如：text组件设置font-size。组件样式的设置参见各组件的详细介绍。

  1. .container {
  2. flex-direction: column;
  3. justify-content: center;
  4. align-items: center;
  5. }
  6. .title-small {
  7. font-size: 12fp;
  8. margin-start: 15px;
  9. }
  10. .title-normal {
  11. margin-top: 30px;
  12. font-size: 20fp;
  13. }
  14. .item-container-small {
  15.    width: 100%;
  16.    height: 100%;
  17. align-items: center;
  18. }
  19. .item-container-normal {
  20.    width: 100%;
  21.    height: 100%;
  22. align-items: center;
  23. flex-direction: column;
  24. }
  25. .btn-img-small {
  26. margin-start: 25px;
  27.    width: 32px;
  28.    height: 32px;
  29. }
  30. .btn-img-normal {
  31. margin-top: 20px;
  32.    width: 64px;
  33.    height: 64px;
  34. }

2.4配置卡片事件

在index.json文件中配置卡片使用的变量和事件，在data字段中声明变量，在actions字段中声明事件。

本示例在action中定义了名为“routerEvent”的事件，事件类型为“router”，用于跳转到MainAbility。更多用户自定义事件可以使用action:"message"实现。

  1. {
  2.  "data": {
  3.    "smallCard": false,
  4.    "normalCard": true,
  5.    "type": "",
  6.    "title": "",
  7.    "btnSrc": ""
  8.  },
  9.  "actions": {
  10.    "routerEvent": {
  11.      "action": "router",
  12.      "bundleName": "com.lowcode.scenicarea",
  13.      "abilityName": "com.lowcode.scenicarea.MainAbility",
  14.      "params": {
  15.        "message": "add detail"
  16.      }
  17.    },
  18.    "messageEvent": {
  19.      "action": "message",
  20.      "params": {
  21.        "message": "play"
  22.      }
  23.    }
  24.  }
  25. }

除了通过页面主动触发事件，还可以通过卡片各生命周期的回调函数来实现业务处理。卡片生命周期回调在卡片对应的PageAbility中，本示例对应的pageAbility为com.lowcode.scenicarea.MainAbility。在MainAbility的卡片创建回调函数onCreateForm中通过Intent获取卡片的ID、name等信息：

  1. public class MainAbility extends AceAbility {
  2.    public static final int DEFAULT_DIMENSION_2X2 = 2;
  3.    private static final int INVALID_FORM_ID = -1;
  4.    private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, MainAbility.class.getName());
  5.    private String topWidgetSlice;
  6.    @Override
  7.    protected ProviderFormInfo onCreateForm(Intent intent) {
  8.        HiLog.info(TAG, "onCreateForm");
  9.        String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
  10.        int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
  11.        HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);
  12.        FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
  13.        FormController formController = formControllerManager.getController(formId);
  14.        formController = (formController == null) ? formControllerManager.createFormController(formId,
  15.                formName, dimension) : formController;
  16.        if (formController == null) {
  17.            HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName);
  18.            return null;
  19.        }
  20.        return formController.bindFormData(formId);
  21.    }
  22.    ...
  23. }

2.5低码获取数据模型数据

创建数据模型端侧数据实体CardInfo.java：

  1. public class CardInfo {
  2. private String id;
  3. private String type;
  4. private String title;
  5. private String btnSrc;
  6. private String extraParam;
  7. private String poi_id;
  8.       setter(); // 定义各个变量的setter方法
  9.       getter(); // 定义各个变量的getter方法
  10. }

创建获取数据模型端侧数据工具类DataUtil.java：

  1. public class DataUtil {
  2. private static final HiLogLabel TAG = new HiLogLabel(HiLog.INFO, 0x00201, "jscard");
  3.  
  4. public static List<CardInfo> getData() {
  5. List<CardInfo> mCardInfos = new ArrayList<>();
  6. DataModelRequest request = new DataModelRequest();
  7. request.setModelId("1179644081647666113");
  8. request.setStatus(0);
  9. request.setMethodName("list");
  10. DataModelReqParams params = new DataModelReqParams();
  11. params.setOrderBy("id");
  12. params.setOrderType("asc");
  13. request.setParams(params);
  14. HarmonyTask<DataModelResponse> task = AGConnectLowCode.getInstance().callDataModel(request);
  15. task.addOnCompleteListener(new OnHarmonyCompleteListener<DataModelResponse>() {
  16. @Override
  17. public void onComplete(HarmonyTask<DataModelResponse> harmonyTask) {
  18.                if (harmonyTask.isSuccessful()) {
  19.                    DataModelResponse response = harmonyTask.getResult();
  20.                    List<Map<String, Object>> list = response.getData().getRecords();
  21.                    mCardInfos.clear();
  22.                    for (Map<String, Object> map : list) {
  23.                        CardInfo cardInfo = new CardInfo();
  24. cardInfo.setId(map.get("id").toString());
  25. cardInfo.setType(map.get("type").toString());
  26. cardInfo.setTitle(map.get("title").toString());
  27. cardInfo.setBtnSrc(map.get("btnSrc").toString());
  28. cardInfo.setExtraParam(map.get("extraParam").toString());
  29. cardInfo.setPoi_id(map.get("poi_id").toString());
  30.                        mCardInfos.add(cardInfo);
  31.                    }
  32.                    HiLog.info(TAG, "success");
  33.                } else {
  34.                    HiLog.info(TAG, "fail");
  35.                }
  36. }
  37. });
  38. return mCardInfos;
  39.    }
  40. }

创建单例管理类DataInstance.java用来管理数据和Player播放器：

  1. public class DataInstance {
  2. private static class SingletonHolder {
  3. private static final DataInstance INSTANCE = new DataInstance();
  4.    }
  5.  
  6. private DataInstance () {}
  7.  
  8. public static final DataInstance getInstance() {
  9. return SingletonHolder.INSTANCE;
  10.    }
  11.  
  12. private List<CardInfo> list;
  13. private Player player;
  14.  
  15. private boolean isPlay= false;
  16.  
  17. public boolean isPlay() {
  18. return isPlay;
  19.    }
  20.  
  21. public void setPlay(boolean play) {
  22. isPlay = play;
  23.    }
  24.  
  25. public Player getPlayer() {
  26. return player;
  27.    }
  28.  
  29. public void setPlayer(Player player) {
  30. this.player = player;
  31.    }
  32.  
  33. public List<CardInfo> getList() {
  34. return list;
  35.    }
  36.  
  37. public void setList(List<CardInfo> list) {
  38. this.list = list;
  39.    }
  40. }

2.6初始化卡片

首先在MainAbility.java类的onStart()方法中初始化数据和播放器：

  1. public class MainAbility extends AceAbility {
  2. public static final int DEFAULT_DIMENSION_2X2 = 2; //System-defined constant. Do not change its value.
  3. private static final int INVALID_FORM_ID = -1;
  4. private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, "jscard");
  5. private String topWidgetSlice;
  6. private Player mPlayer;
  7.  
  8. @Override
  9. public void onStart(Intent intent) {
  10. super.onStart(intent);
  11. DataInstance.getInstance().setList(DataUtil.getData());
  12. initPlayer();
  13.    }
  14.  
  15. @Override
  16. public void onStop() {
  17. super.onStop();
  18.    }
  19.  
  20. private void initPlayer() {
  21. if (mPlayer == null) {
  22. mPlayer = new Player(this);
  23. }
  24. DataInstance.getInstance().setPlayer(mPlayer);
  25. Source source = new Source("https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3");
  26. DataInstance.getInstance().getPlayer().setSource(source);
  27. DataInstance.getInstance().getPlayer().prepare();
  28.    }
  29.  
  30. @Override
  31. protected ProviderFormInfo onCreateForm(Intent intent) {
  32. HiLog.info(TAG, "onCreateForm");
  33. long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);
  34. String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
  35. int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
  36. HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);
  37. FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
  38. FormController formController = formControllerManager.getController(formId);
  39. formController = (formController == null) ? formControllerManager.createFormController(formId,
  40.                formName, dimension) : formController;
  41. if (formController == null) {
  42. HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName);
  43. return null;
  44. }
  45. if (DataInstance.getInstance().getList()==null || DataInstance.getInstance().getList().size()==0){
  46. DataInstance.getInstance().setList(DataUtil.getData());
  47. initPlayer();
  48. }
  49. return formController.bindFormData(formId);
  50. 	}
  51. 	……
  52. }

在WidgetImpl.java类的bindFormData()方法中初始化卡片展示：

  1. private Context mContext;
  2. public WidgetImpl(Context context, String formName, Integer dimension) {
  3. super(context, formName, dimension);
  4. HiLog.info(TAG, "WidgetImpl");
  5. this.mContext = context;
  6.    }
  7.  
  8. @Override
  9.    public ProviderFormInfo bindFormData(long formId) {
  10. HiLog.info(TAG, "bind form data");
  11. ZSONObject object = new ZSONObject();
  12. if (dimension == DIMENSION_1X2) {
  13. object.put("smallCard", true);
  14. object.put("normalCard", false);
  15. object.put("type", DataInstance.getInstance().getList().get(0).getType());
  16. object.put("title", DataInstance.getInstance().getList().get(0).getTitle());
  17. if (!DataInstance.getInstance().isPlay()){
  18.        object.put("btnSrc", DataInstance.getInstance().getList().get(0).getBtnSrc());
  19. }else {
  20.                object.put("btnSrc", DataInstance.getInstance().getList().get(1).getBtnSrc());
  21. }
  22. } else if (dimension == DIMENSION_2X2) {
  23. object.put("smallCard", false);
  24. object.put("normalCard", true);
  25. object.put("type", DataInstance.getInstance().getList().get(2).getType());
  26. object.put("title", DataInstance.getInstance().getList().get(2).getTitle());
  27. if (!DataInstance.getInstance().isPlay()){
  28.                object.put("btnSrc", DataInstance.getInstance().getList().get(2).getBtnSrc());
  29. }else {
  30.                object.put("btnSrc", DataInstance.getInstance().getList().get(3).getBtnSrc());
  31. }
  32. }
  33. FormBindingData bindingData = new FormBindingData(object);
  34. ProviderFormInfo formInfo = new ProviderFormInfo();
  35. formInfo.setJsBindingData(bindingData);
  36. return formInfo;
  37.    }

2.7卡片效果展示

​

cke_212422.png

2.8音乐播放/暂停事件

此部分功能同样在WidgetImpl.java类中实现：

创建音乐播放/暂停的方法：

  1. // 暂停音乐
  2. private void pause() {
  3. 	DataInstance.getInstance().getPlayer().pause();
  4. }
  5.  
  6. // 播放音乐
  7. private void play() {
  8. 	DataInstance.getInstance().getPlayer().play();
  9. }

音乐播放/暂停时更新播放按钮的图片资源：

  1. // 更新数据
  2. private void updateForm(long formId, String btnSrc) {
  3. ZSONObject object = new ZSONObject();
  4. object.put("btnSrc", btnSrc);
  5. try {
  6. if (mContext instanceof Ability) {
  7.          ((Ability) mContext).updateForm(formId, new FormBindingData(object));
  8. }
  9. } catch (FormException e) {
  10. HiLog.error(TAG, e.getMessage());
  11. }
  12. }

在2.4中配置了卡片的消息事件，通过消息事件触发音乐播放，在onTriggerFormEvent()方法中接收事件并处理播放/暂停及按钮的样式更新逻辑：

  1. @Override
  2. public void onTriggerFormEvent(long formId, String message) {
  3. HiLog.info(TAG, "onTriggerFormEvent");
  4. if (!TextUtils.isEmpty(message)){
  5. ZSONObject zsonObject = ZSONObject.stringToZSON(message);
  6.    String msg = zsonObject.getString("message");
  7. if (!TextUtils.isEmpty(msg) && "play".equals(msg)){
  8.                if (!DataInstance.getInstance().isPlay()){
  9. DataInstance.getInstance().setPlay(true);
  10.                    if (dimension==DIMENSION_1X2){
  11. updateForm(formId,DataInstance.getInstance().getList().get(1).getBtnSrc());
  12.                    }else if (dimension==DIMENSION_2X2){
  13. updateForm(formId,DataInstance.getInstance().getList().get(3).getBtnSrc());
  14.                    }
  15.                    play();
  16.                }else {
  17. DataInstance.getInstance().setPlay(false);
  18.                    if (dimension == DIMENSION_1X2){
  19.                        updateForm(formId,DataInstance.getInstance().getList().get(0).getBtnSrc());
  20.                    }else if (dimension==DIMENSION_2X2){
  21. updateForm(formId,DataInstance.getInstance().getList().get(2).getBtnSrc());
  22.                    }
  23.            pause();
  24.                }
  25. }
  26. }
  27. }

最后来看一下播放的效果：

2.9、差异化内容展示

在实际应用中，有时我们希望服务卡片能随用户所处的场景展示不同的内容，比如：当用户身处景点A时，卡片展示景点A的服务信息；当用户游玩到景点B时，卡片能更新展示景点B的服务信息。

针对此需求，我们可以结合“位置感应服务”来实现，当用户靠近注册的Beacon设备位置区域时，在负一屏的卡片中展示相应的内容。

在申请位置感应服务时，我们定义一个参数extFaParamTitle来设置不同区域展示的内容，然后在卡片侧获取extFaParamTitle的值，最后根据extFaParamTitle配置的不同值，来实现不同场景下展示不同内容。具体实现方式如下。

1. 开通“位置感应服务”后，申请服务时，通过“自定义参数”处参数extFaParamTitle来设置不同地方展示的标题内容。

cke_44978.png

2.在DataInstance.java中定义extFaParamTitle变量。

  1. private String extFaParamTilte;
  2.  
  3. public String getExtFaParamTilte() {
  4.  
  5. return extFaParamTilte;
  6.  
  7. }
  8.  
  9. public void setExtFaParamTilte(String extFaParamTilte) {
  10.  
  11. this.extFaParamTilte = extFaParamTilte;
  12.  
  13. }

3. 在MainAbility.java中的onCreateForm()方法中获取extFaParamTitle字段的值。

  1. @Override
  2.  
  3. protected ProviderFormInfo onCreateForm(Intent intent) {
  4.  
  5.    HiLog.info(TAG, "onCreateForm");
  6.  
  7.    // ......此处省略部分代码
  8.  
  9.    // 1、从intent中获取IntentParams
  10.  
  11.    IntentParams intentParams = intent.getParam(AbilitySlice.PARAM_FORM_CUSTOMIZE_KEY);
  12.  
  13.    if (intentParams!=null){
  14.  
  15.        // 2、从IntentParams中获取使用方法传递的参数
  16.  
  17.        String extFaParam = (String) intentParams.getParam("extFaParam");
  18.  
  19. HiLog.info(TAG,"extFaParam"+extFaParam);
  20.  
  21.        ZSONObject extraParamJson = ZSONObject.stringToZSON(extFaParam);
  22.  
  23.        // "{"extFaParamTilte":"xxxxs"}"
  24.  
  25.        String extFaParamTilte = extraParamJson.getString("extFaParamTilte");
  26.  
  27. HiLog.info(TAG,"extFaParamTilte"+extFaParamTilte);
  28.  
  29. DataInstance.getInstance().setExtFaParamTilte(extFaParamTilte);
  30.  
  31.    }
  32.  
  33.    // ......此处省略部分代码
  34.  
  35.    return formController.bindFormData(formId);
  36.  
  37. }

4. 在WidgetImpl.java的bindFormData()方法中通过判断extFaParamTitle字段的值，让卡片展示不同的标题。

  1. @Override
  2.  
  3. public ProviderFormInfo bindFormData(long formId) {
  4.  
  5.    HiLog.info(TAG, "bind form data");
  6.  
  7.    ZSONObject object = new ZSONObject();
  8.  
  9.    if (dimension == DIMENSION_1X2) {
  10.  
  11.        // ......此处省略部分代码
  12.  
  13.        // 根据动态获取的配置项里的字段值，动态修改标题内容
  14.  
  15.        if (!TextUtils.isEmpty(DataInstance.getInstance().getExtFaParamTilte())){
  16.  
  17. object.put("title",DataInstance.getInstance().getExtFaParamTilte());
  18.  
  19.        }
  20.  
  21.        // ......此处省略部分代码
  22.  
  23.    } else if (dimension == DIMENSION_2X2) {
  24.  
  25.        // ......此处省略部分代码
  26.  
  27.        // 根据动态获取的配置项里的字段值，动态修改标题内容
  28.  
  29.        if (!TextUtils.isEmpty(DataInstance.getInstance().getExtFaParamTilte())){
  30.  
  31.            object.put("title",DataInstance.getInstance().getExtFaParamTilte());
  32.  
  33.        }
  34.  
  35.        // ......此处省略部分代码
  36.  
  37.    }
  38.  
  39.    FormBindingData bindingData = new FormBindingData(object);
  40.  
  41.    ProviderFormInfo formInfo = new ProviderFormInfo();
  42.  
  43.    formInfo.setJsBindingData(bindingData);
  44.  
  45.    return formInfo;
  46.  
  47. }

​

​

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/567228
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号