微信小程序开发图解案例第8章
微信小程序培训课完整版 ppt课件
1、学习css之前html要熟练，没有墙面（html）的话，我们给墙面怎么刷漆（css装 饰）？对不对？ 2、看视频教程，看书籍，写代码，调试代码，多思考。 3、坚持下去，选择他就要把他学好，不忘初心。
网络在线手册地址：/css/
ppt课件
在这里要感谢微信大神：张小龙。
ppt课件
4
html基础课程
HTML：超文本标记语言 标签：<html></html>闭合标签、<br />自闭标签<img /><hr /> HTML很重要，重要，一定要学好。
HTML标签的熟练使用 如：<div><a><span><b><img><input><table><tr><td><p><ul><ol><li><dl><dt><dd> 等等。
text-indent:24px;
}
也可以这样编写，但是一定要注意结尾有英文的分号.初学者建议采用上面的方式编写
css;
css高级语法 同时定义多个元素多组声明的写法，英文状态下的逗号
p,h1,h2,div,table{
color:red;
font-size:16px;
}
4种css的加载方式 1、行内方式
犀牛课堂小程序培训课
——培训讲师：Tabniu
ppt课件
1
微信小程序开发工具
1、打开浏览器输入 https:///debug/wxadoc/dev/devtools/download.html?t=1475052055364 打开页面 2、查看系统信息 3、选择下载对应的工具 4、安装工具 5、打开工具（需要微信扫描登录） 6、尝试运行微信小程序
微信小程序开发基础及实战
微信小程序开发基础及实战随着互联网的发展，人们的生活离不开移动设备，而移动应用也越来越受到人们的欢迎。
微信小程序作为一种轻量级应用，无需下载和安装，通过微信扫一扫即可打开，因此成为了越来越多企业和个人选择的应用开发方式。
本文将从微信小程序的基础知识开始，介绍如何开发微信小程序，以及实战案例分析。
一、微信小程序基础知识1.1 微信小程序的概念与特点微信小程序，是一种应用开发平台，是基于微信公众号开发的一种轻量级应用，具有轻便，无需下载和安装，无缝衔接微信社交生态等特点。
微信小程序可以直接在微信中使用，无需下载安装，用户只需要扫描二维码或者搜索即可使用，微信小程序的目前常见分类有8种，应用的覆盖面最有限为硬件控制小程序，最广为地铁购票、城市服务等。
在微信中，微信小程序的使用场景包括企业办公、教育学习、公共服务、生活服务等等，可以说微信小程序的潜力还有待挖掘。
1.2 微信小程序的优势微信小程序开发的优势在于以下几点:1）无需下载和安装，方便快捷。
2）适用于多种场景，例如商业、教育、生活服务、公共服务等。
3）应用功能丰富，包括图文、音视频、地图等多种媒体类型，具有较好的应用体验。
4）不需要消耗手机存储空间，企业可以通过微信公众号的方式推广自己的小程序。
5）高效的开发成本，企业在小程序开发上可以减少大量的开发成本和时间，不需要针对多个不同系统进行开发。
二、微信小程序的开发流程在微信小程序中创建一个小程序的整体开发流程包括开发工具的安装，代码编写、测试调试、部署发布等多个步骤，由一个整体的流程组成。
具体流程如下：2.1 安装开发工具在微信小程序项目中，开发者需要安装微信小程序开发工具，该工具提供了小程序的创建、编译、调试、发布功能，操作简单快捷。
下载后，打开开发工具并登录到微信的开发者中心。
2.2 创建小程序开发者通过工具创建项目并添加相应的信息，如小程序的名称，logo，作者等等，创建成功后便可以看到小程序的具体设置信息。
微信小程序开发图解案例教程第8章 综合案例：仿中国婚博会微信小程序
8.3 准备工作
（1）我们首先需要准备一个APPID，如果没有APPID也没有关系，只不 过不能在手机上进行项目的预览，但是在开发工具上开发是没有任何问 题的。 （2）底部标签导航，需要有选中图标和默认图标，放置在IMAGES/BAR 文件夹下，如图8.10所示。
图0 底部标签导航图标
（3）需要准备海报轮播的图片，放置在IMAGES/HAIBAO文件夹下，如 图8.11所示。
（3）在WINDOW数组里配置窗口导航背景颜色为红色（#D73E3E）， 导航栏文字为中国婚博会，字体颜色为白色。 （4）在TABBAR对象里配置底部标签导航背景色为灰色（#F3F1EF）， 文字默认颜色为灰色，选中时为红色（#D73E3E），在LIST数组里配 置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。 这样就完成了仿中国婚博会微信小程序的底部标签导航配置，单击 不同的导航，可以切换显示不同的页面，同时导航图标和导航文字 会呈现为选中状态。
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第8章 综合案例：仿中国婚博会微信小程序
需求描述 ■ 设计思路及相关知识点 ■ 准备工作 ■ 设计流程 ■ 小结 ■
参加婚博会需要使用中国婚博会APP进 行索要门票、领签到礼等环节。
由于中国婚博会APP软件使用频率不是 很高，因此完全可以做一个中国婚博会微信 小程序，需要的时候搜索出来使用，它的主 要界面如图8.1～图8.4所示。
（4）在设计全部分类导航的时候，有3块区域内容：玩转婚博会、 特色分类、我的婚博会。由于这3个区域布局方式一样，可以先设 计出一个区域，其余的两个区域直接复制使用即可； （5）现金券界面设计难点在于下拉菜单筛选条件设计，需要把筛 选条件置于页面顶层，在样式里设置Z-INDEX:999就可以将其置于 最顶层； （6）婚博会索票界面是常规的表单界面，需要把表单数据提交给 后台，保存到本地里。
微信小程序开发实战(第2版)-教学大纲
《微信小程序开发实战（第2版）》课程教学大纲（课程英文名称）课程编号：学分：学分课时：86课时（其中：讲课55课时上机31课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标微信小程序是一门面向Web前端开发人员的课程，用于快速掌握微信小程序的开发。
本课程以案例驱动模式，循序渐进地讲解了微信小程序的相关知识，包括微信小程序项目的创建方法、页面组成、发布流程、常用组件、导航栏、标签栏、数据绑定、事件绑定、this 关键字、列表渲染、常用API、Vant Weapp组件库、WeUI组件库、uni-app框架等内容以及两个综合项目。
另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。
通过本课程的学习，不仅可以让学生掌握微信小程序的核心知识，还可以培养学生的家国情怀、责任担当、敬业精神等。
二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将微信小程序与项目开发相结合。
按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。
课程设计思路：本课程根据知识点难易的先后顺序进行讲解。
采用案例驱动式体例，主要包括“案例分析”“知识储备”“案例实现”等，在每个案例中，先对案例进行需求分析，然后在知识储备中讲解实现这个案例需要使用到的知识，并结合示例代码帮助学生理解，最后通过案例实现达到学以致用的目标。
学完微信小程序的基础知识后，通过两个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。
操作系统：Windows 7或更高版本开发工具：微信开发者工具、HBuilder X三、课程的主要内容及基本要求第1章微信小程序入门学习单元微信小程序入门课时6课时学习目标1.了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境2.掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册3.掌握获取微信小程序AppID的方法，能够从微信小程序管理后台获取AppID4.掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装5.掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目6.熟悉微信小程序的项目结构，能够解释每个文件的作用7.熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式9.熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能10.掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置11.了解微信小程序开发常用快捷键，能够列举4类常用快捷键12.了解项目成员，能够说出项目成员的组织结构、分工和权限13.掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员14.熟悉微信小程序的版本，能够说明微信小程序的4种版本15.熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤学习内容知识点掌握程度重点难点什么是微信小程序了解微信小程序的特点了解微信小程序的发展前景了解微信小程序的宿主环境了解注册微信小程序开发账号掌握获取微信小程序AppID 掌握√安装微信开发者工具掌握创建微信小程序项目掌握√微信小程序的项目结构熟悉微信小程序的页面组成熟悉微信小程序的通信模型熟悉认识微信开发者工具熟悉微信小程序的项目设置掌握微信小程序开发常用快捷键了解项目成员的组织结构了解项目成员的分工了解项目成员和体验成员的管理了解项目成员的权限了解添加项目成员和体验成员掌握微信小程序的版本熟悉微信小程序的上线流程熟悉第2章微信小程序页面制作学习单元微信小程序页面制作课时10课时学习目标1.了解WXML的概念，能够说出WXML的特点、WXML与HTML的区别2.了解WXSS的概念，能够说出WXSS的特点、WXSS与CSS的区别3.了解组件的概念，能够说出组件的特点及常用的组件4.掌握页面路径的配置方法，能够运用该方法进行页面管理5.掌握view组件的使用方法，能够灵活运用view组件实现页面的布局效果6.掌握image组件的使用方法，能够灵活运用image组件完成图片插入操作7.掌握rpx单位的使用方法，能够灵活运用rpx单位解决屏幕适配的问题8.掌握页面样式的导入方法，能够灵活运用该方法导入公共样式9.掌握swiper和swiper-item组件的使用方法，能够灵活运用swiper和swiper-item组件完成轮播图的制作10.掌握text组件的使用方法，能够灵活运用text组件定义行内文本11.掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局12.掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置13.掌握标签栏的配置方法，能够完成页面标签栏的配置14.掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度15.掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理16.掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作学习内容知识点掌握程度重点难点WXML简介了解WXSS简介了解常用组件了解页面路径配置掌握√view组件掌握√image组件掌握√√rpx单位掌握样式导入掌握【案例2-1】个人信息-准备工作掌握【案例2-1】个人信息-实现“个人信息”微掌握√信小程序的页面结构【案例2-1】个人信息-实现“个人信息”微掌握信小程序的页面样式swiper和swiper-item组件掌握√text组件掌握Flex布局掌握【案例2-2】本地生活-准备工作掌握【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面结构【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面样式导航栏配置掌握标签栏配置掌握vm、vh单位掌握video组件掌握表单组件掌握√【案例2-3】婚礼邀请函-准备工作掌握【案例2-3】婚礼邀请函-项目初始化掌握【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的结构【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的样式【案例2-3】婚礼邀请函-实现“照片”页面掌握的结构【案例2-3】婚礼邀请函-实现“照片”页面掌握的样式【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的结构【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的样式【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的结构【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的样式第3章微信小程序页面交互学习单元微信小程序页面交互课时10课时学习目标1.熟悉Page()函数，能够归纳Page()函数及其各个参数的作用2.掌握数据绑定，能够运用数据绑定实现页面中数据的显示与修改3.掌握事件绑定，能够在组件触发时执行对应的事件处理函数4.熟悉事件对象，能够总结事件对象的属性及其作用5.掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数6.掌握setData()方法的使用，能够完成数据的设置与更改7.掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件8.掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件9.熟悉hidden属性，能够区分其与wx:if控制属性的区别10.掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取11.掌握模块的使用，能够完成模块的创建和引入12.掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中13.掌握网络请求的实现，能够通过网络请求与服务器进行交互14.掌握提示框的实现，能够在页面中显示消息提示框15.掌握WXS的使用，能够运用WXS处理页面中的数据16.掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载17.掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载18.掌握双向数据绑定，能够运用双向绑定实现数据的动态更改学习内容知识点掌握程度重点难点Page()函数熟悉√数据绑定掌握事件绑定掌握√事件对象熟悉this关键字掌握setData()方法掌握√条件渲染掌握√<block>标签掌握hidden属性熟悉【案例3-1】比较数字大小-准备工作掌握【案例3-1】比较数字大小-实现“比较数字大小”微信小程序的页面结构掌握【案例3-1】比较数字大小-获取并保存用户输入的数字掌握【案例3-1】比较数字大小-判断数字大小并显示结果掌握data-*自定义属性掌握模块掌握【案例3-2】计算器-准备工作掌握【案例3-2】计算器-实现“计算器”微信小程序的页面结构掌握【案例3-2】计算器-实现“计算器”微信小程序的页面逻辑掌握【案例3-2】计算器-特殊情况处理掌握√列表渲染掌握√网络请求掌握√提示框掌握WXS 掌握√上拉触底掌握下拉刷新掌握【案例3-3】美食列表-准备工作掌握【案例3-3】美食列表-获取初始数据掌握【案例3-3】美食列表-实现页面渲染掌握【案例3-3】美食列表-处理电话格式掌握【案例3-3】美食列表-实现上拉触底掌握【案例3-3】美食列表-实现下拉刷新掌握双向数据绑定掌握√【案例3-4】调查问卷-准备工作掌握【案例3-4】调查问卷-获取初始数据掌握【案例3-4】调查问卷-实现页面渲染掌握第4章微信小程序常用API（上）学习单元微信小程序常用API（上）课时9课时学习目标1.掌握scroll-view组件，能够运用scroll-view组件完成视图区域的横向滚动或者纵向滚动2.掌握slider组件，能够运用slider组件完成滑动选择器的制作3.掌握<include>标签，能够运用<include>标签引用其他文件中的代码4.掌握背景音频API，能够运用背景音频API实现音频后台播放、音频暂停等功能5.掌握录音API，能够运用录音API实现录音功能6.掌握音频API，能够运用音频API实现音频播放、暂停等功能7.掌握选择媒体API，能够运用wx.chooseMedia()方法选择图片或视频8.掌握图片预览API，能够运用wx.previewImage()方法预览图片9.掌握文件上传API，能够运用wx.uploadFile()方法实现将本地资源上传到服务器中10.掌握文件下载API，能够运用wx.downloadFile()方法实现资源文件的下载11.掌握canvas组件，能够灵活运用canvas组件创建画布12.掌握画布API，能够运用画布API完成图形的绘制学习内容知识点掌握程度重点难点scroll-view组件掌握√slider组件掌握√<include>标签掌握背景音频API 掌握√【案例4-1】音乐播放器-准备工作掌握【案例4-1】音乐播放器-实现“音乐播放器”掌握微信小程序的页面结构【案例4-1】音乐播放器-实现标签页切换掌握【案例4-1】音乐播放器-实现“音乐推荐”标签页掌握【案例4-1】音乐播放器-实现“播放器”标签页掌握【案例4-1】音乐播放器-实现播放器区域掌握【案例4-1】音乐播放器-实现播放进度的控制掌握【案例4-1】音乐播放器-实现“播放列表”标签页掌握录音API 掌握音频API 掌握【案例4-2】录音机-准备工作掌握【案例4-2】录音机-初始化录音功能掌握【案例4-2】录音机-实现“录音机”微信小程序的页面结构掌握【案例4-2】录音机-实现录音功能掌握【案例4-2】录音机-实现播放录音功能掌握√选择媒体API 掌握图片预览API 掌握文件上传API 掌握√文件下载API 掌握√【案例4-3】头像上传下载-准备工作掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面结构掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面逻辑掌握canvas组件掌握画布API 掌握√【案例4-4】模拟时钟-准备工作掌握【案例4-4】模拟时钟-初始化画布掌握【案例4-4】模拟时钟-绘制表盘掌握【案例4-4】模拟时钟-绘制指针掌握【案例4-4】模拟时钟-实现时钟走动效果掌握√第5章微信小程序常用API（下）学习单元微信小程序常用API（下）课时13课时学习目标1.掌握动画API，能够完成动画的制作2.熟悉登录流程时序，能够归纳微信小程序的登录流程3.掌握登录API，能够运用wx.login()方法实现用户登录4.掌握数据缓存API，能够对数据进行存储、获取和移除等操作5.掌握头像昵称填写功能，能够实现头像选择和昵称填写6.掌握腾讯地图SDK，能够实现腾讯地图SDK的接入和使用7.掌握map组件，能够灵活运用map组件实现地图效果8.掌握地图API，能够实现地图中地理位置的获取等功能9.掌握位置API，能够实现获取当前地理位置的功能10.掌握路由API，能够利用路由API实现页面跳转11.掌握WebSocket API，能够成功创建WebSocket连接12.掌握SocketTask，能够使用SocketTask管理WebSocket连接学习内容知识点掌握程度重点难点动画API 掌握√【案例5-1】罗盘动画-准备工作掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面结构掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面逻辑掌握登录流程时序熟悉登录API 掌握√数据缓存API 掌握√头像昵称填写掌握App()函数掌握√【案例5-2】用户登录-准备工作掌握【案例5-2】用户登录-实现用户登录掌握【案例5-2】用户登录-检查用户是否已经登录掌握【案例5-2】用户登录-获取用户的积分掌握【案例5-2】用户登录-获取用户头像和昵称掌握腾讯地图SDK 掌握map组件掌握地图API 掌握√位置API 掌握路由API 掌握√【案例5-3】查看附近美食餐厅-准备工作掌握【案例5-3】查看附近美食餐厅-获取初始数据掌握【案例5-3】查看附近美食餐厅-在页面中显示地图掌握【案例5-3】查看附近美食餐厅-实现跳转到优惠券页面掌握【案例5-3】查看附近美食餐厅-实现查找附近美食餐厅功能掌握WebSocket API 掌握√√SocketTask 掌握√√【案例5-4】在线聊天-准备工作掌握【案例5-4】在线聊天-实现WebSocket连接掌握【案例5-4】在线聊天-实现发送消息功能掌握【案例5-4】在线聊天-实现消息列表展示功能掌握第6章综合项目——“点餐”微信小程序学习单元综合项目——“点餐”微信小程序课时20课时学习目标1.掌握封装网络请求的方法，能够通过封装网络请求简化项目中网络请求的代码2.掌握用户登录的开发，能够独立实现用户登录3.掌握商家首页的开发，能够独立完成商家首页的编写4.掌握菜单列表页的开发，能够独立完成菜单列表页的编写5.掌握购物车的开发，能够独立实现购物车6.掌握订单确认页的开发，能够独立完成订单确认页的编写7.掌握订单详情页的开发，能够独立完成订单详情页的编写8.掌握订单列表页的开发，能够独立完成订单列表页的编写9.掌握消费记录页的开发，能够独立完成消费记录页的编写学习内容知识点掌握程度重点难点【任务6-1】项目开发准备-开发背景了解【任务6-1】项目开发准备-项目模块划分熟悉【任务6-1】项目开发准备-项目初始化掌握【任务6-2】封装网络请求-保存接口地址掌握【任务6-2】封装网络请求-封装网络请求函数掌握√【任务6-2】封装网络请求-请求失败时的处理掌握【任务6-2】封装网络请求-请求成功时的处理掌握【任务6-3】用户登录-判断登录状态掌握√【任务6-3】用户登录-执行登录操作掌握√【任务6-3】用户登录-记住登录状态掌握【任务6-4】商家首页-加载商家首页数据掌握【任务6-4】商家首页-实现商家首页的轮播图区域掌握【任务6-4】商家首页-实现商家首页的中间区域掌握【任务6-4】商家首页-实现商家首页的底部区域掌握【任务6-5】菜单列表页-加载菜单列表页数据掌握【任务6-5】菜单列表页-实现折扣信息区域掌握【任务6-5】菜单列表页-实现菜单列表区域掌握【任务6-5】菜单列表页-实现点击左侧菜单项滚动右侧商品列表掌握√【任务6-5】菜单列表页-实现滚动右侧商品掌握√列表激活左侧菜单项【任务6-6】购物车-实现底部购物车区域掌握【任务6-6】购物车-实现添加商品到购物车掌握√【任务6-6】购物车-实现小球动画效果掌握√【任务6-6】购物车-实现满减优惠信息区域掌握【任务6-6】购物车-实现购物车界面区域掌握【任务6-6】购物车-实现增加和减少商品数掌握量【任务6-6】购物车-实现清空购物车掌握【任务6-7】订单确认页-跳转到订单确认页掌握【任务6-7】订单确认页-加载订单确认页数掌握据【任务6-7】订单确认页-实现页面结构和页掌握面样式【任务6-7】订单确认页-实现订单信息区域掌握【任务6-7】订单确认页-实现备注区域掌握【任务6-7】订单确认页-实现支付区域掌握【任务6-8】订单详情页-加载订单详情页数掌握据【任务6-8】订单详情页-实现取餐信息区域掌握【任务6-8】订单详情页-实现订单详情区域掌握【任务6-8】订单详情页-实现订单信息区域掌握【任务6-9】订单列表页-加载订单列表页数掌握据【任务6-9】订单列表页-实现订单列表页的掌握页面结构【任务6-9】订单列表页-实现订单列表页的掌握页面样式【任务6-9】订单列表页-实现下拉刷新掌握√【任务6-9】订单列表页-实现上拉触底掌握√【任务6-9】订单列表页-跳转到订单详情页掌握【任务6-10】消费记录页-加载消费记录页数掌握据【任务6-10】消费记录页-实现消费记录页的掌握页面结构【任务6-10】消费记录页-实现消费记录页的掌握页面样式【任务6-10】消费记录页-获取头像掌握第7章微信小程序开发进阶学习单元微信小程序开发进阶课时9课时学习目标1.掌握自定义组件的创建方法，能够根据实际需要创建自定义组件2.掌握自定义组件的使用方法，能够使用自定义组件3.掌握使用自定义组件渲染标签栏的方法，能够使用自定义组件渲染标签栏4.掌握Vant Weapp组件库的使用方法，能够使用Vant Weapp组件库快速搭建微信小程序的页面5.掌握WeUI组件库的使用方法，能够使用WeUI组件库快速搭建微信小程序的页面6.掌握navigator组件的使用方法，能够利用navigator组件实现页面跳转7.了解uni-app框架的概念，能够说出使用uni-app框架开发项目的优势8.掌握HBuilder X开发工具的设置，能够完成HBuilder X的基本设置和个性化设置9.掌握uni-app项目的创建方法，能够完成uni-app项目的创建10.熟悉uni-app项目的目录结构，能够解释各个文件和文件夹的作用11.掌握uni-app项目运行至微信小程序的方法，能够将uni-app项目运行至微信小程序12.掌握uni-app项目的全局配置文件，能够对导航栏、底部标签栏、页面的文件路径等进行配置学习内容知识点掌握程度重点难点创建自定义组件掌握√使用自定义组件掌握√使用自定义组件渲染标签栏掌握Vant Weapp组件库掌握【案例7-1】自定义标签栏-准备工作掌握【案例7-1】自定义标签栏-项目初始化掌握【案例7-1】自定义标签栏-定义标签栏数据掌握【案例7-1】自定义标签栏-实现页面布局掌握【案例7-1】自定义标签栏-实现页面逻辑掌握WeUI组件库掌握√navigator组件掌握√√【案例7-2】电影列表-准备工作掌握【案例7-2】电影列表-实现标签栏掌握【案例7-2】电影列表-实现“正在热映”标签页掌握【案例7-2】电影列表-实现“搜索”标签页掌握【案例7-2】电影列表-实现“分类”标签页掌握uni-app框架概述了解HBuilder X开发工具掌握创建uni-app项目掌握uni-app项目的目录结构熟悉将uni-app项目运行至微信小程序掌握√uni-app项目的全局配置文件掌握【案例7-3】待办事项-准备工作掌握【案例7-3】待办事项-实现添加待办事项的掌握功能【案例7-3】待办事项-实现列表区域掌握第8章uni-app项目—— “短视频”微信小程序学习单元uni-app项目—— “短视频”微信小程序课时9课时学习目标1.掌握公共头部的开发，能够独立完成公共头部代码的编写2.掌握导航栏的开发，能够独立完成导航栏代码的编写3.掌握轮播图的开发，能够独立完成轮播图代码的编写4.掌握视频列表的开发，能够独立完成视频列表代码的编写5.掌握视频详情页的开发，能够独立完成视频详情页的编写学习内容知识点掌握程度重点难点【任务8-1】项目开发准备-项目展示掌握【任务8-1】项目开发准备-项目初始化掌握√【任务8-2】公共头部区域-实现公共头部区域的页面结构掌握【任务8-2】公共头部区域-实现公共头部区域的页面样式掌握【任务8-2】公共头部区域-在页面中显示公共头部区域掌握【任务8-3】导航栏区域-加载导航栏数据掌握√【任务8-3】导航栏区域-实现导航栏区域的页面结构掌握【任务8-3】导航栏区域-实现导航栏区域的页面样式掌握【任务8-3】导航栏区域-实现导航栏的切换效果掌握【任务8-4】轮播图区域-加载轮播图数据掌握【任务8-4】轮播图区域-实现轮播图区域的页面结构掌握【任务8-4】轮播图区域-实现轮播图区域的页面样式掌握【任务8-5】视频列表区域-加载视频列表数据掌握【任务8-5】视频列表区域-实现视频列表区域的页面结构掌握【任务8-5】视频列表区域-实现视频列表区域的页面样式掌握【任务8-5】视频列表区域-实现跳转到视频详情页掌握√【任务8-6】视频详情页-实现整体页面结构掌握【任务8-6】视频详情页-实现视频详情区域掌握【任务8-6】视频详情页-实现推荐视频区域掌握【任务8-6】视频详情页-实现评论列表区域掌握四、课时分配五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
《微信小程序开发图解案例教程》教学教案—11仿华为商城微信小程序
第7章综合案例：仿华为商城微信小程序教学过程7.1 需求描述仿华为商城微信小程序需要完成以下主要功能：（1）完成首页显示商品功能设计，首页内容包括搜索区域、海报轮播图片区域、精选商品列表区域、手机列表区域、笔记本电脑列表区域，如图所示。
首页手机笔记本电脑（2）完成分类页面里商品导航和导航对应商品显示设计，动态获取导航内容和导航对应的商品，如图所示。
分类（3）完成我的界面设计，包括账号相关设计和列表式导航设计，如图所示。
我的（4）完成登录设计，包括账号密码登录和手机快捷登录，如图所示。
账号密码登录手机快捷登录（5）完成账号注册功能，来获取用户账号信息，如图所示。
注册7.2 设计思路（1）设计底部标签导航，准备好底部标签导航的图标，并建立3个相应的页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。
（2）设计我的页面，先进行我的页面布局设计，然后实现通过微信授权用户的方式来获取用户头像和昵称，来达到登录的效果，这也是很多小程序会采用的一种设计方式。
（3）除了通过微信授权的方式获取用户，也可以自行设计登录界面，本案例设计账号密码登录和手机快捷登录。
（4）完成登录设计之后，开始设计注册功能来获取用户账号。
（5）设计首页功能，首页功能包括搜索区域、海报轮播区域、宫格导航区域、精选商品区域、手机区域、笔记本电脑区域的布局，然后通过API接口动态的来获取海报轮播图片列表和商品列表。
（6）设计分类页面功能，先进行分类页面布局设计，然后通过API接口动态获取分类导航信息和导航对应商品列表。
7.3 相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件等组件的使用。
（2）scroll-view可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商品。
微信小程序ppt课件
制作生成
提交审核
行业方案
扫码 即用
聚草小 程序
安全 可靠
基于微信框架开 发，保障数据、 资金的安全和稳 定
聚草小程序功能
可实现线上商品 管理、用户管理、 库存管理、物流 管理等功能
制作完成后发布小 程序，在后台生成 小程序代码，提交 审核
海量方案可供企 业选择，最大程 度满足企业的运 营需求
微信担保交易， 依托微信安全体 系保障企业资金、 数据安全
37
06
聚草小程序保障
38
聚草小程序保障
聚草小程序会持续进行新版本 更新，不断进行功能升级，更 有海量适用多种行业的模板陆 续推出
以客户需求为核心，售前客服 随时进行疑难问题解答、需专业客服指导操作，保 证顺利开通适用；专业技术人 员保障24小时解决问题
专业一流技术团队进行系统安 全维护、版本升级以及性能持 续优化等，带给您最坚实的技 术保障
12
微信小程序
无须安装、卸载 用完即走
小程序是一种不需要下载、安装即可使用的应用，它 实现了触手可及的梦想，用户扫一扫或者搜一下就能 打开应用，也实现了用完即走的理念，用户不用安装 太多应用，应用随处可用，但又无须安装卸载。
13
小程序的入口
搜索、分享、置顶、关联公众号…
14
02
聚草小程序
15
聚草小程序概述
10
APP
第1章 微信小程序入门
章节概述/ Summary
微信小程序于2017年1月9日正式上线，凭借其开发成本低、微信用户数量庞大等优势， 得到了许多用户的认可，同时还为许多商家提供了商机。为了满足人们的日常需求，微信 小程序的开发技术也在不断更新。为了让读者对微信小程序有一个整体的认识，本章将对 微信小程序的入门知识进行详细讲解。
先定一个小 目标！
了解微信小程序，能够说出微信小程序 的特点
1.1.2 微信小程序的特点
用户在使用微信小程序时无 须安装，直接使用，不占用 存储空间
某一个名称被注册后，另一
个微信小程序将不能使用相
同的名称 01
微信小程序入口丰富，再加 上基于微信生态，使得微信
04 小程序的传播能力强
无须安装、 触手可及
1.2.3 安装微信开发者工具
步骤1
安装微信开发者工具
双击微信开发者工具的安装包，进入微信开发者工具的安信开发者工具
步骤1
微信开发者工具安装
读者根据安装导向进行操作，即可完成微信开发者工具的安装。
步骤2
步骤3
步骤4
1.2.4 创建微信小程序项目
先定一个小 目标！
模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目。
1.2.4 创建微信小程序项目
多学一招：微信开发者工具的外观设置
微信开发者工具允许用户对其进行外观设置，包括主题、调试器主题和自定义外观。默 认的主题为深色， 如果想设置为其他颜色，更换选项即可。
第1章 微信小程序入门
《微信小程序开发实战（第2版）》
学习目标/Target
微信小程序案例源码-cocos creator跨平台开发小游戏案例
前言本人一直想学习游戏开发，以前做过Android游戏开发，但电脑坏了，所有源码都没有了，后面也就没有开发了，近来下班之余又想开发游戏了。
开发游戏之前，需要考虑开发平台及语言，以前基于Android开发，但是只能够运行在Android手机上，开发成本很高。
当前各种小游戏平台十分火爆，包括微信小程序、QQ程序、百度小程序、支付宝小程序、华为小程序等等，通过查询了解，cocos creator能够为跨平台提供支持，而且能够一键编译各种小程序、Android和苹果系统原生应用，实现一次开发，多平台编译，多平台运行。
案例介绍本案例以《成语词语找字大神》（简称“找字大神”）为例，详细介绍整个开发过程，目的在于帮助游戏开发爱好者更快地开发游戏，减少弯路，快速开发自己的游戏。
为了更好了解本教程，建议各位爱好者务必使用微信扫描关注试玩，快速了解本游戏的基本功能，更加容易学习本教程。
《成语词语找字大神》微信小游戏源码开放在学习的过程中，苦于没有太多案例，经过了长时间的琢磨和试错，终于完成了整个微信小游戏的开发，著作权的申请，微信小游戏的发布，时间比较漫长。
本人开发游戏属于兴趣爱好，为了给更多开发者了解各平台小游戏的开发流程、发布流程等，减少弯路，特将本小程序进行源码开放，供各兴趣爱好者参考，如有问题，请联系我。
多平台编译和发布本教程使用cocos creator跨平台开发有微信小程序为案例，然后根据自己的需要，通过cocos creator跨平台功能构建QQ程序、百度小程序、支付宝小程序、华为小程序、Android和苹果系统原生应用，实现“一次开发，多平台编译，多平台运行”。
下面教程，我将一步一步地描述《成语词语找字大神》的开发、发布、审批整个过程，敬请大家下一篇观看。
微信小程序开发图解案例教程
（8）2017年4月17日，小程序代码包大小限制扩大到2MB。 （9）2017年4月20日，腾讯公司发布公众号关注小程序新规则。 （10）2017年5月12日，腾讯公司发布“小程序数据助手”。 （11）2017年12月28日，微信更新的6.6.1版本开放了小游戏。
（12）2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者 企业可以在微信公众平台以及微信客户端入口进行投诉。 （13）2018年1月25日，微信团队在“微信公众平台”发布公告称“从 移动应用分享至微信的小程序页面，用户访问时支持打开来源应用”。
图1.17 Network功能
（4）STORAGE窗口用于显示当前项目，使用WX.SETSTORAGE或者 WX.SETSTORAGESYNC后的数据存储情况，如图1.18所示。
图1.18 Storage功能
（5）APPDATA窗口用于显示当前项目当前时刻的具体数据，实时地反 馈项目数据情况。用户可以在此处编辑数据，并及时地反馈到界面上， 如图1.19所示。
图1.3（b） 帮助文档
在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6 个菜单，针对不同角色的用户提供了不同内容的帮助文档。
开发人员经常会用到这里的简易教程、框架的使用、组件的介绍、 API、工具以及腾讯云支持等内容。 STEP2：在文档工具里，根据自己的操作系统，下载微信小程序的开 发工具，如图1.4所示。
小程序的界面和使用方法和APP类似，图1.2所示是几个已发布的 常用小程序界面。
图1.2 常用微信小程序界面
用户需要下载、安装才可以使用APP，安装时还会考虑APP占用多 大存储空间，哪些程序应该卸载掉以释放空间。
微信小程序则无需安装，直接使用，不占用存储空间。用户在使 用微信小程序后，可以用完即走。
《小程序设计》课件
小程序的更新是实时的，用户无需手动下载和安装新版本。
小程序的设计原则和注意事项
简洁明了
精简界面，突出功能，避免 过多冗余信息。
一致性
保持整体风格和交互方式的 统一，提高用户体验。
响Байду номын сангаас速度
优化代码和资源加载，减少 页面加载时间，提升性能。
小程序开发的基本流程
1
界面设计
2
根据需求和用户体验原则进行界面设计，
包括颜色、布局、交互等。
3
测试与发布
4
进行功能测试、性能测试和兼容性测试， 然后发布上线小程序。
需求分析
明确小程序的功能需求和目标用户，进 行需求评审和规划。
开发实现
基于设计稿进行编码和开发，实现小程 序的各项功能和页面。
小程序开发的关键技术和工具
前端技术
• HTML5 • CSS3 • JavaScript
为什么选择小程序开发
• 小程序开发相对简单，无需太多复杂的技术知识。 • 小程序具有跨平台的特性，可以在多个操作系统上运行。 • 小程序的用户覆盖面广，可以轻松获取更多的潜在客户。
小程序的优势和特点
1 便捷访问
用户无需下载和安装，通过扫码或搜索即可快速访问小程序。
2 低资源消耗
小程序占用较低的存储空间和内存，不会对设备性能造成过大影响。
开发工具
• 微信开发者工具 • 小程序框架 • 腾讯云开发平台
小程序设计的案例分析和实践经验
案例分析
通过分析成功的小程序案例，了 解其设计原理和实践经验。
实践经验
总结自己的小程序设计经验，分 享在实际项目中所遇到的问题和 解决方案。
效果展示
微信小程序开发与营销实战案例
微信小程序开发与营销实战案例随着移动互联网的快速发展，微信小程序的出现为企业营销带来了无限的机遇和挑战。
微信小程序是一种轻量级应用，具有简洁、易用、小巧、快速、无需下载等优点，成为众多企业的新宠。
一、微信小程序的开发微信小程序有两种开发方式，一种是基于原生开发，另一种是基于开发框架。
基于原生开发需要熟悉微信小程序的基础知识和前端开发技术，需要使用 JavaScript、CSS 和 WXML。
这种开发方式需要开发者有深厚的编程基础，掌握一定的前端开发技术才能开发出高质量的产品。
而基于开发框架的开发更加简单，当下主流的框架有 Taro、mpvue、uni-app 等。
这些框架具有跨平台、开发效率高、快速开发的特点，更加适合初学者。
开发框架的优势在于可以在不同平台上重用代码，提高开发效率，减少重复工作，让开发者更专注于业务逻辑。
二、微信小程序的营销案例微信小程序以其轻巧便捷的特点，成为多家企业的营销利器。
1. 好味道好味道是一款打破餐饮行业规矩的微信小程序。
用户可以在好味道上找到附近所有的美食，同时可以上传自己的菜品照片。
好味道还有一个贴心的功能：在公共场合使用时，可以生成二维码让大家快速一起点餐，整个过程极为便利。
通过好味道微信小程序的推广，成功打破传统的订餐模式，为消费者创造了更加便捷的用餐选择，带来了不俗的商业效益。
2. 斗音斗音是一款机遇语音的微信小程序，用户可以带声音表情包和好友 PK 互动，通过音乐、声音表情、文字等多种元素丰富用户体验。
更加重要的是，斗音将知识产权变成了实时流通的财富，让音频创作者获得了收益和尊重。
这种变革模式和营销手法打破了传统的营销思路，成功建立了新的营销模式。
3. 珑识英语珑识英语是一款学习英语的微信小程序，采用微课教学+线上学习+线上交流等多种方式进行教学，提高了英语学习的有效性。
珑识英语还带有智能语音评测功能，实时反馈学生发音的规范性，提升了学生的口语水平。
通过此类教育类微信小程序的推广，成功抓住年轻用户的学习需求，同时给企业创造了良好的口碑和商业价值。
微信小程序基础ppt课件
为什么做小程序
未来的应用程序无处不在
PC时代
与外界没有交互
互联网时代
网站提供服务
移动互联网
APP、微信公众号、微博
物联网
入口分散、线下、云端
4
小程序的现状
附近的小程序
用户可在微信内通过“附近的小程序”功 能便捷地获取线下门店所属的小程序，并 使用小程序提供的服务。这种店类似于未 来的门店，这也是一个流量入口，现在是 一个很好的红利期。
公众号模版消息可打开相关小程序
公众号关联小程序时，可选择给粉丝下发通 知消息，粉丝点击该通知消息可以打开小程 序。该消息不占用原有群发条数。
6
小程序的现状 小程序可以好友推荐及群推荐
当你发现一个好玩的或者实用的小程序， 可以将这个小程序，或者它的某一个页面 转发给好友或群聊。但是注意，小程序无 法在朋友圈中发布分享。
商家可将商品归类为促销商 品、畅销热品等进行展示
传众小程序商城版
店铺公告罗列出最新活动， 让消费者一目了然
设置精准搜索，通过输入关 键词来寻找想要的商品
订单状态一目了然，并有详 细记录，方便用户查询
用户可在个人中心设置收货 地址，查看相关信息
10
小程序的申请
小程序 关键词审核
微信公众平台 注册小程序
最有效的营销功能 之一，可以快速聚 拢用户、提升销量
小程序点餐
可利用小程序点餐 让消费者便捷点餐、 就餐，付费、领券
提升用户体验
小程序的出现，让同城服 务更加便捷，快速打开、
订购、预约、上门等
小程序企业
小程序企业可便捷 地展示企业信息产 品及服务信息，并
可快速传播
小程序酒店
基于微信小程序实 现在线预约、订房、 开房、缴费、退房 等，提升酒店服务
微信小程序入门ppt课件
WXSS
26
1
尺寸单位
设备
rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 屏幕宽度
iPhone5
1rpx = 0.42px
1px = 2.34rpx
320
iPhone6
1rpx = 0.5px
1px = 2rpx
375
iPhone6 Plus 1rpx = 0.552px
27
2
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联 样式表的相对路径，用;表示语句结束。
28
3
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解 析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{{color}};" />
0
1
2
3
16
7
View
实现点击效果
hover-class指定按下去的样式类。 当 hover-class="none" 时，没有点击态效果
WXML <view hover-class='hover'>按钮</view>
WXSS
.hover{ background-color: #aaa;
}
178239text\t 空格（ 多个只会显示一个空格） \n 换行
<text>你好！\t七月流火啊！\n我 在下一行</text>
微信小程序开发技巧与案例分析
微信小程序开发技巧与案例分析微信小程序作为一种新兴的移动应用开发方式，受到了越来越多开发者的关注和喜爱。
它具有快速、便捷、高效的特点，可以在微信平台上快速构建并发布应用，满足用户多样化的需求。
本文将讨论一些开发技巧，并分析几个成功的微信小程序案例。
一、微信小程序开发技巧1. 页面设计与功能划分在设计微信小程序时，首先需要合理划分页面和功能。
根据应用的需求和用户的使用习惯，将功能模块划分为不同的页面，以保证用户能够轻松找到并使用所需功能。
同时，合理安排页面间的导航和交互，确保用户体验的流畅性和一致性。
2. 界面设计与用户体验微信小程序的成功与否很大程度上取决于用户体验。
良好的界面设计和用户友好的操作方式能够吸引更多用户并提升用户留存率。
开发者可以借助微信小程序提供的组件和API，快速构建界面，并通过合理布局、颜色搭配以及动画效果等手段提升用户的感知和使用体验。
3. 数据管理与缓存优化因为微信小程序运行在用户的手机端，网络环境和设备资源可能存在一定的限制。
在开发过程中，需要注意合理使用数据缓存，并根据实际需求合理管理数据的获取和传输。
此外，还可以通过对数据的压缩和优化，减少数据量的传输和加载时间，提升小程序的响应速度。
4. 性能优化与调试工具为了提升微信小程序的性能和用户体验，开发者需要关注性能优化方面的技巧。
合理使用小程序提供的资源加载、异步请求和缓存等功能，可以减轻服务器和客户端的负载，提升小程序的运行速度。
此外，还可以使用微信小程序提供的调试工具，对小程序进行实时调试和性能分析，并进行必要的优化。
二、微信小程序成功案例分析1. 美团外卖小程序美团外卖小程序是一个集合了美团外卖所有功能的微信小程序。
用户可以通过微信小程序快捷地查找附近的餐厅、浏览并订购美食、查看订单情况以及进行在线支付。
该小程序在用户界面设计方面注重简洁明了，注重用户使用体验，通过多种搜索、筛选和分类方式，满足用户对美食的多样需求。
《微信小程序开发图解案例教程》教学教案—03仿香哈菜谱微信小程序
第2章微信小程序框架分析教学过程2.11沙场大练兵：仿香哈菜谱微信小程序香哈菜谱是围绕美食而做的一款小程序，在这里可以查看各式各样的菜谱。
对于菜谱类App软件，用户使用的频率不高。
当碰到不会做的菜式或者想做一些新的菜式时，用户才会去App软件查看，而微信小程序就可以满足这种低频率使用的场景，如图所示。
学做菜头条2.11.1底部标签导航设计仿香哈菜谱微信小程序，底部有5个导航标签：学做菜、头条、美食圈、消息、我的。
标签导航选中时，导航图标会变为红色，导航文字也会变为红色，如图所示。
底部标签导航选中效果（1）新建一个香哈菜谱xhcp项目，如图所示。
添加项目（2）将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图片复制到pages 文件夹下。
（3）打开app.json配置文件，在pages数组里添加5个页面路径“pages/cook/cook”“pages/headline/ headline”“pages/food/food”“pages/message/message”“pages/me/me”，保存后会自动生成相应的页面文件夹；删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹，如图所示。
配置页面路径（4）在window数组里配置窗口导航背景颜色为灰色（#494949），导航栏文字为“学做菜”，字体颜色设置为白色（#ffffff），具体配置如图所示。
窗口及导航栏配置（5）在tabBar对象里配置底部标签导航背景色为白色（#ffffff），文字默认颜色为灰色（#999999），选中时为红色（#CC1004），在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标，具体配置如图所示。
底部标签导航配置这样就完成了仿菜谱微信小程序的底部标签导航配置，单击不同的导航标签，可以切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，如图所示。
微信小程序开发实战第8章 综合项目—点餐系统
8.2 【任务1】商家首页
3 中间区域单击跳转到菜单列表
index.js
gostart: function(){ wx.navigateTo({ url: '../list/list' })
}
wxቤተ መጻሕፍቲ ባይዱnavigateTo()实现跳转
第8章 综合项目-点餐系统
• 开发前准备 • 菜单列表 • 订单确认 • 订单列表
• 商家首页 • 购物车 • 订单详情 • 消费记录
学习目标
1 掌握同步、异步存
储数据用法
掌握数据接口的 2
封装方法
熟悉点餐系统的
4 功能设计
掌握Promise的用法
3
目录
开发前准备
☞点击查看本节相关知识点
商家首页
8.1 开发前准备
3 项目初始化
路径
images pages/index pages/list pages/order/list pages/order/detail pages/order/balance
存放图片 首页 菜单列表页面 订单列表页面 订单详情页面 订单确认页面
作用
8.1 开发前准备
wx.hideLoading();
// 把接口返回数据给listData
this.setData({ listData: res.data })
}, () => { // 请求失败，关闭提示框，执行fetch.js文件中的fail方
法
wx.hideLoading()
})
}
8.2 【任务1】商家首页
// 自动切换时间间隔
duration: 1000 },
// 滑动动画时长
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
菜单作为筛选条件，下拉菜单里会
展现出很多筛选条件供用户选择， 现金券界面也是采用下拉菜单来进 行条件筛选，分为两类条件：全部、 默认，如右图所示。
8.4 设计流程
8.4.6 现金券列表页设计
现金券列表页用来展示商家的
现金优惠券，列表里包括商家的图
标、商家名称、现金优惠额度以及 申请情况，如左图所示。 8.4.7 婚博会索票设计 婚博会索票界面用来进行索要 中国婚博会门票，只有有了门票方 可参加婚博会，索要门票需要填写
个标签导航：首页、现金券、婚博会、社区、我的，
标签导航选中时导航图标会变为红色图标，导航文字 会变为红色文字，如下图所示。
8.4.2 海报轮播效果设计
海报轮播效果可以在有限的区域内动态\显示不同的
广告图片或者商品图片，是很多网站或者App软件都会 采用的一种展现方式，在仿中国婚博会微信小程序的首 页面里，采用海报轮播效果展示广告图片，如右图所示。
将数据缓存到本地，需要调用wx. setStorageSync这个API接口，进行缓存数据；
界面跳转需要使用wx.navigateTo这个API接口，进行界面跳转；
目录
contents
8.1 需求描述 8.2 设计思路及相关知识点 8.3 准备工作 8.4 设计流程
8.3 准备工作
需要准备一个AppID，如果没有AppID也没有关系，只不过不能再手机上进行项目的预览，
但是在开发工具上开发是没有任何问题的。 底部标签导航，需要有选中图片和默认图片，放置在images/bar文件夹下，如下图所示。
目录
contents
8.1 需求描述 8.2 设计思路及相关知识点 8.3 准备工作 8.4 设计流程
8.4 设计流程
8.4.1 底部标签导航设计
仿中国婚博会微信小程序，底部标签导航分为五
8.4 设计流程
8.4.3 宫格导航设计
宫格导航设计是很多 App 软件
都会采用的一种设计方式，通过这
种宫格导航设计，在首页里就给用 户明确的入口，用户根据自己的需 要进入到相关界面，这就是宫格导 航的一种好处，根据导航名称进入 到相应的界面，如图所示。
8.4 设计流程
8.4.4 全部分类导航设计
全部分类导航界面集合了中国
婚博会所有的导航的入口，分为三 类导航：玩转婚博会导航，有订喜 宴、拍婚照、找婚庆等服务；特色
分类导航，有拍写真、美新娘等服
务；我的婚博会导航，有现金券、 邀请函、签到礼等服务，这三类导
航布局方式一样，可以先设计一类
导航，然后直接进行复用，如右图 所示。
8.4 设计流程
8.4.5 现金券下拉菜单筛选条件设计
如图所示。
目录
contents
8.1 需求描述 8.2 设计思路及相关知识点 8.3 准备工作 8.4 设计流程
8.2.1 设计思路
设计底部标签导航，准备好底部标签导航的图标和建立相应的五个页面；设置默认时图 片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。 设计幻灯片轮播效果，准备好幻灯片需要轮播的图片； 设计宫格导航的时候，先把宫格导航的图标和导航名称存放在js后台里，动态循环展现
目录
contents
8.1 需求描述 8.2 设计思路及相关知识点 8.3 准备工作 8.4 设计流程
8.1 需求描述
完成底部标签导航设计、首
页海报轮播效果设计和宫格导航 设计，如左图所示。 在首页里，单击全部分类宫 格导航的时候，会进入到全部分 类导航界面，把婚博会相关内容
的导航集成到一个界面里，如右图
8.2.2 相关知识点
在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、image图片组件、 swiper滑块视图容器组件、icon图标组件、form组件、radio单项选择器组件、checkbox多项 选择器组件等组件的使用；
界面样式设计，需要写一些wxss样式进行界面的美化和渲染；
出宫格导航；
在设计全部分类导航的时候，有三块区域内容：玩转婚博会、特色分类、我的婚博会，
由于它们三个界面布局方式一样，可以先设计出一个区域，剩下的两个直接复制使用；
现金券界面设计难点在于下拉菜单筛选条件设计，需要把筛选条件置于页面顶层，可以 通过在样式里设置z-index:999就可以置于最顶层； 婚博会索票界面是常规的表单界面，需要把表单数据提交给后台，保存到本地里；
自己和爱人的相关信息，如右图所
示。
8.4 设计流程
8.4.8 获知渠道弹出层设计
获知渠道是以弹出层 radio 单项
选择器组件的列表展现出来，只能
选择一种获知渠道，如右所示。
所示。
8.1 需求描述
在现金券界面里，将各个商
户的现金券以列表的形式展现出 来，提供全部、默认下拉菜单效 果显示，如左图所示。 在婚博会界面里，提供索票 的界面，填写个人相关信息，可
以进行索票， 如右图所示。
8.1 需求描述
在填写表单选择获知渠道时， 以弹出窗口的形式提供单选列表，
供用户选择获知婚博会的情况，