鸿蒙开发入门简介

ArkTS MVVM

简介

鸿蒙开发者大会ArkUI

开发环境安装

下载与安装DevEco Studio

编码

MVVM架构

登录页

View层

import VMLogin from '../vm/VMLogin'

@Entry
@Component
struct Login {
  @State account: string = ''
  @State pwd: string = ''

  build() {
    Column() {
      Column() {
        Row() {
          Text("注册")
            .fontSize(20)
            .fontColor(Color.White)
            .textAlign(TextAlign.End)
            .padding(10)
        }
        .alignSelf(ItemAlign.End)

        Image($r("app.media.logo"))
          .width(40)
          .height(40)
          .margin({ top: 50 })

        Text($r('app.string.MainAbility_label'))
          .fontSize(20)
          .fontColor(Color.White)
          .margin({ top: 10, bottom: 50 })
      }
      .width('100%')
      .backgroundColor($r('app.color.color_primary'))

      Column() {
        Text("验证码登录")
          .fontSize(20)
          .textAlign(TextAlign.End)
          .margin(20)
        TextInput({ text: this.account, placeholder: "请输入账号" })
          .margin(10)
          .onChange(it => {
            this.account = it
          })
        TextInput({ text: this.pwd, placeholder: "请输入密码" })
          .margin(10)
          .type(InputType.Password)
          .onChange(it => {
            this.pwd = it
          })

        Stack() {
          Button("登录", { type: ButtonType.Normal })
            .borderRadius(10)
            .backgroundColor($r('app.color.color_primary'))
            .width('90%')
            .onClick(() => {
              VMLogin.login(this.account, this.pwd)
            })
        }
        .width("100%")
        .margin({ top: 20 })

        Text("密码登录")
          .fontSize(12)
          .padding(10)
          .margin(10)
          .alignSelf(ItemAlign.End)

        Text("遇到问题")
          .fontSize(12)
          .padding(10)
          .margin(10)
          .alignSelf(ItemAlign.Center)

      }.width('100%')
      .alignItems(HorizontalAlign.Start)

    }.width('100%')
  }
}

Viewmodel层

import http from '@ohos.net.http';
import router from '@ohos.router';

export class VMLogin {
  login(account: string, pwd: string) {
    AlertDialog.show({
      title: "提示",
      message: account + " " + pwd,
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      offset: { dx: 0, dy: -20 },
      // gridCount: 3,
      confirm: {
        value: 'ok',
        action: () => {
          console.info('Button-clicking callback')
          router.replace({ url: 'pages/Main' })
        }
      },
      cancel: () => {
        console.info('Closed callbacks')
      }
    })
  }
}

export default new VMLogin()

首页

• 折叠屏-小屏

• 折叠屏-大屏

banner、list组合

import ItemArticle from '../view/ItemArticle'
import ItemBanner from '../view/ItemBanner'
import DataModel, { BannerBean, HomeArticleBean } from '../vm/DataModel'

@Entry
@Component
export default struct Main {
  @State banners: Array<BannerBean> = []
  @State homeArticleList: Array<HomeArticleBean> = []

  aboutToAppear() {
    DataModel.getBanners().then(result => {
      this.banners = result
    })
    DataModel.getHomeArticleList().then(result => {
      this.homeArticleList = result
    })
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ListItem() {
          Stack() {
            Swiper() {
              ForEach(this.banners, (item: BannerBean) => {
                ItemBanner({ item: item })
              })
            }
            .height(200)
            .loop(true)
            .autoPlay(true)
            .interval(3000)
            .borderRadius(10)

            LoadingProgress()
              .color(Color.White)
              .visibility(this.banners.length > 0 ? Visibility.None : Visibility.Visible)
              .width(40)
              .height(40)
          }
          .width('100%')
          .height(200)
        }

        ForEach(this.homeArticleList, (item: HomeArticleBean) => {
          ListItem() {
            ItemArticle({ item: item })
          }
          .editable(true)
        })
      }
      .margin(10)
    }
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

