实现书籍类应用框架鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例提供了一个书籍类应用的基本框架，包含“书城”、“分类”、“福利”、“书架”、“我的”五个模块。应用只展示了基本的页面，其中具体功能的实现，开发者可根据需求自行开发。

实现书籍类应用框架源码链接

效果预览

使用说明

进入应用，点击下方的tabBar可浏览不同的模块，其中一些功能未开发，只是作为页面布局展示。

实现思路

根据行业应用的功能，按照高内聚，低耦合的原则，常见应用功能以及职责，将应用划分为“书城”、“分类”、“福利”、“书架”、“我的”五个模块，开发者在实际设计过程中，可以根据模块的复杂程度实际情况再进一步细分。

书架

点击书架页顶部小说推荐栏，可看到小说详情，点击“开通会员”，跳转到会员页，点击小说列表最底部添加喜欢的小说按钮，跳转到书城页，通过Navigation组件实现页面间的跳转。核心代码如下，源码参考BookShelfPage.ets。

NavDestination() {
      Column({ space: this.columnSpace }) {
        this.topBar()
        // avoid failure
        Scroll() {
          Column({ space: this.columnSpace }) {
            if (this.bookInfoList.length > 0) {
              this.bookRecommend(this.bookInfoList[0])
              this.vipBar()
              this.listView()
              this.addNewBook()
            }
            Blank()
              .height(100)
          }
        }
        .scrollBar(BarState.Off)
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
    }
    .width('100%')
    .padding({ left: 10, right: 10 })
    .margin({ top: AppStorage.get('topRectHeight') as number })
    .hideTitleBar(true)

我的

“我的”模块包含设置、我的账户、账号登录等页面，登录页面，勾选隐私政策后，点击“微信一键登录”即可登录账号，此处仅为效果展示，未拉起微信进行登录，开发者可根据需求自行开发。核心代码如下，源码参考LoginPage.ets。

Stack() {
          Button()
            .backgroundColor('rgb(7, 193, 96)')
            .width('80%')
          Row() {
            Image($r('app.media.weixin'))
              .width(20)
              .borderRadius(10)
            Text('微信一键登录')
              .fontColor(Color.White)
          }
        }
        .onClick(() => {
          if (this.readAgreement === true) {
            this.isLogin = 1;
            this.navPathStack.pop();
          } else {

          }
        })