鸿蒙应用开发实战-开发初识

效果图展示

就是简单的两个页面，一个登录页,一个首页。登录做了账号密码判断，首页包含了常用的轮播图片，搜索框，toast，以及页面生命周期函数，其他的就是页面样式(当然在这叫组件属性)。

1. 下载安装开发工具：

HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

进入此网址下载好工具，安装。关于安装教程网上很多，此处不再赘述。

2. 打开工具新建一个示例项目，运行在右侧模拟器。

安装好工具，新建一个项目，首次打开，如下所示：此时可以修改下源码看看效果，然后就可以打开文档开搞了。

由于工具默认是英文，看起来不方便，那就改成中文，网上有很多说安装插件，但是这个现在的版本好像已经自带了，毕竟是华为的，怎么能没有中文呢。

可以如下操作直接改成中文：

file -- setting -- 勾选chinese插件 -- 重启 -- ok

3. 删除hello world原本的这个text组件，然后自己写:

登录页：

Text('一个新的技术-鸿蒙开发')          .margin({top:200})          .fontColor("#333")          .fontSize(14)

input输入框：

TextInput({placeholder:'请输入账号',text:'1'})          .backgroundColor("#fff")          .margin({ top:35,left:30,bottom:30,right:30 })          .height(42)          .onChange(e=>{            console.log(e)          })

按钮：

Button('登录')          .width(200)          .margin({top:40})          .onClick(()=>{            console.log('login信息')           })

除此之外，还有toast，路由，还有页面布局，以及其他东西下期再说

登录页完整源码：（案例所用图片来源网络）

//引用路由
import router from '@ohos.router';

