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

1、8.2 设计思路及相关知识点目录contents8.1 需求描述8.3 准备工作8.4 设计流程8.1 需求描述完成底部标签导航设计、首页海报轮播效果设计和宫格导航设计，如左图所示。在首页里，单击全部分类宫格导航的时候，会进入到全部分类导航界面，把婚博会相关内容的导航集成到一个界面里，如右图所示。8.1 需求描述在现金券界面里，将各个商户的现金券以列表的形式展现出来，提供全部、默认下拉菜单效果显示，如左图所示。在婚博会界面里，提供索票的界面，填写个人相关信息，可以进行索票， 如右图所示。8.1 需求描述在填写表单选择获知渠道时，以弹出窗口的形式提供单选列表，供用户选择获知婚博会的情况，如图所示

2、。8.2 设计思路及相关知识点目录contents8.1 需求描述8.3 准备工作8.4 设计流程设计底部标签导航，准备好底部标签导航的图标和建立相应的五个页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。设计幻灯片轮播效果，准备好幻灯片需要轮播的图片；设计宫格导航的时候，先把宫格导航的图标和导航名称存放在js后台里，动态循环展现出宫格导航； 在设计全部分类导航的时候，有三块区域内容：玩转婚博会、特色分类、我的婚博会，由于它们三个界面布局方式一样，可以先设计出一个区域，剩下的两个直接复制使用； 现金券界面设计难点在于下拉菜单筛选条件设计，需要把筛选条件置于

3、页面顶层，可以通过在样式里设置z-index:999就可以置于最顶层； 婚博会索票界面是常规的表单界面，需要把表单数据提交给后台，保存到本地里； 8.2.1 设计思路8.2.2 相关知识点在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form组件、radio单项选择器组件、checkbox多项选择器组件等组件的使用；界面样式设计，需要写一些wxss样式进行界面的美化和渲染；将数据缓存到本地，需要调用wx. setStorageSync这个API接口，进行缓存数据；界面跳转需要使用wx.navigateTo

4、这个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 设计流程仿中国婚博会微信小程序，底部标签导航分为五个标签导航：首页、现金券、婚博会、社区、我的，标签导航选中时导航图标会变为红色图标，导航文

5、字会变为红色文字，如下图所示。8.4.1 底部标签导航设计海报轮播效果可以在有限的区域内动态显示不同的广告图片或者商品图片，是很多网站或者App软件都会采用的一种展现方式，在仿中国婚博会微信小程序的首页面里，采用海报轮播效果展示广告图片，如右图所示。8.4.2 海报轮播效果设计8.4 设计流程宫格导航设计是很多App软件都会采用的一种设计方式，通过这种宫格导航设计，在首页里就给用户明确的入口，用户根据自己的需要进入到相关界面，这就是宫格导航的一种好处，根据导航名称进入到相应的界面，如图所示。8.4.3 宫格导航设计8.4 设计流程全部分类导航界面集合了中国婚博会所有的导航的入口，分为三类导航：

6、玩转婚博会导航，有订喜宴、拍婚照、找婚庆等服务；特色分类导航，有拍写真、美新娘等服务；我的婚博会导航，有现金券、邀请函、签到礼等服务，这三类导航布局方式一样，可以先设计一类导航，然后直接进行复用，如右图所示。8.4.4 全部分类导航设计8.4 设计流程在很多的App里都会采用下拉菜单作为筛选条件，下拉菜单里会展现出很多筛选条件供用户选择，现金券界面也是采用下拉菜单来进行条件筛选，分为两类条件：全部、默认，如右图所示。8.4.5 现金券下拉菜单筛选条件设计8.4 设计流程现金券列表页用来展示商家的现金优惠券，列表里包括商家的图标、商家名称、现金优惠额度以及申请情况，如左图所示。8.4.6 现金券列表页设计婚博会索票界面用来进行索要中国婚博会门票，只有有了门票方可参加婚博会，索要门票需要填写自己和爱人的相关信息，如右图所示。8.4.7 婚博会索票设计8.4 设计流程获知渠道是以弹出层radio单项选择器组件的列表展现出来，只能选择一种获知渠道，如右所示。8.4.8 获知渠道弹出层设计