一个仿淘宝的鸿蒙 HAP,使用 js 开发
顶部导航+分类功能栏+活动栏+商品推荐
目前仅为静态图标,未添加事件监听及功能
采用瀑布流的根布局,显示数据库内所有商品推荐信息,点击任一商品单元进入 商品浏览。
布局采用滑动下拉模式,点击商品单元进入该商品的详情页
显示商品的所有信息,包含收藏,加入购物车及分享功能 收藏采用条件渲染,图标可点击切换收藏状态,收藏的同时跳转入收藏页面。 加入购物车自动跳转至购物车页面。 分享可选择聊天好友发送消息连接。
消息处理的最基本需求是实现消息的实时发送接收和历史消息的存储,当前较热门的在线对话的实现是使用WebSocket,并且HarmonyOS应用开发JS API也同时提供了Socket和WebSocket的接口可以直接调用,所以采用了WebSocket作为对话消息系统的框架。
最基本的消息仅包括文本,由用户从输入框输入,点击发送。消息内容不需要进行额外的封装,发送端只需指定目标,消息内容字符串作为WebSocket的发送参数,即可进行发送。
然而在购物应用的对话消息中,除了一般的文本消息外,还有一种常见的消息——商品分享消息。商品分享消息需包含商品标题、商品图片、商品链接(或ID),消息内容有多个种类,相当于需要把一个类的实例化对象进行发送,使用文本消息的发送方式不可行,所以需要对WebSocket发送和接收的消息参数进行规范定义。
Json可以完美地满足发送一个对象的需求,在前端(JavaScript)使用JSON.stringify()方法将JavaScript对象转换为字符串,转换后的字符串就可以作为文本消息发送,在后端使用Gson的fromJson把消息进行解析,解析出来就是一个对象,包括前端序列化对象的所有值。
由于对话消息包括文本消息和商品分享两种类型,所以需要在前后端约定不同消息类型的类型码(如字符串消息类型为1),在发送和接收不同类型消息时进行不同的消息解析处理。消息类型的约定如下:
type | sender | receiver | content | |
---|---|---|---|---|
字符串消息 | int NORMAL=1 | int | int | String |
商品分享 | int SHARE=2 | int | int | jsonString |
消息被对方屏蔽 | int REJECT=3 | |||
对方不接收商品分享 | int REJECT_SHARE=4 | |||
屏蔽对方 | int BLACK=5 | int | int | |
屏蔽对方分享 | int BLACK_SHARE=6 | int | int |
后端使用的是SpringBoot框架,所以使用SpringBoot整合WebSocket,在同一个Spring后端处理对话消息以及其它网络请求。
后端对消息的处理逻辑大致如下。先是拿到消息字符串,对字符串进行Json解析得到Json对象,然后通过消息类型码判断消息类型,对不同类型的消息分别处理。然后检查消息发送的目标是否拒收来自发送方的消息,如果拒收则给发送方返回拒收消息。否则封装消息,检查目标是否在线,在线则直接发送,离线则将此消息保存在消息数据库,等待目标上线再一次性发送所有消息。
购物车页分有三个子页面:购物车,结算
购物车:显示所有用户加入购物车的商品
结算:显示用户勾选购买的商品订单
实现自定义顶部菜单栏,点击不同的按钮时,改变顶部导航栏和购物车渲染的数据
购物车页面初始化时,从后端获取用户购物车的信息和数据的处理,再对界面进行数据渲染
你可能喜欢商品小卡片的自定义,在购物车底部用瀑布型展示
进行勾选商品时的逻辑处理,勾选不同的商品时,计算勾选商品的总价显示
勾选全选按钮时,计算购物车的全部总价格
点击结算按钮时,跳转到结算页面,把用户勾选的商品和总价传入结算页面并渲染显示
个人中心包括五分小模块,背景色为# f2f2f2,每个小模块背景色为#fefefe。
模块1为个人信息展示;
模块2由“收藏”、“订阅店铺”、“足迹”、“零钱”四个按钮组成;
模块3我的订单由“待付款”、“待收货”、“待发货”、“待评价”、“退款/售后”五个按钮组成;
模块4由“会员中心”、“领券中心”、“红包卡劵”、“红包签到”四个按钮组成;
模块5由“收货地址”、“官方客服”、“我的快递”、“我的评价”、“领券中心”、“来摇现金”、“店铺会员”、“更多”八个按钮组成。
我的地址包块两个子页面和三个模块组成,背景色为# f2f2f2,每个小模块背景色为#fefefe。
我的订单包括三个小模块,背景色为# f2f2f2。
我的收藏包括三个小模块,背景色为# f2f2f2。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。