第7章电商类：仿京东购物⼩程序
⼩程序开发全案精讲主讲⼈：⼩刚⽼师第7章电商类：仿京东购物⼩程序7.1需求描述及交互分析7.2设计思路和相关知识点7.3搜
索商品⾸界⾯布局设计7.4搜索商品设计⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.5购物车设计7.6我的
订单设计7.7优惠券设计⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.1需求描述及交互分析需求描述（1）完
成搜索商品⾸界⾯的布局设计，包括京东购物的LOGO、搜索区域以及京东好券的设计；⼩程序开发全案精讲第7章电商类：仿京东购物
⼩程序7.1需求描述及交互分析需求描述（2）在搜索商品⾸界⾯⾥，单击搜索京东商品输⼊框，会跳转到搜索界⾯，在搜索界⾯⾥，有
输⼊商品的输⼊框以及经常检索商品的标签；⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.1需求描述及交互分析需
求描述（3）在搜索界⾯⾥，输⼊要检索商品的关键字，可以进⾏商品检索，单击取消按钮会跳回搜索界⾯；⼩程序开发全案精讲第7章电
商类：仿京东购物⼩程序7.1需求描述及交互分析需求描述（4）在购物车界⾯⾥，显⽰购物车⾥的商品，包括商品图⽚、价格、名称、
数量等等信息；⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.1需求描述及交互分析需求描述（5）在我的订单界⾯
，通过列表式导航显⽰全部订单、待付款、待收货、优惠券等等信息；⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.1
需求描述及交互分析需求描述（6）在优惠券界⾯显⽰可以使⽤的优惠券以及已经过期的优惠券；⼩程序开发全案精讲第7章电商类：仿
京东购物⼩程序7.1需求描述及交互分析交互分析（1）搜索商品、购物车、我的订单底部标签导航可以相互的切换，显⽰对应的内容；
（2）在搜索商品⾸界⾯⾥，单击搜索京东商品跳转到搜索界⾯⾥；（3）在搜索界⾯⾥，输⼊商品的关键字后，⿏标离开输⼊框可以进⾏商品的检
索，显⽰检索商品的列表；（4）在搜索界⾯⾥，单击取消按钮可以清空输⼊框内容；（5）在购物车界⾯⾥，可以动态添加商品的数量以及计
算商品的总价格；（6）在我的订单界⾯⾥，单击优惠券导航，可以跳转到优惠券⼆级界⾯⾥；（7）在优惠券界⾯⾥，优惠券待使⽤、已过期、
已使⽤页签可以相互的切换，显⽰对应的优惠券内容。⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.2设计思路及相关
知识点设计思路（1）设计底部标签导航，准备好底部标签导航的图标和建⽴相应的三个页⾯；（2）进⾏界⾯布局的时候，需要使⽤⼩程序
的组件和添加相应的样式；（3）将商品信息保存到本地，需要借助于wx.setStorageSync这个API将商品数据信息同步保存到
本地；（4）获取本地商品信息，需要使⽤wx.getStorageSync这个API从本地同步获取商品信息；（5）设计优惠券顶部页
签切换效果，需要借助于swiper滑块视图容器组件，动态切换不同页签对应的内容；⼩程序开发全案精讲第7章电商类：仿京东购物
⼩程序7.2设计思路及相关知识点相关知识点（1）swiper滑块视图容器组件，可以实现海报轮播效果动态展⽰以及页签内容切换电商小程序源码
效果；（2）wx.setStorageSync将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是⼀
个同步接⼝；（3）wx.getStorageSync从本地缓存中同步获取指定key对应的内容；（4）input 输⼊框组件，⽤来
输⼊单⾏⽂本内容；（5）wx.navigateTo保留当前页⾯，跳转到应⽤内的某个页⾯，使⽤wx.navigateBack可以返回
到原页⾯；（6）wx.redirectTo(OBJECT)关闭当前页⾯，跳转到应⽤内的某个页⾯；⼩程序开发全案精讲第7章
电商类：仿京东购物⼩程序7.3搜索商品⾸界⾯布局设计搜索商品⾸界⾯布局设计⼩程序开发全案精讲第7章电商类：仿京东购
物⼩程序7.4搜索商品设计搜索商品设计⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.5购物车设计购物
车设计⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序7.6我的订单设计我的订单设计⼩程序开发全案精讲第7章
电商类：仿京东购物⼩程序7.7优惠券设计优惠券设计⼩程序开发全案精讲第7章电商类：仿京东购物⼩程序总结搜索商品⾸界⾯布局设计搜索商品设计购物车设计我的订单设计优惠券设计⼩程序开发全案精讲谢谢观看