07微信小程序开发综合案例：仿“华为商城”微信小程序.pptxVIP

第7章综合案例：仿“华为商城”微信小程序微信小程序开发图解案例教程（附精讲视频）（第3版）人 民 邮 电 出 版 社综合案例：仿“中国婚博会”微信小程序仿“华为商城”微信小程序是一个电子产品的购物商城小程序，用户从中可以购买手机、笔记本电脑、平板电脑等电子产品。小程序提供的功能主要包括“首页”页面显示商品信息、“分类”页面显示商品的分类导航、“我的”页面主要显示和个人相关的一些内容。目录导航7.1 需求描述7.2 设计思路7.3 相关知识点7.4 准备工作7.5 设计流程6.6 小结7.1 需求描述仿“华为商城”微信小程序需要完成以下主要功能。1完成首页显示商品功能设计。首页内容包括搜索区域、海报轮播图片区域、精选商品列表区域、手机列表区域、笔记本电脑列表区域，如图7.1~图7.3所示。2完成“分类”页面里商品导航和导航对应商品显示设计，动态获取导航内容和导航对应的商品，如图7.4所示。图7.1　首页图7.2　手机列表　　图7.3　笔记本电脑列表7.1 需求描述完成“我的”界面设计，包括账号相关设计和列表式导航设计，如图7.5所示。5完成登录设计，包括“账号密码登录”页签和“手机快捷登录”页签，如图7.6和图7.7所示。完成账号注册功能，来获取用户账号信息，如图7.8所示。34图7.4　“分类”页面图7.5 “我的”页面　图7.6 “账号密码登录”页签 图7.7 “手机快捷登录”页签图7.8　注册页面目录导航7.1 需求描述7.2 设计思路7.3 相关知识点7.4 准备工作7.5 设计流程7.6 小结7.2 设计思路设计底部标签导航。准备好底部标签导航的图标，并建立3个相应的页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。设计“我的”页面。先进行“我的”页面布局设计，然后实现通过微信授权用户的方式来获取用户头像和昵称，来实现登录的效果。这也是很多小程序会采用的一种设计方式。除了通过微信授权的方式获取用户，开发者也可以自行设计登录界面。本案例设计了“账号密码登录”和“手机快捷登录”功能。完成登录设计之后，开始设计注册功能来获取用户账号。设计首页功能。首页功能包括搜索区域、海报轮播区域、宫格导航区域、精选商品区域、手机区域、笔记本电脑区域的布局，然后通过API接口动态地获取海报轮播图片列表和商品列表。设计“分类”页面功能。先进行“分类”页面布局设计，然后通过API接口动态获取分类导航信息和导航对应商品列表。目录导航7.1 需求描述7.2 设计思路7.3 相关知识点7.4 准备工作7.5 设计流程7.6 小结7.3 相关知识点在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件等。scroll-view可滚动视图区域组件用来实现首页精选商品左右滑动效果，以使用户查看所有的商品。swiper滑块视图容器组件用来实现海报轮播效果、“账号密码登录”和“手机快捷登录”页签切换效果、分类导航内容切换显示。界面样式设计。需要写一些wxss样式进行界面的美化和渲染。经常会用到flex弹性布局设计，来更好地进行页面布局设计。网络请求wx.request（object）用来发起请求服务器端API接口数据。本案例的数据是通过服务器端接口提供的。目录导航7.1 需求描述7.2 设计思路7.3 相关知识点7.4 准备工作7.5 设计流程7.6 小结7.4 准备工作我们需要准备一个AppID，用来创建项目。底部标签导航，需要有选中图标和默认图标，放置在images/bar文件夹下，如图7.9所示。准备用户密码登录接口文档、用户注册登录接口文档、下发验证码接口文档、手机验证码登录接口文档、获取Banner列表接口文档、获取商品列表接口文档、获取商品分类导航接口文档。文档地址见本书配套资源。目录导航7.1 需求描述7.2 设计思路7.3 相关知识点7.4 准备工作7.5 设计流程7.6 小结7.5.1　“我的”界面列表导航设计仿“华为商城”微信小程序底部标签导航分为3个：“首页”“分类”“我的”。底部标签导航选中时图片是红色，文字颜色也是红色，非选中状态呈现为灰色。“我的”界面采用列表式导航设计方式，这也是很多App和小程序都会采用的一种设计方式，如图7.10所示。图7.10　“我的”界面效果7.5.1　“我的”界面列表导航设计创建“hwshop”仿华为商城项目，不使用云开发。在app.json文件配置“首页”“分类”“我的”底部标签导航，配置“首页”“分类”“我的”页面路径。代码如下{ pages: [pages/ind