[文章]使用JS实现一款简单的HarmonyOS购物应用

阅读量0
0
3
1. 介绍      
本篇Codelab将会使用UI组件开发出一个HarmonyOS购物应用。
HarmonyOS为开发者提供了多种组件,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。开发者只需要关注实现逻辑,减少开发量。

最终效果预览

我们最终会构建一个简易的购物应用。应用包含两级页面,分别是主页(商品浏览页签、购物车页签、我的页签)和商品详情页面,两个页面都展示了丰富的HarmonyOS UI组件,包括:自定义弹窗容器(dialog),列表(list),滑动容器(swiper),页签组件(tabs),按钮组件(button),图表组件(chart),分隔器组件(divider),图片组件(image),交互式组件(input),跑马灯组件(marquee),菜单组件(menu),滑动选择器组件(picker),进度条组件(progress),评分条组件(rating),搜索框组件(search)。

商品浏览页面和商品详情页面如下图:
31.png


2. 搭建HarmonyOS环境
我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。
  • 安装DevEco Studio,详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:
    • 如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境。
  • 开发者可以参考以下链接,完成设备调试的相关配置:
    • 使用真机进行调试
    • 使用模拟器进行调试
你可以通过如下两种方式完成本篇Codelab:
  • 开启开发者模式的HarmonyOS真机。
  • DevEco Studio中的手机模拟器。
   

3. 代码结构解读      
本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在7 参考中提供下载方式,接下来我们会用一小节来讲解整个工程的代码结构:
  • entry/src/main/js/default/common 文件夹存放一些公共的资源,比如图片。
  • entry/src/main/js/default/pages 文件夹存放 HarmonyOS JS的页面,包含css、hml、js三类文件。
  • entry/src/main/config.json:配置文件。

   

4. 页面详细解析      
接下来,我们就可以编写css、hml、js代码了。
搜索框组件(search):用于提供用户搜索内容的输入区域,图片示例和代码如下:
页面展示:

  1. <search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" focusable="true" @change="searchColumn" @submit="submitColumn">
  2. </search>
复制代码

tab页签容器(tabs),图片示例和代码如下:
<tabs>的子组件(tab-bar):用来展示tab的标签区。
<tabs>的子组件(tab-content):用来展示tab的内容区。
注:用户可通过左右滑动或点击不同tab标签区,来显示不同tab标签区的内容区
32.png
33.png

  1. <tabs class="tabs" index="0" vertical="false" onchange="change">
  2.         <tab-bar class="tab-bar" mode="fixed">
  3.                 <text class="tab-text" for="{{ item in titileList}}">{{ item }}
  4.                 </text>
  5.         </tab-bar>
  6.         <tab-content class="tabcontent" scrollable="true">
  7.                 <div class="item-content" for="{{ item in contentList}}">
  8.                         <list class="todo-wraper">
  9.                         <list-item for="{{lists}}">
  10.                                 <div class="margin10" @click="detailPage">

  11.                                         <div class="todo-total">
  12.                                                 <text class="todo-title">{{$item.title}}</text>
  13.                                                 <text class="todo-content">{{$item.content}}</text>
  14.                                                 <text class="todo-price">
  15.                                                         <span>¥</span>
  16.                                                         <span>{{$item.price}}</span>

  17.                                                 </text>

  18.                                         </div>
  19.                                         <div class="width30">
  20.                                                 <image src="{{$item.imgSrc}}" class="container-home-image"></image>

  21.                                         </div>

  22.                                 </div>

  23.                         </list-item>
  24.                         </list>
  25.                 </div>
  26.         </tab-content>
  27. </tabs>
复制代码

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

  1. <div class="container-bottom-div" @click="buy" @click="clickBuy">
  2.     <image src="{{icon.buys}}" class="container-bottom-div-image" @click="clickBuy"></image>
  3.     <image src="{{icon.shoppingCarts}}" class="container-bottom-div-image" @click="clickShoppingCart"></image>
  4.     <image src="{{icon.mys}}" class="container-bottom-div-image" @click="clickMy"></image>
  5. </div>
复制代码
购物车页面:用户可以把选中的商品加入购物车,然后可以选中想要拍下的商品,进行结算,图片示例和代码如下:
36.png

  1. <div class="top-comm flex-direction-column">
  2.         <div for="{{ latestList }}" class="flex-direction-column">
  3.                 <div class="container-shopping-list">
  4.                         <input type="checkbox" value="{{$item.price}}" @change="addShopping"></input>
  5.                         <image src="{{$item.imgSrc}}" class="container-shopping-list-image"></image>
  6.                         <div class="container-shopping-list-div">
  7.                                 <text class="container-shopping-list-div-text">{{$item.title}}</text>
  8.         
  9.                                 <text class="container-shopping-list-div-texts">
  10.                                         <span>{{$item.price}}</span>
  11.                                         <span>元</span>
  12.                                 </text>
  13.                         </div>
  14.                 </div>
  15.                 <divider class="container-shopping-list-divider"></divider>
  16.         </div>
  17. </div>
复制代码

