项目5 体育用品商城应用

项目5体育用品商城应用目录1项目描述2学习目标3知识图谱4技术准备5项目实施6项目小结7AI赋能1项目描述创建一个体育用品商城应用，主界面呈现大号标题“ArkWeb体育用品商城”，底部放置一个“进入商城”按钮，效果如图5-1所示。点击该按钮后，应用通过ArkUI的router路由跳转至商城商品界面，效果如图5-2所示。优惠信息展示效果如图5-3所示，商品添加弹窗效果如图5-4所示。图5-2商品页面效果图图5-1商城首页效果图图5-3优惠信息展示效果图5-4商品添加弹窗效果2学习目标知识目标1．熟悉使用ArkWeb提供的Web组件显示网页的方法2．了解Web组件的生命周期3．熟悉应用侧调用前端页面函数的方法4．熟悉前端页面调用应用侧函数的方法技能目标1．能熟练使用ArkWeb的Web组件搭建项目2．能实现应用侧与Web前端页面的双向通信素质目标1．培养Web与原生应用一体化开发的工程实践能力2．在跨技术栈开发中，养成遵循规范、保障代码质量与协作效率的严谨习惯3知识图谱本项目所涉及的知识图谱以“体育用品商城应用”为核心，系统梳理了构建该应用的核心知识体系。图谱采用中心辐射式结构，在核心主题节点下延伸出六大模块，直观呈现了从ArkWeb简介、Web组件的生命周期、使用Web组件加载页面、Web页面渲染与布局、应用侧调用前端页面函数到前端页面调用应用侧函数的完整学习路径。项目知识图谱如图5-5所示。图5-5项目知识图谱5.4.1ArkWeb简介ArkWeb是鸿蒙系统内置的高性能Web引擎，其提供的Web组件是鸿蒙应用中嵌入Web内容的核心工具，能够实现原生应用与Web内容的无缝融合。在实际开发中，该组件的核心应用场景十分广泛：首先是应用内集成前端页面，可直接复用成熟的Web技术栈开发部分功能，大幅降低跨端开发成本并提升迭代效率；其次是用于浏览器网页浏览场景，支持无痕模式、广告拦截、页面缩放等核心浏览器能力；同时也能作为小程序的渲染载体，高效实现小程序页面的解析与渲染，支撑轻量化应用生态的构建。Web组件的核心控制能力与开发实践：该组件提供了全链路的控制能力，涵盖页面加载状态管理、生命周期监控、JavaScript与鸿蒙原生代码的双向交互、以及严格的安全与隐私保护机制。开发者通过关联WebviewController对象，可精细掌控页面的前进、后退、刷新、执行自定义脚本等操作，还能拦截网络请求与页面跳转，是实现鸿蒙混合应用开发、打通原生与Web边界的关键技术支撑。4技术准备5.4.2Web组件的生命周期核心机制：Web组件具备一套完整的生命周期回调体系，允许开发者在页面加载的不同阶段精准注入业务逻辑，实现对页面状态的精细化管控。这套机制是衔接前端展示与底层逻辑的关键桥梁。生命周期可视化流程图5-6为Web组件从初始化到页面加载完成的完整回调链路。通过监听这些回调事件，开发者可灵活实现加载动画展示、资源预加载、错误拦截处理以及页面加载完成后的初始化操作，保障用户体验的流畅性。应用价值与实践意义：掌握Web组件生命周期，能有效解决页面加载时的状态管理问题。例如在onPageBegin阶段开启加载遮罩，在onProgressChange中实时更新进度条，在onPageEnd阶段关闭加载状态并渲染交互元素，让Web内容的展示过程更加可控、更具交互性。4技术准备图5-6Web组件加载过程中的回调事件5.4.3使用Web组件加载页面01.加载网络页面：Web组件支持通过指定URL直接加载网络上的页面资源，其行为模式与常规浏览器一致。02.加载本地页面：Web组件可通过$rawfile语法加载应用包内rawfile目录下的本地静态资源，如图5-7所示.03.加载HTML格式的文本数据：除了加载完整的页面文件，Web组件还支持通过loadData接口直接加载一段HTML字符串，也可使用DataURL的方式嵌入HTML内容。4技术准备图5-7前端资源文件5.4.4Web页面渲染与布局Web组件为开发者提供了异步渲染和同步渲染两种核心渲染模式，同时支持多种灵活的布局方案。在实际开发中，`FIT_CONTENT`布局模式是实现自然混合布局的关键特性。该模式允许Web组件的高度根据其内部加载的HTML页面实际内容高度自动进行调整，而非固定高度。这一特性打破了Web内容与原生组件的视觉边界，使得Web内容可以与按钮、列表等原生ArkUI组件放置在同一个滚动视图中，实现内容的协同滚动，为用户带来无缝、连贯的交互体验。如图5-6。无论是展示富文本内容，还是集成复杂的H5页面片段，`FIT_CONTENT`都能让Web内容完美融入原生应用界面，避免了传统固定高度布局下的内容截断或留白问题。图5-8

