鸿蒙开发

一、新建项目

1、包名=域名+项目名

二、组件布局

1、容器组件（布局）

Column(){}
Row(){}
//占剩余内容的1分
.layoutWeight(1)

2、内容组件

Text()

3、图片组件

//本地图片
 Image($r('app.media.girl'))
          .width(200)
//网络图片
Image("https://fc1tn.baidu.com/it/u=1406378072,2856613460&fm=202&mola=new&crop=v1")

三、修改软件及名称

修改module.json5中abilities

"icon": "$media:layered_image",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",

四、添加广告页及内容页

1、新建广告页子页面
pages/start.ets

// 跳转页面入口函数
@Builder
export function startBuilder(){
  Start()
}

@Component
struct Start{
  // 控制跳转的对象
  pathStack: NavPathStack=new NavPathStack()
  build(){
    NavDestination(){
      Button("点击跳转布局页")
        .onClick(()=>{
          this.pathStack.pushPathByName("Layout", null, false);
        })
    }
    .title('广告页')
    .onReady((context: NavDestinationContext)=>{
      this.pathStack = context.pathStack
    })
  }
}

2、新建内容页
pages/layout.ets

// 跳转页面入口函数
@Builder
export function LayoutBuilder(){
  Layout()
}

@Component
struct Layout{
  // 控制跳转的对象
  pathStack: NavPathStack=new NavPathStack()
  build(){
    NavDestination(){}
    .title('布局页')
    .onReady((context: NavDestinationContext)=>{
      this.pathStack = context.pathStack
    })
  }
}

3、在module.json5的module中添加配置

 "routerMap": "$profile:route_map",

4、添加route_map.json添加配置
/resources/base/profile/route_map.json

{
  "routerMap": [
    {
      "name": "Start",
      "pageSourceFile": "src/main/ets/pages/start.ets",
      "buildFunction": "startBuilder",
      "data": {
        "description" : "this is 广告页"
      }
    },
    {
      "name": "Layout",
      "pageSourceFile": "src/main/ets/pages/layout.ets",
      "buildFunction": "LayoutBuilder",
      "data": {
        "description" : "this is 布局页"
      }
    }
  ]
}

5、首页中添加跳转
pages/index.ets

@Entry
@Component
struct Index {
  pathStack : NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pathStack){
    }.onAppear(() => {
      this.pathStack.pushPathByName("Start", null, false);
    })
    .hideNavBar(true)
  }
}