我的页面布局,图片示例和代码如下:

  1. <div class="container-my-deals">
  2.     <text class="container-my-deals-text">{{pageWord.myDeals}}</text>
  3.     <div class="container-my-deals-div">
  4.         <div class="container-my-deals-div-div" for="{{transaction}}">
  5.             <image src="{{$item.src}}" class="container-my-image"></image>
  6.             <text class="container-my-text">{{$item.title}}{{$item.num}}</text>
  7.         </div>
  8.     </div>
  9. </div>
复制代码

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

  1. detailPage() {
  2.     router.push({
  3.         uri: "pages/shoppingDetailsPage/shoppingDetailsPage"
  4.     })
  5. },
复制代码

滑动容器(swiper):用户可以在swiper组件上进行滑动 左右切换图片,或者3s自动滑动一次,图片示例和代码如下:
  
38.png

  1. <swiper class="swiper" id="swiper" index="0" autoplay="true" interval="3000" indicator="true" loop="true" digital="false">
  2.     <div class="swiperContent" for="{{ item in swiperList }}">
  3.         <image src="/common/computer/computer{{item}}.png"></image>
  4.     </div>
  5. </swiper>
复制代码

跑马灯组件(marquee):展示一段单行滚动的文字,图片示例和代码如下:

  1. <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}" direction="{{marqueeDir}}" @bounce="onMarqueeBounce" @start="onMarqueeStart" @finish="onMarqueeFinish">         
  2.     {{pageInfo.marqueeCustomData}}
  3. </marquee>
复制代码

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

  1. <text class="content-column-size-mar" style="color : {{textColor}};" @click="changeColor">{{pageInfo.nextDayReach}}</text>

  2. export default {
  3.     data: {
  4.         textColor: '#FF3536',
  5.     }
  6. }
复制代码

省市级联选择器和日期选择器以及dialog自定义弹窗容器的实现,图片示例和代码如下:
点击选择会弹出Dialog,页面会有时间选择器和省市级联选择器。
用户在弹出的时间选择器上选择日期,点击确定,页面上的数据也会同时改变。省市级联选择器,同理。

39.png
40.png

  1. <div class="dialog-div-select">
  2.     <div>
  3.         <text class="dialog-div-select-text">{{pageInfo.selectRewardTime}}</text>
  4.         <div class="dialog-div-select-picker">
  5.             <picker type="date" selected="{{ newDate }}" hours="24" value="{{ newDate }}" @change="changeDate" @cancel="cancelDate"></picker>
  6.         </div>
  7.     </div>
  8.     <div>
  9.         <text class="dialog-div-select-text">{{pageInfo.selectRewardCity}}</text>
  10.         <div class="dialog-div-select-picker">
  11.             <picker type="multi-text" @columnchange="columnTextData" columns="3" range="{{cityList}}" value="{{selectCityList}}" @change="changeCity"></picker>
  12.         </div>
  13.     </div>
  14. </div>
复制代码

评分弹框(rating),图片示例和代码如下:
点击评分,会弹出带有评分弹框的dialog弹窗容器。
41.png

  1. <dialog id="ratingDialog" class="dialog-main" @cancel="cancelrRatingDialog">
  2.     <div class="dialog-div">
  3.         <div class="dialog-div-rating">
  4.             <text class="font-size22 font-weight600">{{pageInfo.softwareScore}}</text>
  5.             <rating numstars="5" rating="{{ratingNum}}" @change="ratingChange"></rating>
  6.             <text class="font-size22 font-weight600">{{pageInfo.ratingReason}}</text>
  7.             <input type="text" placeholder="{{pageInfo.ratingPlaceholder}}" value="{{ratingReason}}" @change="ratingReasonChange"></input>
  8.             <div class="dialog-divs-divider-div">
  9.                 <text class="font-size22 color-deepskyblue" @click="confirmRatingInfo">{{pageInfo.confirm}}</text>
  10.                 <divider vertical="true" class="dialog-divider"></divider>
  11.                 <text class="font-size22 color-deepskyblue" @click="cancelrRatingDialog">{{pageInfo.cancel}}</text>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </dialog>
复制代码

浏览量页面:chart组件(曲线图可以实时动态更新数据),图片示例和代码如下:

  1. <stack class="chart-region">
  2.     <image class="chart-background" src="common/background.png"></image>
  3.     <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
  4. </stack>
复制代码

点击立即抢购会弹出一个含有进度条(progress)的弹框 ,图片示例和代码如下:

  1. <progress class="min-progress" type="scale-ring" percent="{{progress.percent}}" secondarypercent="{{progress.secondarypercent}}"></progress>
复制代码
说明
以上所以代码仅demo演示参考使用。

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

另外,我们还把常用的一些组件运用到到该应用里面,比如:
  • 常用的chart图表组件:用曲线动态展示不同时间段的浏览量。
  • rating评分条组件:运用到给软件/该商品打分评价。
  • 选择器:省市级类选择器、时间选择器。
    图片示例如下

   

6. 恭喜你      
目前你已经成功完成了Codelab并且学到了:
  • 如何使用HarmonyOS UI常用组件。
  • 如何实现各页面之间的跳转。
  

7. 参考      


回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友