微信小程序开发图解案例第8章课件

8.2设计思路及相关知识点目录contents8.1需求描述8.3准备工作8.4设计流程8.1需求描述完成底部标签导航设计、首页海报轮播效果设计和宫格导航设计，如左图所示。在首页里，单击全部分类宫格导航的时候，会进入到全部分类导航界面，把婚博会相关内容的导航集成到一个界面里，如右图所示。8.1需求描述在现金券界面里，将各个商户的现金券以列表的形式展现出来，提供全部、默认下拉菜单效果显示，如左图所示。在婚博会界面里，提供索票的界面，填写个人相关信息，可以进行索票，如右图所示。8.1需求描述在填写表单选择获知渠道时，以弹出窗口的形式提供单选列表，供用户选择获知婚博会的情况，如图所示。8.2设计思路及相关知识点目录contents8.1需求描述8.3准备工作8.4设计流程设计底部标签导航，准备好底部标签导航的图标和建立相应的五个页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。设计幻灯片轮播效果，准备好幻灯片需要轮播的图片；设计宫格导航的时候，先把宫格导航的图标和导航名称存放在js后台里，动态循环展现出宫格导航；在设计全部分类导航的时候，有三块区域内容：玩转婚博会、特色分类、我的婚博会，由于它们三个界面布局方式一样，可以先设计出一个区域，剩下的两个直接复制使用；现金券界面设计难点在于下拉菜单筛选条件设计，需要把筛选条件置于页面顶层，可以通过在样式里设置z-index:999就可以置于最顶层；婚博会索票界面是常规的表单界面，需要把表单数据提交给后台，保存到本地里；8.2.1设计思路8.2.2相关知识点在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form组件、radio单项选择器组件、checkbox多项选择器组件等组件的使用；界面样式设计，需要写一些wxss样式进行界面的美化和渲染；将数据缓存到本地，需要调用wx.setStorageSync这个API接口，进行缓存数据；界面跳转需要使用wx.navigateTo这个API接口，进行界面跳转；8.2设计思路及相关知识点目录contents8.1需求描述8.3准备工作8.4设计流程8.3准备工作需要准备一个AppID，如果没有AppID也没有关系，只不过不能再手机上进行项目的预览，但是在开发工具上开发是没有任何问题的。底部标签导航，需要有选中图片和默认图片，放置在images/bar文件夹下，如下图所示。8.2设计思路及相关知识点目录contents8.1需求描述8.3准备工作8.4设计流程8.4设计流程仿中国婚博会微信小程序，底部标签导航分为五个标签导航：首页、现金券、婚博会、社区、我的，标签导航选中时导航图标会变为红色图标，导航文字会变为红色文字，如下图所示。8.4.1底部标签导航设计海报轮播效果可以在有限的区域内动态\显示不同的广告图片或者商品图片，是很多网站或者App软件都会采用的一种展现方式，在仿中国婚博会微信小程序的首页面里，采用海报轮播效果展示广告图片，如右图所示。8.4.2海报轮播效果设计8.4设计流程宫格导航设计是很多App软件都会采用的一种设计方式，通过这种宫格导航设计，在首页里就给用户明确的入口，用户根据自己的需要进入到相关界面，这就是宫格导航的一种好处，根据导航名称进入到相应的界面，如图所示。8.4.3宫格导航设计8.4设计流程全部分类导航界面集合了中国婚博会所有的导航的入口，分为三类导航：玩转婚博会导航，有订喜宴、拍婚照、找婚庆等服务；特色分类导航，有拍写真、美新娘等服务；我的婚博会导航，有现金券、邀请函、签到礼等服务，这三类导航布局方式一样，可以先设计一类导航，然后直接进行复用，如右图所示。8.4.4全部分类导航设计8.4设计流程在很多的App里都会采用下拉菜单作为筛选条件，下拉菜单里会展现出很多筛选条件供用户选择，现金券界面也是采用下拉菜单来进行条件筛选，分为两类条件：全部、默认，如右图所示。8.4.5现金券下拉菜单筛选条件设计8.4设计流程现金券列表页用来展示商家的现金优惠券，列表里包括商家的图标、商家名称、现金优惠额度以及申请情况，如左图所示。8.4.6现金券列表页设计婚博会索票界面用来进行索要中国婚博会门票，只有有了门票方可参加婚博会，索要门票需要填写自己和爱人的