Web组件使用大小自适应页面内容布局4技术准备4.5应用侧调用前端页面函数应用侧可通过runJavaScript()和runJavaScriptExt()方法调用前端页面的JavaScript函数，两者在参数类型支持上存在差异：runJavaScriptExt()支持string和ArrayBuffer两种类型参数，而runJavaScript()仅支持string类型参数。这是原生应用与前端Web页面通信的核心方式之一。应用侧作为主动方，通过特定API触发前端逻辑，实现原生能力对Web内容的动态控制，是混合开发中交互协同的关键环节。核心方法：webviewController.runJavaScript()——该方法允许应用侧直接执行前端页面中定义的JavaScript函数，打破了原生层与Web层的执行边界，实现数据与行为的联动。4技术准备5.4.6前端页面调用应用侧函数核心机制：JavaScriptProxy桥接通信开发者可以通过Web组件的javaScriptProxy方法，将应用侧的对象及其方法注册到前端页面中，从而实现前端JavaScript直接调用应用侧函数的能力。关键优势：通过该方式实现的交互，既保留了Web页面灵活迭代的特性，又获得了原生应用的交互体验，是混合开发模式的核心价值体现。4技术准备5.5.1项目目录结构项目目录结构如图5-9所示。图5-9项目目录结构5项目实施5.5.2项目页面框架搭建（代码实现参见教材）商城首页搭建：使用Navigation和Column布局构建页面骨架，创建标题区域与“进入商城”交互按钮，通过pageStack.pushPathByName方法实现点击按钮后的页面跳转逻辑，完成基础导航链路，如图5-10。商品页基础构建：初始阶段创建空白的Column布局容器，预留Web内容接入的接口位置，为后续嵌入Web页面、加载商品详情信息做好结构准备，保持页面布局的可扩展性，如图5-11。5项目实施图5-10

商城首页效果图图5-11

商品页面效果图5.5.3实现商品页前端页面（代码实现参见教材）我们在rawfile目录下创建了前端页面，其中index.html负责构建页面的基础结构，index.js则承担数据渲染的核心逻辑。通过预先定义商品数据数组，利用JavaScript遍历数据并动态生成DOM元素，将商品名称、价格、图片等信息精准映射到HTML中，最终形成结构清晰、交互基础完善的商品列表页面，如图5-12。图5-12应用端接入前端页面5项目实施5.5.4应用侧使用Web组件接入前端页面（代码实现参见教材）核心接入逻辑实现在商品详情页（Goods.ets）中，我们首先需要引入系统的webview模块，并创建WebviewController实例来管理Web组件的生命周期与行为。随后在build()构建方法中，添加Web组件并配置关键属性：将src参数指定为$rawfile('index.html')，即可将本地编写的前端静态页面无缝嵌入到原生应用界面中，实现Web内容与原生应用的融合，如图5-13。5项目实施图5-13应用端接入前端页面5.5.5实现应用侧调用前端页面函数（代码实现参见教材）为了实现“展示优惠组合”的交互功能，我们需要在原生应用侧与前端H5页面之间建立通信桥梁。首先在应用界面底部添加“展示优惠组合”按钮，绑定点击事件。在按钮的点击回调中，调用WebView控制器的核心方法webviewController.runJavaScript('showSales()')，以此触发前端页面中预定义的JavaScript函数。在前端H5页面中，需提前定义showSales()函数，该函数负责动态修改页面DOM结构，将优惠套餐的价格、组合内容等信息渲染展示在页面顶部，完成从原生指令到前端视图更新的完整流程，如图5-14。核心逻辑：原生调用JS实现跨端交互，动态注入内容。图5-14展现优惠组合信息5项目实施5.5.6实现前端页面调用应用侧函数（代码实现参见教材）为实现前端与应用侧的交互功能（如添加商品），核心步骤分为应用侧方法定义与前端调用两部分：1.应用侧定义：创建ActionClass类，在其中封装addGoods方法，该方法内部实现原生AlertDialog弹窗的显示逻辑，用于反馈商品添加状态。2.桥接注入：通过javaScriptProxy()方法将ActionClass实例对象注入到前端Web页面的上下文环境中，建立原生与前端的通信桥接。3.前端触发：在Web页面的商品“+”号按钮点击事件中，直接调用注入的原生对象方法actionObjName.addGoods(商品名)，即可触发应用侧的弹窗提示，如图5-15。图5-15添加商品成功提示5项目实施5.5.7应用测试模拟器中的测试效果如图5-16所示。5-16模拟器中的测试效果5项目实施6项目小结本项目通过开发一个基于ArkWeb的体育用品商城应用，系统实践了鸿蒙生态下Web与原生应用的融合技术。本项目重点讲解了Web组件的使用、生命周期管理、应用侧与前端页面的双向通信机制，实现了商品展示、优惠信息交互、购物车添加等核心功能。通