基于JS通用组件的鸿蒙购物应用开发

 
 
 
 

  
  
  
  
  
  
  
  
  
      
  
  
  
  
        {{ item }}  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
      
  
  
  
  
          
  
  
  
  
          
  
  
  
  
              
  
  
  
  
                  
  
  
  
  
                      
  
  
  
  
                        {{$item.title}}  
  
  
  
  
                        {{$item.content}}  
  
  
  
  
                          
  
  
  
  
                            ￥  
  
  
  
  
                            {{$item.price}}  
  
  
  
  
                          
  
  
  
  
                    

不同标签页图标切换(点击应用的正下面的不同标签，页面会随之切换，被选中的页面图片变红)，图片示例和代码如下：

购物车页面：用户可以把选中的商品加入购物车，然后可以选中想要拍下的商品，进行结算，图片示例和代码如下：

 
 
 
 

  
  
  
  
  
  
  
  
  
      
  
  
  
  
          
  
  
  
  
              
  
  
  
  
              
  
  
  
  
              
  
  
  
  
                {{$item.title}}  
  
  
  
  
              
  
  
  
  
            {{$item.price}} 
  
  
  
  
            元  
  
  
  
  
          
  
  
  
  
              
  
  
  
  
          
  
  
  
  
          
  
  
  
  
      
  
  
  
  
 
 
 
 
 

我的页面布局，图片示例和代码如下：

 
 
 
 

  
  
  
  
  
  
  
  
  
    {{pageWord.myDeals}}  
  
  
  
  
      
  
  
  
  
          
  
  
  
  
              
  
  
  
  
            {{$item.title}}{{$item.num}}  
  
  
  
  
          
  
  
  
  
      
  
  
  
  
 
 
 
 
 

页面路由跳转：用户点击商品浏览页面的任意商品，页面会跳转到商品详情页面，图片示例和代码如下：

 
 
 
 

  
  
  
  
detailPage() {  
  
  
  
  
    router.push({  
  
  
  
  
        uri: "pages/shoppingDetailsPage/shoppingDetailsPage"  
  
  
  
  
    })  
  
  
  
  
}, 
 
 
 
 

滑动容器（swiper）：用户可以在swiper组件上进行滑动 左右切换图片，或者3s自动滑动一次，图片示例和代码如下：

跑马灯组件（marquee）：展示一段单行滚动的文字，图片示例和代码如下：

 
 
 
 

  
  
  
  
          
  
  
  
  
    {{pageInfo.marqueeCustomData}}  
  
  
  
  
 
 
 
 
 

对样式进行动态双向绑定，可以修改"次日达"字体的颜色 ，图片示例和代码如下：

 
 
 
 

  
  
  
  
{{pageInfo.nextDayReach}}  
  
  
  
  
  
  
  
  
  
export default {  
  
  
  
  
    data: {  
  
  
  
  
        textColor: '#FF3536',  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 
 

省市级联选择器和日期选择器以及dialog自定义弹窗容器的实现，图片示例和代码如下：

点击选择会弹出Dialog，页面会有时间选择器和省市级联选择器。

用户在弹出的时间选择器上选择日期，点击确定，页面上的数据也会同时改变。省市级联选择器，同理。

 
 
 
 

  
  
  
  
  
  
  
  
  
    
  
  
  
  
  
        {{pageInfo.selectRewardTime}}  
  
  
  
  
          
  
  
  
  
              
  
  
  
  
          
  
  
  
  
      
  
  
  
  
    
  
  
  
  
  
        {{pageInfo.selectRewardCity}}  
  
  
  
  
          
  
  
  
  
              
  
  
  
  
          
  
  
  
  
      
  
  
  
  
 
 
 
 
 

评分弹框(rating)，图片示例和代码如下：

点击评分，会弹出带有评分弹框的dialog弹窗容器。

 
 
 
 

  
  
  
  
  
  
  
  
  
      
  
  
  
  
          
  
  
  
  
            {{pageInfo.softwareScore}}  
  
  
  
  
              
  
  
  
  
            {{pageInfo.ratingReason}}  
  
  
  
  
              
  
  
  
  
              
  
  
  
  
                {{pageInfo.confirm}}  
  
  
  
  
                  
  
  
  
  
                {{pageInfo.cancel}}  
  
  
  
  
              
  
  
  
  
          
  
  
  
  
      
  
  
  
  
 
 
 
 
 

浏览量页面：chart组件（曲线图可以实时动态更新数据），图片示例和代码如下：

点击立即抢购会弹出一个含有进度条（progress）的弹框 ，图片示例和代码如下：

 
 
 
 

  
  
  
  
 
  
  
  
  
1. 
 
 
 
 

• 说明
• 以上所以代码仅demo演示参考使用。

5. 回顾和总结

本篇Codelab我们介绍了应用的主页面和详情页，两个页面都展示了丰富的HarmonyOS UI组件如下图。

另外，我们还把常用的一些组件运用到到该应用里面，比如：

1.常用的chart图表组件：用曲线动态展示不同时间段的浏览量。

2.rating评分条组件：运用到给软件/该商品打分评价。

3.选择器：省市级类选择器、时间选择器。

图片示例如下：

6. 恭喜您

目前你已经成功完成了Codelab并且学到了：

● 如何使用HarmonyOS UI常用组件。

● 如何实现各页面之间的跳转。

7. 参考

gitee源码

github源码

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

当前文章：基于JS通用组件的鸿蒙购物应用开发
文章网址：http://www.shufengxianlan.com/qtweb/news40/6790.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联