- 博客(43)
- 收藏
- 关注
RSS订阅原创 《仿盒马》app开发技术分享-- 订单列表页（端云一体）
要实现这么一个功能我们首先就需要实现页面的切换功能，这里我们使用tabs组件，之后我们在tabcontent中添加对应的页面组件，对应当前展示的订单状态，分别有待发货、待收货、已完成这些状态，我们需要在切换到对应页面的时候进行订单的查询，注意tabcontent加载后再次切换时不会再执行生命周期方法，我们还需要进行切换时的请求处理，保证订单列表的实时性。首先实现一个切换的页面，并且添加对应的组件，这里我们暂时实现一个，其他的我们如法炮制即可，我们来实现待发货页面。然后实现切换后的查询代码。
2025-05-29 22:26:45
397
原创 《仿盒马》app开发技术分享-- 订单详情页（端云一体）
在之前的章节中我们实现了订单的提交，以及提交之后跳转到确认订单页面，在确认订单页面我们添加了一个入口，这个入口是查询订单，当我们点击入口时，我们需要跳转到一个新的界面，这个界面通过接收上个界面的订单id或者订单code 等信息，进行订单的详细内容展示要想实现订单内容的展示，首先我们要解决订单查询的问题，之前的订单提交页面，因为我们做了一张关联表，把提交的商品放置到了一张单独的表中，通过order_product_id去做关联查询，所以我们还需要根据id 把对应的商品列表查出来，然后我们再查出对应order_
2025-05-29 20:55:27
513
原创 《仿盒马》app开发技术分享-- 订单地址修改（端云一体）
要实现这样一个页面，首先我们要做的就是在这个页面我们能拿到用户的信息，对应的订单id，这样的话我们就可以通过一个查询订单的按钮或者入口进入到订单的详情界面，然后我们需要有一个地址确认的页面，这能帮助用户核对地址的准确性，同时我们还需要提供一个地址修改的信息展示，辅助用户进行错误地址的修改。当我们的地址需要修改，我们点击修改地址按钮，来到订单地址修改页，我们依旧要接收对应的数据集在当前页面加载，我们展示的内容有当前选择的地址，以及要修改的地址，要修改的地址我们从地址列表也重新选择实现。
2025-05-28 22:01:15
637
原创 《仿盒马》app开发技术分享-- 确认订单页（业务逻辑）（端云一体）
上一节我们实现了确认订单页的页面绘制和价格计算优惠计算，订单列表展示等功能，这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择，然后把我们计算的价格，商品列表等数据保存起来，然后我们开始创建订单表实体类等，把这些数据提交到订单表中。要想实现确认订单的功能，首先我们要创建对应的表，我们需要注意的数据有当前订单对应的userid，表的id，以及表携带的数据，订单的创建时间，完成时间，退单时间，订单编号，付款方式，备注等，还要注意商品列表多条时如何有效插入和查询的问题。
2025-05-28 16:35:26
718
原创 《仿盒马》app开发技术分享-- 确认订单页（数据展示）（端云一体）
上一节我们实现了地址的添加，那么有了地址之后我们接下来的重点就可以放到订单生成上了，我们在购物车页面，点击结算会跳转到一个 订单确认页面，在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。要想实现确认订单页面的功能，我们只需要从购物车页面把加购的列表传递过来，然后根据列表中的buyamount 以及price 去计算对应的价格和加购数量，然后我们通过划线价去计算我们的优惠。最后确认无误提交订单。数据接收成功之后我们绘制收货地址模块，以及列表展示模块，价格计算模块的ui。
2025-05-27 22:37:41
862
原创 《仿盒马》app开发技术分享-- 新增地址（端云一体）
上一节我们实现了地图选点，获取当前位置，在地图上添加标记，根据当前的定位获取poi地址列表等功能，这些全部都为了我们这一节而铺垫，这一节我们要实现的是新增地址，把我们的用户信息，填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中，然后在地址查询列表里展示出来。然后我们创建一个新增地址页面在生命周期事件中接收，因为这个页面我们后期会展示用户选择的地址的位置，所以我们需要实现一个堆叠布局，把信息填写放置在地图之上展示。首先我们在地图选点页面，在列表的点击事件中传递我们点击的条目数据。
2025-05-26 22:05:20
1059
原创 《仿盒马》app开发技术分享-- 地图选点（端云一体）
要想实现这些功能，首先我们需要在地图加载之前获取当前的经纬度，根据经纬度查询附近的poi地址，然后我们获取这些poi地址展示到列表内，同时我们根据当前位置计算出与列表内地址的直线差距。上一节我们实现了地图的简单展示，这一节我们要实现的内容是，根据展示的地图，实现当前定位功能，当前位置的poi地址功能，以及列表的展示，给地图添加标记，展示自己的当前定位。这样我们就已经实现了地图上的标记以及当前位置的展示，我们执行一下代码查看一下效果。
2025-05-26 16:44:34
713
原创 《仿盒马》app开发技术分享-- 原生地图展示（端云一体）
地图的展示，我们需要在管理中心先给我们对应的应用开启地图api功能，否则是不能展示的，其次是我们要配置自签，不配置的话也是无法使用地图功能，然后我们还需要注意应用是否开启了联网权限，如果这些都已经完成，那么我们在地图显示之前还需要进行权限时候获取的校验。上一节我们实现了获取当前用户的位置，并且成功的拿到了经纬度，这一节我们就要根据拿到的经纬度，结合我们其他的知识点来实现地图的展示。到这里我们的地图展示就实现了，我们执行一下代码看看效果。可以看到我们的地图已经成功展示出来了，完整代码如下。
2025-05-25 22:17:32
598
原创 《仿盒马》app开发技术分享-- 定位获取（端云一体）
上一节我们实现了地址管理页面的数据查询和展示，接下来我们要实现的功能是地址添加相关的，我们想实现的功能是地图选点，那么在地图选点之前我们要做的就是先获取用户当前的定位。要想实现定位功能，首先我们需要给应用申请定位权限，然后我们每次进入页面之前需要先进行定位功能是否开启的判断，如果没有开启我们要提示用户去开启，之后我们才是对定位请求的开启判断，用户同意之后获取当前的定位，在返回值中拿到经纬度。如果用户开启了定位，并且我们没有开启应用的定位权限，在当前页面的底部提醒用户，去开启定位。
2025-05-25 21:25:09
752
原创 《仿盒马》app开发技术分享-- 地址管理页（端云一体）
上一节我们实现了个人信息页面的信息展示和页面修改，并且实现了数据的同步修改，这一节我们来实现电商应用里比较重要的模块，地址模块。地址列表的展示相对来说是比较简单的，首先我们要新增对应的表，然后在云端先添加几条测试数据，然后在页面中实现当前用户对应的地址查询，在列表组件中进行展示。可以看到我们已经有了两条测试数据，接下来我们就可以创建对应的页面开始查询我们云数据库的数据了。我们的断点中可以看到已经查询出了我们对应的两条数据，然后我们把它展示到列表中。然后我们点击新增进行数据的插入，插入后我们点击查询。
2025-05-25 19:43:29
880
原创 《仿盒马》app开发技术分享-- 个人信息页（端云一体）
个人信息页面的展示，我们需要通过个人中心的入口进入，个人中心页面首先要根据user_id来查询我们用户相对应的信息，然后在页面进行展示，然后我们点击某些可以修改的选项，弹出编辑弹窗在数据库层面进行修改，同时在页面实时刷新。可以看到数据已经展示到页面上，接下来我们进行数据的修改，首先是头像的修改，因为之前我们已经创建了对应的弹窗但是没有实现对应的逻辑，这时候我们只需要在点击事件中添加对应的修改逻辑即可。然后创建对应的个人信息展示页面，并且在生命周期中查询对应的userid对应的个人信息。
2025-05-24 14:37:13
594
原创 《仿盒马》app开发技术分享-- 个人中心页or静态头像选择（业务逻辑）（端云一体）
上一节我们实现了登录页面的业务逻辑，并且成功的实现了数据的查询，同时我们新增了用户首选项的工具类，现在主界面往登录页面跳转，登录成功后我们关闭登录页面，这时候我们就会回到个人中心页面，那么现在我们的业务逻辑是一种什么样的形式？然后解决切换时自定义组件不刷新的问题,我们在index页面定义一个下标的tag ，然后通过@prop 传进组件内，通过监听来执行我们想要的方法。现在我们切换的问题解决了，接下来要解决的是数据的传输，在上方的back中我们把用户信息传递到了index页面，所以我们需要接收一下。
2025-05-23 16:32:56
700
原创 《仿盒马》app开发技术分享-- 用户登录页（业务逻辑）（端云一体）
上一节我们实现了静态的用户登录页，这一节我们需要给他添加上业务逻辑，实现跟云数据库的互通，同时跟整个应用关联起来，因为我们还没有实现用户的注册页面，所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验，我们在云端先插入几条数据，暂时专注于查询即可。现在我们可以完善相关的业务逻辑了，我们需要处理的有，数据的查询，状态的判断，根据是否注销，是否有对应的账号密码，来执行对应的逻辑。登录页的业务逻辑主要还是针对用户输入的账号密码跟数据库存储的信息是否匹配，用户登录成功之后对当前信息的存储和使用。
2025-05-22 16:09:43
1196
原创 《仿盒马》app开发技术分享-- 用户登陆页面（静态）（端云一体）
上一节我们实现了个人中心页面的静态展示，项目进行到这里呢，我们也是时候添加用户相关的内容了， 因为到了后期，我们的数据都是跟用户绑定的，各个用户之间的数据并不互通，现在为了实现我们的用户绑定制度，我们需要给应用添加一个用户登陆的入口的。用户登陆页面的内容相对来说比较简单，我们首先要实现的就是登陆页的静态页面，需要展示的内容不多，包括logo，账号密码的输入框，登陆按钮，请求状态等，之后我们会在页面中添加相应的业务逻辑使他更丰富一些。实现之后呢，我们看一下执行的效果如何。到这里我们的静态页面就实现完成了。
2025-05-22 13:53:54
281
原创 《仿盒马》app开发技术分享-- 个人中心页面（端云一体）
上一节我们实现了分类页面的所有联动效果，这一节我们要开始完成一个新的页面，这个页面是我们主界面的第四个板块，就是个人中心页面。要实现个人中心页面，首先我们要规划好整体的布局，我们选择从上到下实现，分为三块，一块显示用户信息，一块显示关键信息，一块用来展示用户相关的各种入口列表。这里的url 类型我们注意写成多类型，这样后期我们的内容要修改，我们的改动就会比较小。new SectionLine(“地址簿”,添加完成后我们来到页面完善我们设计的三块内容。new SectionLine(“订单”,
2025-05-21 16:56:43
1011
原创 《仿盒马》app开发技术分享-- 分类右侧商品列表（端云一体）
当我们选择顶部一级分类列表时，左侧列表展示二级分类列表，右侧商品列表展示二级分类列表下的同品类商品，这时候我们需要很好的控制它们之间的联动效果，保证我们每次的切换，对应的列表都能够正常的刷新，同时也要注意数据之间的对应关系，及时的修改对应的id来帮助我们实现数据的查询。因为我们是用左侧列表的right_id字段来进行查询的所以，需要在左侧list的item点击事件中先把值传给我们定义的变量，同时监听这个变量，当它修改的时候我们及时触发列表刷新。之后我们因为在左侧list中可能会点击不同的条目。
2025-05-21 15:08:09
675
原创 《仿盒马》app开发技术分享-- 分类左侧列表（端云一体）
这里比较考验我们对联动效果的整体把控，要实现这个功能，我们需要把弹窗选中的id，列表选中的id，首次进入页面默认选中情况下的id利用起来，作为列表查询的条件进行数据的查询，以及后续list列表数据的展示。上一节我们实现了分类页面的顶部导航栏全选弹窗列表，并实现了跟顶部列表的点击选中联动效果，这一节我们要实现的功能是，分类模块的左侧列表，它同样也需要跟弹窗列表的点击，顶部列表的点击有联动的效果。可以看到我们当前选择的分类是酒水饮料，左侧的细分列表是白酒和啤酒，现在我们点击其他类目。
2025-05-21 11:39:26
867
原创 《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（端云一体）
自定义弹窗的实现，然后我们需要在弹窗创建的时候实现数据的同步，当我们在弹窗未出现的时候进行列表下标的切换，打开弹窗的时候需要把对应的index传递进去，选中状态要保持同步。同时在弹窗内选择分类，外部列表也要同步切换，并且每次切换都要在list允许居中的情况下实现选中的item居中。上一节我们实现了分类页面的顶部导航栏列表，并且实现了首页金刚区跟首页导航栏的联动，这一节我们实现导航栏列表的弹窗功能，需要学习的知识点有自定义弹窗，同时我们的数据源需要跟分类页保持一一致。Text(‘全部分类’)
2025-05-20 20:31:46
267
原创 《仿盒马》app开发技术分享-- 分类模块顶部导航列表（端云一体）
上一节我们实现了购物车商品列表的大部分功能，实现了商品的添加、删除、增减、价格计算等业务，并且都跟云端进行通信。现在我们继续对项目进行改造，这一节我们要改造的内容是分类页，这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式，并且我们的金刚区也要实现分类页的点击联动。分类列表我们要注意首页跳入切换到对应item的情况，点击时item对应的字体、背景色等状态的变化，以及list的切换。可以看到已经实现了跳转到分类并且选中我们在金刚区点击的item了。首先我们要对金刚区的数据进行一个改造。
2025-05-20 16:37:30
562
原创 《仿盒马》app开发技术分享-- 购物车功能完善（端云一体）
这一节我们在这些功能的基础上实现云端记录，因为我们现在只有数据的查询是从云端获取的，其他的操作虽然都实现了相对应的功能，但是当我们操作完，关闭app，再打开不会有对应的记录，有的同学可能会说，那我们把数据用首选项或者数据库的形式存储就可以了吧？商品删除我们使用ListItem的swipeAction 已经实现，但是我们的删除现在是在list中splice，看似我们删除了数据，但是这个数据源重新进入页面就又恢复了，这里我们需要用云数据库的delete函数进行数据的真删除。
2025-05-14 21:54:46
522
原创 《仿盒马》app开发技术分享-- 购物车基础功能实现（端云一体）
上一节我们实现了加入购物车和购物车列表的简单展示。对一个电商类的应用来说，这很显然是不够的，我们的购物车内容应该更加的丰富，他需要用户能自主的去选择想要结算的商品，删除一些不需要的商品，或者取消掉一些本次不结算的商品，同时根据选择的不同，我们需要把相对应的价格和选择的数量等信息传递给用户，帮助用户节省更多的时间。
2025-05-14 16:47:48
712
原创 《仿盒马》app开发技术分享-- 加入购物车&加购列表展示（端云一体）
当然了，作为一个购物类的应用，我们仅仅展示是用处不大的，我们还需要有添加的动作。我们已经实现了弹窗，加入购物车就需要在切换规格的同时，点击提交对应的数据，这里要注意，我们针对同一个数据，是不需要创建多条的，仅仅需要修改加购的商品数量即可，所以这里我们还需要先查在加，防止同一条数据分开生成多条。可以看到数据已经查询出来了，到这里我们的功能就实现了， 下一节我们将要针对购物车进行详细的教学。接下来我们实现加购列表，首先进行页面的创建，在生命周期函数里进行数据的查询。还是比较简单的，我们执行一下看看效果。
2025-05-13 22:39:07
1143
原创 《仿盒马》app开发技术分享-- 商品规格弹窗（端云一体）
上一节我们实现了商品详情页面，并且成功在页面上展示了商品的图片、商品规格、活动详情等信息，要知道同一种商品大多数都是有多种型号跟规格的，所以这一节我们来实现商品的规格弹窗。规格弹窗，我们的数据源需要根据当前商品的specid当条件去规格表里查询对应的数据，需要我们针对id做一个查询。点击不同的选项可以查看不同规格的商品，同时可以自己添加和减少商品数量，到这里我们的弹窗就实现了。弹窗的唤起逻辑是我们点击规格列表时，以及点击加入购物车时，这时候我们再去选择对应的规格。“name”: “红颜草莓”,
2025-05-13 14:00:56
565
原创 《仿盒马》app开发技术分享-- 商品详情页（端云一体）
商品详情页面的结构需要我们去用比较多的布局去处理，首先因为商品详情页面对的数据足够多，需要他能够实现滚动查看信息，然后我们需要在底部固定加入购物车和立即购买按钮，并且我们加购之后，我们也要在页面中即使响应购物车中的商品数。商品详情页面我们需要展示的是商品的各个属性参数、商品的图片、商品规格、活动详情等。我们先进行数据的填充，因为上一节我们已经接收到数据，所以我们直接吧数据打印到text上，对着数据进行填充，同时还能帮我们暂时丰富一下页面内容，查看滑动的效果，页面完善之后我们再去删掉即可。
2025-05-12 14:51:45
364
原创 《仿盒马》app开发技术分享-- 自定义标题栏&商品详情初探（端云一体）
当我们进入二级三级页面的时候，就需要向用户介绍我们当前的页面信息，标题栏很好的实现了这个效果，并且进入的页面级别过多，也要给用户一个可点击的退出按钮。上一节我们实现了顶部toolbar的地址选择，会员码展示，首页的静态页面就先告一段落，这节我们来实现商品列表item的点击传值、自定义标题栏。页面之前的数据传递，是app中比较常见也是比较重要的知识点，这里我们通过点击列表的条目进行数据的传递，然后在详情页进行数据的接收。首先我们需要创建一个商品详情页的页面，然后把我们的自定义标题栏引入进去。
2025-05-11 22:39:46
564
原创 《仿盒马》app开发技术分享-- 首页地址选择&会员码（端云一体）
让我们的首页功能更加的丰富，截至目前首页板块可以说是完成了百分之五十了，跟展示有关的基本都已完成，接下来就是我们对业务逻辑的完善，当然了我们的首页内容还缺少很多，这一节我们来把顶部toolbar的地址选择，会员码展示实现一下。地址选择我们需要实现的是省市区街道的选择，当我们点击街道信息后，根据区域的不同，我们可能会调整首页相应的活动板块修改，以及不同模块的展示，比如我们的新人领券活动，我们仅在A区域开展活动，当我们切换的B区域就会关闭相应的功能展示。可以看到直接就拉起了地区选择的页面。
2025-05-10 17:02:28
543
原创 《仿盒马》app开发技术分享-- 首页商品流（端云一体）
上一节我们实现了首页banner模块的功能，现在我们的首页还需要添加商品列表，作为一个购物类应用，商品列表是非常重要的一个模块，所以我们尽量把它设计的足够完善，参数能更好的支持我们后期复杂的逻辑，它需要有图片的展示，适配的优惠券列表，限购，立减，划线价等，但他实际的参数还要更多，因为我们的列表是比较紧凑的，更多的数据需要从点击后的商品详情页展示出来。“endTime”: “直降 ｜ 结束时间2025年5月18日 10:00”,“endTime”: “直降 ｜ 结束时间2025年5月18日 10:00”,
2025-05-09 14:49:17
802
原创 《仿盒马》app开发技术分享-- 首页banner（端云一体）
上一篇文章中我们实现了项目端云一体化首页商品活动入口列表，现在我们还差一个banner的模块，banner模块不仅可以用于展示一些信息，还可以在点击之后进行，跳转，弹窗，升级提示，信息提示等作用，我们直接坐的完善一些，因为我们事先在banner表中添加了action，我们通过这个action的值来进行对应的处理,同时通过islogin字段来判断是否需要登陆操作。由于我们缺少banner相关的内容，所以我们还需要创建一个banner的页面。//tabs 当前数据源的下标。
2025-05-08 16:46:40
558
原创 《仿盒马》app开发技术分享-- 首页活动配置（端云一体）
上一篇文章中我们实现了项目端云一体化首页部分模块动态配置，实现了对模块模块的后端控制显示和隐藏，这能让我们的app更加的灵活，也能应对更多的情况。现在我们来对配置模块进行完善，除了已有的模块以外，我们还有一些banner ，活动入口等模块，这些模块的数据并不多，所以我们也归纳到配置中去实现。接下来我们进行数据查询，因为我们在配置表中添加了id ，所以我们要查询出对应id的活动入口。可以看到我们添加的对应id的数据已经能够看到了，到这里我们就实现了活动配置相关的内容。实现横幅海报，商品活动入口。
2025-05-08 14:46:57
501
原创 《仿盒马》app开发技术分享-- 首页模块配置（端云一体）
上一篇文章中我们实现了项目端云一体化金刚区活动模块，数据也成功的从云端获取，并且我们跟ScrollBar进行关联，能够让用户直观的查看当前滑动的位置。现在我们开始继续向下，随着我们首页的内容越来越多，我们如果因为某些业务需要进行调整和下线，想隐藏和关掉某些模块，就需要每次在打包的时候进行处理，这很明显会非常的麻烦，现在我们通过一张表来对首页的整个模块进行控制，这样每次做展示的时候去进行查询当前状态来实现想要的效果。创建完成之后，记得要在开发工具中把数据提交到云端，我们把数据提交到云端后。
2025-05-07 09:41:37
1006
原创 《仿盒马》app开发技术分享-- 金刚区（端云一体）
金刚区的实现我们之前已经完成了，但是数据的获取都是本地的静态数据，现在我们要获取云端的数据，实现数据的展示，同时要把滚动跟bar 关联起来，让用户能看到当前滑动到什么位置。上一篇文章中我们实现了项目端云一体化新人专享券活动模块，数据也成功的从云端获取，现在我们开始继续向下，实现金刚区模块。“txt”: “果蔬肉禽”,“txt”: “冷冻水产”,“txt”: “乳品烘焙”,“txt”: “粮油面点”,“txt”: “酒水饮料”,“txt”: “休闲零食”,“txt”: “婴宠保健”,先创建一个接收数据变量。
2025-04-29 16:09:41
901
原创 《仿盒马》app开发技术分享-- 新人专享券（端云一体）
我们在首页实现了新用户领券中心，数据结构就是 模块的标题、说明、优惠券列表，列表包含优惠券的金额、类型，同时我们还要给券添加一些其他参数，比如领取时间，领取用户等，这时候就又延伸出一个功能，当我们用户没有登录的时候，我们点击立即领取，是需要跳转到用户登录页面的。上一篇文章中我们实现了项目端云一体化的升级，我们的数据后期就要从云侧的数据库去获取了，现在我们从头开始对项目进行端云一体化的改造。现在我们继续进行功能开发，把这个组建的本地数据展示修改为端侧获取。然后修改我们之间创建的新人活动的组件。
2025-04-28 14:57:13
248
转载 HarmonyNEXT新闻应用可做毕设和大作业
这里只需要使用Image组件来展示图片（ps：可以加载本地资源和网络图片链接，如果加载了网络图片不要忘记申请联网权限），text组件来展示文本，并且使用属性来对样式进行调整即可。要想实现数据的监听，我们首先就要进行变量的定义，这样方便我们去根据获取的值处理业务逻辑，arkui中有@state 可以监听修饰变量的值，所以我们的变量都用它来进行修饰。本文默认您已经对arkui的相关组件有了大致的认知，如果是0基础，建议先看一下官方的入门视频，了解各个组件的实现。要实现登录和注册功能，我们要做如下准备。
2024-09-13 08:59:59
208
3原创 鸿蒙开发编译器出现 Please check @ohos/hvigor configuration and sync
重新修改为如下版本，点击。此时编译器出现如下错误。项目构建完成，问题解决。
2024-03-29 11:39:02
1740
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人