// toast组件引入
import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct Index {
  @State username: string = 'admin'
  @State pwd: string = '123456'

  build() {
    Row() {
      Column() {
        Text('欢迎登录')
          .fontColor("#333")
          .fontSize(24)
          .fontWeight(700)

        TextInput({placeholder:'请输入账号',text:this.username})
          .backgroundColor("#fff")
          .margin({ top:35,left:30,bottom:30,right:30 })
          .height(42)
          .onChange(e=>{
            console.log(e)
            this.username = e
          })

        TextInput({placeholder:'请输入密码',text:this.pwd})
          .backgroundColor("#fff")
          .type(InputType.Password)
          .margin({top:0,left:30,right:30})
          .height(42)
          .onChange(e=>{
            console.log(e)
            this.pwd = e
          })

        Button('登录')
          .width(200)
          .margin({top:40})
          .onClick(()=>{
            console.log('login信息',this.username,this.pwd)
            if(this.username == 'admin' && this.pwd == '123456'){
              // 提示框
               promptAction.showToast({
                  message: "登录成功", // 显示文本
                  duration: 5000, // 显示时长
                  bottom: 100  // 距离底部的距离
                })
              // 跳转到首页
              setTimeout(()=>{
                router.pushUrl({
                  url: "pages/home",
                  params: {
                    data: "跳转路径带的参数"
                  }
                })
              },1000)

            }else{
              promptAction.showToast({
                message: "登录失败", // 显示文本
                duration: 5000, // 显示时长
                bottom: 100  // 距离底部的距离
              })
            }
          })

        Text('一个新的技术-鸿蒙开发')
          .margin({top:200})
          .fontColor("#333")
          .fontSize(14)
      }
      .width('100%')
      .height("40%")
      .margin({top:0,left:0,right:0})
      .padding({top:20})

    }
    .height('100%')
    .backgroundImage("https://img1.baidu.com/it/u=2594795564,4151566141&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
    .backgroundImageSize(1)
    .backgroundBlurStyle(1.5)
  }
}

首页：

搜索框：

Search({ value: '1', placeholder: '请输入...', controller: this.controller })
          .searchButton('搜索')
          .width(350)
          .height(40)
          .backgroundColor('#eee')
          .margin({ top:10,left:30,right:30,bottom:10 })
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .onSubmit((value: string) => {
              console.log('搜索') 
          })

轮播图（案例所用图片来源网络）：

Swiper(this.swiperController) {
          Image('https://img0.baidu.com/it/u=466438817,3329235077&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500') // 实际使用时请替换为真实地址
            .width('90%')
            .height('100%')

          Image('https://img1.baidu.com/it/u=3064475494,731318675&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=273') // 实际使用时请替换为真实地址
            .width('90%')
            .height('100%')

          Image('https://img1.baidu.com/it/u=975901616,246178223&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=500') // 实际使用时请替换为真实地址
            .width('90%')
            .height('100%')
        }
        .width(340)
        .height(130)
        .borderRadius(8)
        .loop(true)
        .autoPlay(true)
        .interval(3000)
        .indicatorStyle({
          size: 30,
          // left: 0,  // 小点显示在左侧
          color: Color.White
        })

首页完整源码：（案例所用图片来源网络）

//引用路由
import router from '@ohos.router';
// toast组件引入
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct Home {
  @State submitValue: string = '华为手机'
  @State changeValue: string = '华为手机'
  controller: SearchController = new SearchController()

  private swiperController: SwiperController = new SwiperController()
  private lists: Object[] = [
    {name:'1华为手机P60',price:6999,desc:'洛可可白,每一支都独一无二',image:'https://img0.baidu.com/it/u=466438817,3329235077&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500'},
    {name:'2华为手机P60',price:6999,desc:'洛可可白,每一支都独一无二',image:'http://t13.baidu.com/it/u=4192552773,677025305&fm=224&app=112&f=PNG?w=500&h=500'},
    {name:'3华为手机P60',price:6999,desc:'洛可可白,每一支都独一无二',image:'https://img2.baidu.com/it/u=3496610832,3575732030&fm=253&fmt=auto&app=138&f=JPEG?w=379&h=290'},
    {name:'4华为手机P60',price:6999,desc:'洛可可白,每一支都独一无二',image:'https://img0.baidu.com/it/u=78605798,3909076364&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=454'},
    {name:'5华为手机P60',price:6999,desc:'洛可可白,每一支都独一无二',image:'https://img2.baidu.com/it/u=3117903967,2722093213&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'},
    {name:'6华为手机P60',price:6999,desc:'洛可可白,每一支都独一无二',image:'https://img1.baidu.com/it/u=3064475494,731318675&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=273'},
  ]
  // 接收上一页穿过来的参数
  @State loginCan:string = router.getParams()?.['data']

  //生命周期函数 页面每次显示时触发
  onPageShow() {
    promptAction.showToast({
      message:"路径参数为:"+this.loginCan, // 显示文本
      duration: 1000, // 显示时长
      bottom: 300  // 距离底部的距离
    })
  }

  build() {
    Row() {
      // 页面自上而下排列  所以使用column
      Column() {

        // 搜索
        Search({ value: this.changeValue, placeholder: '请输入...', controller: this.controller })
          .searchButton('搜索')
          .width(350)
          .height(40)
          .backgroundColor('#eee')
          .margin({ top:10,left:30,right:30,bottom:10 })
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .onSubmit((value: string) => {
            this.submitValue = value
            promptAction.showToast({
              message:"搜索:"+this.submitValue, // 显示文本
              duration: 1000, // 显示时长
              bottom: 300  // 距离底部的距离
            })
          })

        // 轮播 可循环 为了看的清楚先不循环
        Swiper(this.swiperController) {
          Image('https://img0.baidu.com/it/u=466438817,3329235077&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500') // 实际使用时请替换为真实地址
            .width('90%')
            .height('100%')

          Image('https://img1.baidu.com/it/u=3064475494,731318675&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=273') // 实际使用时请替换为真实地址
            .width('90%')
            .height('100%')

          Image('https://img1.baidu.com/it/u=975901616,246178223&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=500') // 实际使用时请替换为真实地址
            .width('90%')
            .height('100%')
        }
        .width(340)
        .height(130)
        .borderRadius(8)
        .loop(true)
        .autoPlay(true)
        .interval(3000)
        .indicatorStyle({
          size: 30,
          // left: 0,  // 小点显示在左侧
          color: Color.White
        })

      // menu
        Row(){
          Column(){
            Image('http://t13.baidu.com/it/u=4192552773,677025305&fm=224&app=112&f=PNG?w=500&h=500') // 实际使用时请替换为真实地址
              .width('44')
              .height('44')
            Text('华为手机').margin({top:10}).fontSize(15)
          }.margin({left:12})
          Column(){
            Image('http://t13.baidu.com/it/u=4192552773,677025305&fm=224&app=112&f=PNG?w=500&h=500') // 实际使用时请替换为真实地址
              .width('44')
              .height('44')
            Text('荣耀手机').margin({top:10}).fontSize(15)
          }.margin({left:22})
          Column(){
            Image('http://t13.baidu.com/it/u=4192552773,677025305&fm=224&app=112&f=PNG?w=500&h=500') // 实际使用时请替换为真实地址
              .width('44')
              .height('44')
            Text('华为电脑').margin({top:10}).fontSize(15).textAlign(TextAlign.Center)
          }.margin({left:22})
          Column(){
            Image('http://t13.baidu.com/it/u=4192552773,677025305&fm=224&app=112&f=PNG?w=500&h=500') // 实际使用时请替换为真实地址
              .width('44')
              .height('44')
            Text('华为平板').margin({top:10}).fontSize(15)
          }.margin({left:22})

        }
        .width(340)
        .height(100)
        .margin({top:10,bottom:10})

      // 标题
        Row(){
          Text('商品列表').fontSize(15).textAlign(TextAlign.Start).fontWeight('700').width(340)
        }.width(340).height(40).margin({top:0,bottom:10})

      // list
        List({space: 10}) {
          ForEach(
            this.lists,
            (item) => {
              ListItem() {

                Row({ space: 3 }) {
                  // 左侧
                  Image(item.image)
                    .width(90)
                    .height(70)
                    .margin({ left: 20,right:20 })
                    .padding({ left: 0})
                    .borderRadius(5)

                  // 右侧
                  Column(){
                    Text(item.name)
                      .fontSize(16)
                      .fontColor("#333333")
                      .fontWeight(700)
                      .height(30)
                      .width(280)
                      .padding({top:10})

                    Text(item.desc)
                      .fontSize(14)
                      .fontColor("#777777")
                      .height(30)
                      .width(280)

                    Text('¥' + item.price)
                      .fontSize(14)
                      .textAlign(TextAlign.Start)
                      .fontColor("#FF0000")
                      .height(30)
                      .width(280)

                  }.height('100%')
                }.height(100)
                .backgroundColor('#f5f5f5')
                .borderRadius(10)
              }
              .width('100%')
              .onClick(()=>{
                promptAction.showToast({
                  message:"点击:"+item.name, // 显示文本
                  duration: 1000, // 显示时长
                  bottom: 300  // 距离底部的距离
                })
              })
            }
          )

        }
        .width('340')
        .layoutWeight(1)

      }
      .height('100%')
      }
    .height('100%')
    .backgroundColor('#fff')
  }
}

最后

如果你想成为一名鸿蒙开发者，以下这些资料将是十分优质且有价值，让你的鸿蒙开发之路事半功倍！相对于网上那些碎片化的知识内容，这份学习资料的知识点更加系统化，更容易理解和记忆。

内容包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）

1.鸿蒙核心技术学习路线

​

2.大厂面试必问面试题

​

3.鸿蒙南向开发技术

​

 4.鸿蒙APP开发必备

​

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

​

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击→鸿蒙Next全套VIP学习资料：免费领取（安全链接，放心点击）