网站开发设计开题报告,开发手机app需要学什么知识,瑞昌网站建设,深圳公司网站设计公司HarmonyOS应用开发实战#xff08;实现电商首页#xff09; 1. 项目涉及知识点罗列2. 项目目录结构介绍3. 最终的效果图4. 部分源码展示 1. 项目涉及知识点罗列
掌握HUAWEI DevEco Studio开发工具掌握创建HarmonyOS应用工程掌握ArkUI自定义组件掌握Entry、Component、Builde… HarmonyOS应用开发实战实现电商首页 1. 项目涉及知识点罗列2. 项目目录结构介绍3. 最终的效果图4. 部分源码展示 1. 项目涉及知识点罗列
掌握HUAWEI DevEco Studio开发工具掌握创建HarmonyOS应用工程掌握ArkUI自定义组件掌握Entry、Component、Builder等装饰器掌握State、Link等状态管理装饰器掌握Column、Row、Flex、List、Text、Image、Tabs、Scroll等系统组件掌握资源的定义和应用
2. 项目目录结构介绍 3. 最终的效果图 4. 部分源码展示
import Home from ../components/Home;
import { MainPageConstants } from ../constants/MainPageConstants;
import { TabBarData, tabBarData } from ../viewmodel/MainPageData;/*
* 电商主页
*/
Entry
Component
struct MainPage {State currentIndex: number 0;// 自定义底部导航图标Builder TabBar(tabBarData: TabBarData) {Column({space: MainPageConstants.TAB_SPACE}) {Image(this.currentIndex tabBarData.index ? tabBarData.selectImg : tabBarData.img).height($r(app.float.main_page_tab_image_size)).width($r(app.float.main_page_tab_image_size))Text(tabBarData.title).fontSize($r(app.float.main_page_tab_title_size)).fontColor(this.currentIndex tabBarData.index ? $r(app.color.main_page_tar_title_select_color) : Color.Black)}}build() {Tabs({index: this.currentIndex,barPosition: BarPosition.End}) {// 首页TabContent() {Home()}.tabBar(this.TabBar(tabBarData[0]))// 新品TabContent() {Column() {Text($r(app.string.main_page_tab_product)).fontSize($r(app.float.product_page_text_size))}.height(MainPageConstants.FULL_HEIGHT).width(MainPageConstants.FULL_WIDTH).justifyContent(FlexAlign.Center)}.tabBar(this.TabBar(tabBarData[1]))// 购物车TabContent() {Column() {Text($r(app.string.main_page_tab_cart)).fontSize($r(app.float.product_page_text_size))}.height(MainPageConstants.FULL_HEIGHT).width(MainPageConstants.FULL_WIDTH).justifyContent(FlexAlign.Center)}.tabBar(this.TabBar(tabBarData[2]))// 我的TabContent() {Column() {Text($r(app.string.main_page_tab_personal)).fontSize($r(app.float.product_page_text_size))}.height(MainPageConstants.FULL_HEIGHT).width(MainPageConstants.FULL_WIDTH).justifyContent(FlexAlign.Center)}.tabBar(this.TabBar(tabBarData[3]))}.backgroundColor($r(app.color.main_page_background_color)).onChange((index: number) {this.currentIndex index;})}
}ps需要完整源码的同学可以在评论区留言