item

• banner

import { BannerBean } from '../vm/DataModel'

@Preview
@Component
export default struct ItemBanner {
  private item: BannerBean

  build() {
    Stack() {
      Image("https://developer.harmonyos.com/resource/image/img_ziyuan_shebei_42x.png")
        // Image(this.item.imagePath)
        // Image($r('app.media.logo'))
        .width('100%')
        .height('100%')
        .borderRadius(10)

      Text(this.item.desc)
        // Text('xxxxxxx')
        .fontColor(Color.White)
        .fontSize(14)
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.BottomEnd)
    .borderRadius(10)
  }
}

• article

import router from '@ohos.router'
import { HomeArticleBean } from '../vm/DataModel'

@Preview
@Component
export default struct ItemArticle {
  private item: HomeArticleBean

  build() {
    Row() {
      Text(this.item.title)
        .fontColor(Color.Black)
        .fontSize(14)
        .margin({ left: 10 })
        .borderRadius(10)
    }
    .width("100%")
    .constraintSize({ minHeight: 100 })
    .backgroundColor(Color.White)
    .alignItems(VerticalAlign.Center)
    .padding(10)
    .borderRadius(10)
    .onClick(() => {
      router.push({ url: 'pages/WebPage', params: {
        webUrl: this.item.link
      } })
    })
  }
}

ViewModel层

import http from '@ohos.net.http'
import CommonConstant from '../../common/constant/CommonConstant'
import { ResponseResult } from '../network/base/ResponseResult'

export class DataModel {
  private tasks: Array<string> = [
    '0',
    '1',
    '2',
    '3',
    '4'
  ]
  private menus: Array<Object> = [
    {
      text: 'add',
      num: 0
    },
    {
      text: 'app',
      num: 1
    },
    {
      text: 'collect',
      num: 2
    }
  ]

  getData() {
    return this.tasks
  }

  getMenus() {
    return this.menus
  }


  getBanners(): Promise<BannerBean[]> {
    return new Promise((resolve: Function) => {
      let httpRequest = http.createHttp()
      let url = `${CommonConstant.BASE_URL}banner/json`
      httpRequest.request(url, (error, data) => {
        console.info('Result:' + JSON.stringify(data.result));
        let result = `${data.result}`;
        let response: ResponseResult = JSON.parse(result)
        resolve(response.data)
      })
    })
  }
  getHomeArticleList(): Promise<HomeArticleBean[]> {
    return new Promise((resolve: Function) => {
      let httpRequest = http.createHttp()
      let url = `${CommonConstant.BASE_URL}article/list/0/json`
      httpRequest.request(url, (error, data) => {
        console.info('Result:' + JSON.stringify(data.result));
        let result = `${data.result}`;
        let response: ResponseResult = JSON.parse(result)
        // @ts-ignore
        resolve(response.data.datas)
      })
    })
  }
}

export default new DataModel()



export class BannerBean {
  desc: string
  imagePath: string
  url: string
}

export class HomeArticleBean {
  title: string
  link: string
}

Web页

Web、LoadingProgress

import router from '@ohos.router';

@Entry
@Component
struct WebPage {
  @State webUrl: string = router.getParams()['webUrl']
  @State loadEnd: boolean = false
  private controller: WebController = new WebController();

  build() {
    Stack() {
      Web({
        src: this.webUrl,
        controller: this.controller
      })
        .onPageEnd(() => {
          this.loadEnd = true
        })

      LoadingProgress()
        .color($r('app.color.color_primary'))
        .visibility(this.loadEnd ? Visibility.None : Visibility.Visible)
        .width(40)
        .height(40)
    }
    .width('100%')
    .height('100%')
  }
}

鸿蒙APP发布

HarmonyOS应用/元服务上架

参考

• 官方

鸿蒙官网 鸿蒙开发者官网 HarmonyOS应用/元服务上架 华为开发者学堂

• 三方

开发入门-wanandroid 鸿蒙学堂

部分内容取自互联网，侵删。