下载文档原格式
第7章综合案例：仿糗事百科微信小程序教学过程7.1需求描述仿糗事百科微信小程序主要完成以下功能。
（1）实现顶部页签菜单左右滑动效果，如图所示。
顶部页签（2）实现顶部页签菜单切换效果，页签菜单选中时字体加粗，同时对应的内容也相应变化。
专享界面视频界面（3）实现专享界面糗事列表设计，包括发布人头像、发布人昵称、发布的段子等信息，以列表的形式展现出来。
（4）实现视频列表页设计，使视频可以进行播放与暂停。
（5）实现分享功能，可以将当前界面分享给好友。
分享页面7.2设计思路及相关知识点7.2.1设计思路（1）实现顶部页签滑动效果，需要借助于scroll-view可滚动视图区域组件，设置scroll-x="true"属性，允许顶部页签在水平方向上左右滑动；（2）页签菜单切换，内容也会随着进行切换，需要使用swiper滑块视图容器组件，根据current 当前页面索引值来决定显示哪个面板；（3）设计糗事列表，首先设计一条内容，然后复制这条内容的布局，在这个基础上进行修改；（4）设计视频列表，需要使用video视频组件，每个视频组件都有唯一的id；设计幻灯片轮播效果，准备好幻灯片需要轮播的图片；（5）分享功能，需要在Page中定义onShareAppMessage函数，设置该页面的分享信息。
7.2.2相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、image图片组件、swiper滑块视图容器组件、scroll-view可滚动视图区域组件、video视频组件等组件的使用；（2）界面样式设计中，需要使用wxss样式进行界面的美化和渲染；（3）页签菜单切换的时候，需要获得该页签所对应的id，绑定菜单切换事件；（4）设计页面分享时，需要使用onShareAppMessage这个API接口，来进行分享；（5）动态获取糗事列表信息，需要使用wx.request请求获得。
第1章认识微信小程序教学过程1.1微信小程序介绍1.1.1初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。
（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。
微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。
（3）给好友或者在群里分享小程序。
小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。
常用微信小程序界面1.1.2微信小程序的功能（1）分享页功能。
（2）分享对话功能。
（3）线下扫码进入微信小程序功能。
（4）挂起状态功能。
（5）消息通知功能。
（6）实时音视频录制播放功能。
（7）硬件连接功能。
（8）小游戏功能。
（9）公众号关联功能。
（10）搜索查找功能。
（11）识别二维码功能。
1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。
通过这些服务类目，我们能知道小程序的使用场景。
服务类目分为个人服务类目和企业服务类目。
个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。
1.2微信小程序开发准备1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。
另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。
1.2.2开发准备Step1：在“微信公众平台”注册微信开发者账号。
单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。
在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。
开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。
第1章认识微信小程序教学过程1.1微信小程序介绍1.1.1初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。
（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。
微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。
（3）给好友或者在群里分享小程序。
小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。
常用微信小程序界面1.1.2微信小程序的功能（1）分享页功能。
（2）分享对话功能。
（3）线下扫码进入微信小程序功能。
（4）挂起状态功能。
（5）消息通知功能。
（6）实时音视频录制播放功能。
（7）硬件连接功能。
（8）小游戏功能。
（9）公众号关联功能。
（10）搜索查找功能。
（11）识别二维码功能。
1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。
通过这些服务类目，我们能知道小程序的使用场景。
服务类目分为个人服务类目和企业服务类目。
个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。
1.2微信小程序开发准备1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。
另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。
1.2.2开发准备Step1：在“微信公众平台”注册微信开发者账号。
单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。
在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。
开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。
Python微信小程序开发实战案例近年来，随着微信小程序的兴起，越来越多的开发者开始关注和学习如何利用Python语言进行微信小程序开发。
本文将通过一个实战案例，介绍Python微信小程序的开发过程和相关技术要点。
一、项目介绍我们的项目是一个简单的在线购物小程序，通过该小程序用户可以浏览商品、加入购物车以及进行支付操作。
我们将使用Python作为后台开发语言，利用微信提供的开发平台和API来实现小程序的功能。
二、开发环境搭建首先，确保你已经安装好了Python的开发环境，并且安装了相关的开发包。
然后，我们需要注册微信开放平台的账号，并创建一个小程序项目。
从微信开放平台获取小程序的AppID，并将其配置到Python 开发环境中。
三、实现商品浏览功能1. 首先，我们需要创建用于存储商品信息的数据库表。
可以使用MySQL或者其他关系型数据库。
在Python中，我们可以使用SQLAlchemy库进行数据库操作。
通过编写相应的实体类和数据库连接代码，实现商品信息的读取和展示。
2. 接下来，我们需要编写后台接口，供小程序调用。
可以使用Flask框架来搭建后台服务。
通过编写API接口，将商品相关的数据以JSON格式返回给小程序前端。
在接口中，我们还可以实现商品搜索、分页等功能。
四、实现购物车功能1. 用户可以将感兴趣的商品加入购物车，因此我们需要创建一个购物车表，并建立与商品表的关联。
通过SQLAlchemy库，我们可以很方便地将两个表进行关联查询和操作。
2. 在小程序前端，我们需要编写相应的逻辑代码，实现购物车的添加、删除、数量修改等操作。
通过调用后台提供的API接口，将购物车相关的数据传递给后台。
3. 在后台接口中，我们需要编写购物车相关的处理逻辑。
对于用户提交的购物车操作请求，我们可以进行验证、计算价格、生成订单等操作。
同时，为了保证用户的购物车数据持久化，我们需要将其存储到数据库中。
五、实现支付功能1. 小程序支付功能通常依赖于微信支付平台。
第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数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标，具体配置如图所示。
底部标签导航配置这样就完成了仿菜谱微信小程序的底部标签导航配置，单击不同的导航标签，可以切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，如图所示。
第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可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商品。
