学习使用ArkTs开发一个简易便签App

站长

2024年04月14日 16:48 · 阅读数 4

作者本着学习鸿蒙应用开发的目的，根据 HarmonyOS Developer 上提供的API一点点来开发一个超级简洁的便签应用，最后附上源码。

0.准备

开发工具： IDE: DevEco Studio 3.1.1 Release Compile SDK: 3.1.0(API9)

1.功能分析

分析便签应用的特点，核心功能主要有： 1.便签记录增删改查 2.便签UI的搭建

涉及了ArkUI相关控件、路由跳转、手势事件、关系型数据库应用等知识的学习应用。

2.新建工程

创建一个Empty Ability 项目，初始化工程信息。

学习使用ArkTs开发一个简易便签App

运行工程确保项目环境配置正确，可以运行。

学习使用ArkTs开发一个简易便签App

3.搭建UI

便签列表页面

核心布局：

Row() {
  Column() {
    Row() {
      Text('记录列表')
        .width('33%')
        .height(50)
        .backgroundColor(Color.Black)
        .fontSize(25)
        .fontColor(0x317aff)
      Text('+')
        .width(50)
        .height(50)
        .fontSize(40)
        .fontColor(Color.White)
        .onClick(() => {
        })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height(70)
    .width('90%')
    .padding(10)
    .backgroundColor(Color.Black)
    Flex({ direction: FlexDirection.Column }) {
      List() {
        ForEach(this.items, (item: Item, index: number) => {
          ListItem() {
            Row() {
              Text(`✍️  ${item.content}`)
                .fontSize(20)
                .fontColor(Color.White)
                .maxLines(2)
                .padding(3)
            }
            .width('100%')
            .height(50)
            .justifyContent(FlexAlign.Start)
            .alignItems(VerticalAlign.Center)
            .backgroundColor(0x23ffffff)
          }.gesture()
        }, item => item.id)
      }
      .width('100%')
      .divider({
        strokeWidth: 6,
        startMargin: 2,
        endMargin: 10,
        color: '#00ffffff'
      })
    }.padding(10)
  }
  .width('100%')
  .height('100%').backgroundColor(Color.Black)
}

学习使用ArkTs开发一个简易便签App

便签编辑页面

核心布局：

Column() {
  Row() {
    Column() {
      Row() {
        Text('编辑')
          .width('33%')
          .height(50)
          .backgroundColor(Color.Black)
          .fontSize(25)
          .fontColor(0x317aff)
        Button('完成', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(80)
          .height(38)
          .bindPopup(this.handlePopup, {
            message: this.popContent,
          })
          .onClick(() => {
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .height(70)
      .width('90%')
      .padding(10)
      .backgroundColor(Color.Black)

      TextArea({ text: this.message, placeholder: "请输入" })
        .placeholderColor(Color.Gray)
        .focusable(true)
        .focusOnTouch(true)
        .fontSize(22)
        .fontColor(Color.White)
        .backgroundColor(Color.Black)
        .onChange((value: string) => {
          if (value.trim() != '') {
            this.message = value
          }
        })
    }
    .width('100%')
    .height('100%')
  }
  .height('100%')
  .backgroundColor(Color.Black)
}

学习使用ArkTs开发一个简易便签App

路由跳转

跳转采用了SDK提供的router api进行路由操作，与其他平台大同小异，因为跳转到编辑页可能是修改便签，所以需要携带便签Id参数进行跳转。

router.pushUrl({
  url: 'pages/Detail', // 目标url
  params: item
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
    return;
  }
  console.info('Invoke pushUrl succeeded.');
});

4.搭建数据库

SDK提供了三种数据持久化方式，针对便签记录，三种都可以用，但更规范的还是使用关系型数据库，这里就使用关系型数据库实现数据持久化。

字段设计

因为功能简单，所以表字段就按照最简单的来，后面功能多了可以直接拓展表字段。

数据库存储对象的实体映射：

export default class Item {
  id: number;
  content: string;
}

初始化数据库，这里主要是新建表，创建数据库连接实例供应用其他功能使用，这里使用了SDK提供的globalThis对象来存储全局单例，方便其他页面快速访问。


// DB
const STORE_CONFIG = {
  name: 'RdbTest.db', // 数据库文件名
  securityLevel: relationalStore.SecurityLevel.S1 // 数据库安全级别
};

const SQL_CREATE_TABLE = 'CREATE TABLE IF NOT EXISTS NOTE (ID INTEGER PRIMARY KEY AUTOINCREMENT, CONTENT TEXT)'; // 建表Sql语句

relationalStore.getRdbStore(this.context, STORE_CONFIG, (err, store) => {
  if (err) {
    console.error(`Failed to get RdbStore. Code:${err.code}, message:${err.message}`);
    return;
  }
  console.info(`Succeeded in getting RdbStore.`);
  store.executeSql(SQL_CREATE_TABLE); // 创建数据表

  globalThis.dbStore = store
});

数据增删改查

可以参考developer.huawei.com/consumer/cn…

5.便签列表页功能

核心主要是刷新最新数据源到列表上:

reloadData() {
  let predicates = new relationalStore.RdbPredicates('NOTE');
  // predicates.equalTo('NAME', 'Rose');
  let store: relationalStore.RdbStore = globalThis.dbStore
  store.query(predicates, ['ID', 'CONTENT'], (err, resultSet) => {
    if (err) {
      console.error(`Failed to query data. Code:${err.code}, message:${err.message}`);
      return;
    }
    console.info(`ResultSet column names: ${resultSet.columnNames}`);
    console.info(`ResultSet rowCount : ${resultSet.rowCount}`);
    let count = resultSet.rowCount
    console.error(`count==> is ${count}`);
    this.items.splice(0, this.items.length)

    if (count == 0) {
      return
    }

    for (let index = 0; index < count; index++) {
      resultSet.goToRow(index)
      this.items.push(new Item().from(resultSet))
    }
  })
}

在 onPageShow 中刷新，就实现了每次打开页面都是最新数据：

onPageShow() {

  console.log("onPageShow=====>")

  if (this.timeoutId) {
    clearTimeout(this.timeoutId)
  }

  this.timeoutId = setTimeout(() => {
    this.reloadData()
  }, 300)
}

6.便签编辑页完善

编辑页面，在onPageShow中执行判断，跳转过来时是否携带了参数，如果有，表示是修改便签，将参数解析成便签ID即初始化已存在的便签，如果没有，则表示是新建便签，就使用数据库新建记录。

onPageShow() {
  let predicates = new relationalStore.RdbPredicates('NOTE');
  let id = router.getParams()
  if (id && id['id']) {
    this.ID = id['id']
    predicates.equalTo("ID", this.ID as number)
  } else {
    return
  }
  setTimeout(() => {
    let store: relationalStore.RdbStore = globalThis.dbStore
    store.query(predicates, ['ID', 'CONTENT'], (err, resultSet) => {
      if (err) {
        console.error(`Failed to query data. Code:${err.code}, message:${err.message}`);
        return;
      }
      console.info(`ResultSet column names: ${resultSet.columnNames}`);
      console.info(`ResultSet rowCount : ${resultSet.rowCount}`);
      if (resultSet.rowCount == 0) {
        return
      }
      resultSet.goToLastRow()
      this.message = resultSet.getString(1)
      // console.info(`ResultSet column value: ${resultSet.getString(1)}`);
    })
  }, 300)
}

编辑器简单使用TextArea组件，在onChange中通知改变内容变更状态值：

TextArea({ text: this.message, placeholder: "请输入" })
  .placeholderColor(Color.Gray)
  .focusable(true)
  .focusOnTouch(true)
  .fontSize(22)
  .fontColor(Color.White)
  .backgroundColor(Color.Black)
  .onChange((value: string) => {
    if (value.trim() != '') {
      this.message = value
    }
  })

7.删除

还缺个删除功能就齐活了，就用长按列表item来实现吧。但长按手势事件和点击手势事件的设置和其他平台有所区别，在组合手势中添加两个手势事件，并设置识别优先级。

// 点击与长按的组合手势
ListItem(){}
.gesture(
  GestureGroup(GestureMode.Exclusive,
    // 绑定count为2的TapGesture
    TapGesture({ count: 1 })
      .onAction((event: GestureEvent) => {
        router.pushUrl({
          url: 'pages/Detail', // 目标url
          params: item
        }, router.RouterMode.Standard, (err) => {
          if (err) {
            console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
            return;
          }
          console.info('Invoke pushUrl succeeded.');
        });
      }), LongPressGesture({ repeat: true })
      .onAction((event: GestureEvent) => {
      })
      .onActionEnd(() => {
        console.log("long press===>")
        this.deleteId = item.id
        this.dialogController.open()
      })))

GestureMode.Exclusive表明手势组为互斥并别，单击手势识别成功后，双击手势会识别失败。

8.其他

路由跳转没反应：添加了ets页面描述文件后，需要在main_pages.json中声明注册才能进行路由，否则跳转时没有任何反应。
布局错误没实时提示: 有些布局上的错误，编译器没有实时显示出来，在运行时会在控制台报错个笼统的错误,比如（ERROR: Cannot read properties of undefined (reading 'kind')），需要回去扣布局代码找错误，这点比较坑，可以使用git多提交保存还原，或者使用编译器的localHistory功能还原下代码。

9.源码

hmNoteApplication.git