【实现环信 SDK登陆跳转至Harmony 底部导航栏】

1.在 Index.ets 的 aboutToApper 方法中 实现环信SDK 初始化

代码块（可直接 copy）：

let optionss = new ChatOptions("输入管理后台注册的环信 APPkey");

//管理后台网址：https://console.easemob.com/user/login
//环信初始化
ChatClient.getInstance().init(getContext(),optionss)

2.登录环信SDK并跳转至少导航栏页面

代码块：//userID 自定义 String类型参数 =环信id

  //userPasswrod 自定义 String类型参数  登录的密码
  ChatClient.getInstance().login(this.userID,this.userPassword).then(()=>{
    //登录成功后跳转到导航栏的指定类中
    router.replaceUrl({url:'pages/Pages'})


  }).catch((e:ChatError)=>{
    //登录失败则提示错误信息
    console.log("ccc==  "+e.errorCode,"")

  })

3.在 Harmony 平台下自定义容器

代码块：

@State currentIndex: number = 0
  //定义TabsController控件
  private Controller: TabsController = new TabsController()
  //自定义布局 该布局定义时 可以卸载 页面的 build 方法外面
  @Builder
  TabBuilder(title: string, index: number, selectedImage: Resource, normalImage: Resource) {
    //定义一个容器
    Column() {
      //容器的图片
      Image(this.currentIndex === index ? selectedImage : normalImage)
        .height(30)
        .width(30)
      //容器的文本
      Text(title)
        .margin({ top: 5 })
        .fontSize(10)
        .fontColor(this.currentIndex === index ? $r('app.color.start_window_background') :
        $r('app.color.start_window_background'))
    }
    //居中
    .justifyContent(FlexAlign.Center)
    //容器布局的宽占满
    .width('100%')
    //容器布局的高尺寸 25
    .height(25)
    //点击事件改变数字
    .onClick(() => {
      this.currentIndex = index
      this.Controller.changeIndex(this.currentIndex)
    })
  }

4.build 中通过 Tabs 组件实现底部导航栏

代码块：

build() {
    //必写
    Tabs({
      barPosition: BarPosition.End,
      controller: this.Controller
    }) {
      TabContent() {
        //首页
      }
      .padding({ left: 12, right: 12 })
      //背景颜色
      .backgroundColor($r('app.color.start_window_background'))
      //自定义布局的 名字 index位置，点击后和点击其他需要展示的图片
      .tabBar(this.TabBuilder('首页', 0, $r('首次展示的图片'), $r('切到其他页面后展示的图片')))

      TabContent() {
        //会话列表页
      }
      //内边距
      .padding({ left: 12, right: 12 })
      //背景颜色
      .backgroundColor($r('app.color.mainPage_backgroundColor'))
      //自定义布局的 名字 index位置，点击后和点击其他需要展示的图片
      .tabBar(this.TabBuilder('会话', 1, $r('被点击后展示的图片'), $r('被动展示图片')))
      TabContent() {
        //我的详情页
      }.padding({ left: 12, right: 12 })
      //背景颜色
      .backgroundColor($r('定义背景颜色'))
      //  //自定义布局的 名字 index位置，点击后和点击其他需要展示的图片
      .tabBar(this.TabBuilder('我的详情', 1, $r('被点击后展示的图片'), $r('被动展示图片')))
    }
    .width('100%')
    .backgroundColor(Color.White)
    .barHeight(56)
    .barMode(BarMode.Fixed)
    .onChange((index: number) => {
      this.currentIndex = index
    })

  }