鸿蒙next 电商实战项目来了

news2025/10/31 16:43:46

前言：

最新在学习鸿蒙next 开发就写了一个demo 今天就分享给大家一下

效果图

在这里插入图片描述

客户端实现

1 底部导航器实现

import choice from '../view/ChoicePage'
import HomePage from '../view/HomePage'
import MyPage from '../view/MyPage'
import Shoppingcar from '../view/Shoppingcar'
import prompt from '@ohos.promptAction';
import common from '@ohos.app.ability.common';





interface TabInterface{
  id:number
  title:string
  icon:ResourceStr
  selectIcon:ResourceStr
}
@Entry
@Component
struct Main {
  private backTime :number=0;
  showtoast(msg:string){
    prompt.showToast({
      message:msg
    })
  }
  //@State message: string = '首页';
  //Tabs组件的控制器，用于控制Tabs组件进行页签切换。
  private controller:TabsController = new TabsController();
  @State
  tablist:TabInterface [] = [{
    id:0,
    title:'首页',
    icon:$r('app.media.shouyeblue'),
    selectIcon:$r('app.media.shouyeblack')
    },
    {
      id:1,
      title:'推荐',
      icon:$r('app.media.tuijianblue'),
      selectIcon:$r('app.media.tuijianblack')
    },
    {
      id:2,
      title:'购物车',
      icon:$r('app.media.shoppingblue'),
      selectIcon:$r('app.media.shoppingblack')
    },
    {
      id:3,
      title:'我的',
      icon:$r('app.media.myblue'),
      selectIcon:$r('app.media.myblack')
    },
  ]
  //存储选择的下标
  @State currentIndex:number = 0
  @Builder
  tabBarItem(item:TabInterface){
    Column(){
      Image(item.id === this.currentIndex ? item.icon:item.selectIcon)
        .width(25)
        .height(25)
        .margin({top:5})

      Text(item.title)
        .fontSize(20)
        .fontColor(item.id === this.currentIndex ? '#1296db':'#2c2c2c')
        .margin({top:5})
    }.height(60)
    .width('100%')
  }

  build() {
    Row() {
      Tabs({index:$$this.currentIndex,controller:this.controller}){
        ForEach(this.tablist,(item:TabInterface)=>{
          TabContent(){
            if (0 ===this.tablist[this.currentIndex].id){
              HomePage()
            } else if(1 === this.tablist[this.currentIndex].id){
              choice()
            } else if(2 === this.tablist[this.currentIndex].id){
              Shoppingcar()
            } else  if(3=== this.tablist[this.currentIndex].id){
              MyPage()
            }
          }.tabBar(this.tabBarItem(item))
        })
      }.barPosition(BarPosition.End)
    }
    .height('100%')
  }

  onBackPress(): boolean | void {
    let nowtime=Date.now();
    if(nowtime-this.backTime<1000){
      const  mContext=getContext(this) as common.UIAbilityContext;
      mContext.terminateSelf()
    }else{
      this.backTime=nowtime;
      this.showtoast("再按一次将退出当前应用")
    }
    return true;
  }
}

网络请求工具类

import http from '@ohos.net.http';
import Logger from './Logger'
import Constants, { ContentType } from '../common/Constants';
import { connection } from '@kit.NetworkKit';
import { healthStore } from '@kit.HealthServiceKit';


export  function   httpRequestGet(url:string,params?:string){
  return httpRequest(url,http.RequestMethod.GET,params);
}
export  function   httpRequestPost(url:string,params?:string){

  return httpRequest(url,http.RequestMethod.POST,params);
}
function  httpRequest(url:string ,method:http.RequestMethod,params?:string):Promise<string>{
   let  httpRequest=http.createHttp();
   let responseResult=httpRequest.request(url,{
     method:method,
     readTimeout:Constants.HTTP_READ_TIMEOUT, //读取超时时间可选  默认 600000
     header:{
       'Content-Type':ContentType.JSON
     },
     connectTimeout:Constants.HTTP_READ_TIMEOUT, //连接超时时间  可选，默认为60000ms
     extraData:params // 请求参数

   });
   let getjson:string='';
   return responseResult.then((value:http.HttpResponse)=>{
      Logger.error("请求状态-- >"+value.responseCode);
      if(value.responseCode===200){
        Logger.error("请求成功");
        let result= `${value.result}`;
        Logger.error("请求返回数据",JSON.parse(result));
        getjson=result;
      }else{
        getjson='';
      }
     return getjson;
   }).catch(()=>{
      //httpRequest.off("headerReceive");
     httpRequest.destroy();
     return '';
   });
}

日志工具类



import hilog from '@ohos.hilog';

class Logger {
  private domain: number;
  private prefix: string;
  private format: string = '%{public}s, %{public}s';

  /**
   * constructor.
   *
   * @param Prefix Identifies the log tag.
   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
   */
  constructor(prefix: string = 'MyApp', domain: number = 0xFF00) {
    this.prefix = prefix;
    this.domain = domain;
  }

  debug(...args: string[]): void {
    hilog.debug(this.domain, this.prefix, this.format, args);
  }

  info(...args: string[]): void {
    hilog.info(this.domain, this.prefix, this.format, args);
  }

  warn(...args: string[]): void {
    hilog.warn(this.domain, this.prefix, this.format, args);
  }

  error(...args: string[]): void {
    hilog.error(this.domain, this.prefix, this.format, args);
  }
}

export default new Logger('HTTPS', 0xFF00)

其他的页面我这边就不展开讲了更多的可以关注我的课程各位同学如果想学习更多的知识可以关注我的B站课程

最后总结：

鸿蒙的 ark ui 非常类似flutter 这种声明式ui 所有的布局都是代码编写的和传统的布局和逻辑分开有些区别刚开始上手的时候可能不适应，慢慢就习惯了还有一点代码嵌套这个其实可以把每个组件抽离出来就可以解决鸿蒙的ark ui 网络部分也是类似前端的http 请求解析json和前端也比较像也有面向对象编程的思想，对前端和移动端同学来说也比较好理解和学习。今天的文章就讲到这里有兴趣的关注我B站教程了解更多鸿蒙开发的知识可以关注坚果派公众号。谢谢