鸿蒙服务卡片FA（API8）

有个菇酱叫小霖子

已于 2024-05-16 18:06:06 修改

阅读量51

点赞数

文章标签： harmonyos

于 2023-08-07 10:34:10 首次发布

本文链接：https://blog.csdn.net/weixin_57736124/article/details/132141093

版权

1.安装DevEco Studio

（按照文档步骤来）
文档中心

2.创建项目

打开DevEco Studio - Create Project - Atomic service
文档中心

3.学习手册

（注意：示例中也是多个卡片手动切换显隐，做不了根据某个参数自动控制卡片规格；示例1是API6+JAVA实现的，仅config.json的配置可以参考）

3.5 容器组件：swiper、list-item……

注意：在服务卡片中不支持任何动效。

文档中心
 华为开发者论坛

3.6 在hml文件中引入组件

（⚠️注意：在服务卡片中没有用，只在页面中有效）

<element name='swipeview' src='../../common/components/swipeview/swipeview.hml'></element>
<div class="container">
    <list scrolleffect="no" >
        <list-item clickeffect="false">
            <div style="flex-direction : column;">
                <swipeview bg-color='#99FF0000'></swipeview>
                <swipeview bg-color='#99FF7D00'></swipeview>
                <swipeview bg-color='#99FFFF00' hint-color='#00ae9d'></swipeview>
            </div>
        </list-item>
    </list>
</div>

<div class="todo-item"
  style="transform : translateX({{ transX }}); opacity : {{ opacity }}; background-color : {{ bgColor }};"
  on:touchstart="touchStart"
  on:touchmove="touchMove"
  on:touchend="touchEnd"
  show="{{ isShow }}"
>
  <text class="title" style="color: {{hintColor}};" >HINT</text>
  <image src="../../images/ic_swipe_praise.png" class="img"></image>
  <text class="comment" style="color: {{commentColor}}">这是一个左右滑动回弹的控件，滑动过程中透明度会动态变化，滑动到一定距离控件会消失。</text>
  <text class="txt" style="color: {{hintColor}}">Swipe to dismiss this hint</text>
</div>

参考：华为开发者博客

规范：文档中心

4. 数据交互

4.1 修改卡片data数据

import formBindingData from '@ohos.application.formBindingData';
import formInfo from '@ohos.application.formInfo';
import hilog from '@ohos.hilog';
import formProvider from '@ohos.application.formProvider';

export default {
  onCreate(want) {
    let formData = {
      "order": false,
      "distribution": false
    };
    return formBindingData.createFormBindingData(formData);
  },
  onUpdate(formId) {
    let formData = formBindingData.createFormBindingData({
      "order": false,
      "distribution": true
    });
    formProvider.updateForm(formId, formData);
  }
};

文档中心

华为开发者博客

4.2 调用接口

import http from '@ohos.net.http';
wholePoemRequest() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      "https://py.myie9.com/xuxietest/" + this.wholeInput,
      {
        method: RequestMethod.RequestMethod.GET,
        readTimeout: 15000,
        connectTimeout: 15000,
      },
      (error, data) => {
        if (error) {
          console.log("error code: " + error.code + ", msg: " + error.message)
        } else {
          let code = data.responseCode
          if (ResponseCode.ResponseCode.OK == code) {
            this.wholeContent = data.result.toString();
            let header = JSON.stringify(data.header);
            console.log("result: " + this.wholeContent);
            console.log("header: " + header);
          } else {
            console.log("response code: " + code);
          }
        }
      }
    );
  }