本小程序借鉴了爱鲜蜂模式,专注于提供便捷、新鲜的食品和日常用品在线购买服务。用户可以轻松选购各类生鲜商品,并享受快速配送到家的服务体验。
设计思路如下:
1. 设计底部标签导航:准备底部标签导航的图标,并建立相应的四个页面。
2. 实现首页幻灯片轮播效果:准备好要展示的图片,利用swiper滑块视图容器组件完成轮播效果。
3. 设计首页商品内容:需要提供商品信息包括图片、名称和价格等数据。
4. 首页商品信息动态添加到购物车:使用wx.setStorageSync API将商品数据保存至本地存储中。
5. 闪送超市纵向导航设计:通过swiper滑块视图容器组件实现不同菜单的切换功能,展示对应内容。
6. 购物车内订单信息管理:利用wx.getStorageSync从本地获取并处理购物车中的商品信息。
7. 地址列表界面布局设计:采用view、image等基础组件构建页面,并将新增地址按钮固定在底部(通过position:fixed属性实现)。
相关知识点:
1. app.json配置文件用于设定页面路径、窗口样式、网络超时时间及开启调试模式等功能。
2. swiper滑块视图容器可以用来制作轮播海报和动态切换标签页的内容展示效果。
3. button按钮组件能够将form表单数据提交至服务器后台处理。
4. form表单组件收集用户输入的数据并将其发送给后端,涵盖switch、input、checkbox等不同类型元素的集成使用。
5. picker提供从底部弹出的选择器功能,支持普通选择器、时间选择器和日期选择器三种模式,默认为普通模式。
6. wx.setStorageSync(KEY,DATA)用于将数据存储在本地缓存指定位置中。
7. 通过wx.getStorageSync(KEY),可以从本地缓存同步获取特定键值对应的信息。