2024年8月24日发(作者：城初雪)
第7章 综合案例：仿华为商城微信小程序
课程名称
任务名称
项目性质
授课班级
微信小程序开发图解案例
教程
仿华为商城微信小程序
□演示性
项目名称
课时
□综合性
仿华为商城微信小程序
6
□验证性 √设计性
授课日期 授课地点
（1）学会利用微信小程序来完成界面布局以及给界面添加相关的布局样式，深入使用flex弹
性布局设计；
（2）学会底部标签导航、海报轮播效果、宫格导航的设计。
（3）学会使用scroll-view可滚动视图区域组件来进行商品左右滑动设计；
（4）学会使用swiper滑块视图容器组件可以在海报轮播设计、登录设计、导航设计等等不同
教学目标
场景的使用；
（5）学会使用网络请求t(object)用来发起请求服务器端API接口数据；
（6）学会列表式导航在页面中的使用；
（7）学会登录不同场景的使用，包括微信授权获取用户信息和登录账号获取用户信息；
（8）学会表单制作，设计表单样式以及表单组件的使用。
（1）“我的”界面列表导航设计
（2）账号登录
教学内容
（3）用户注册
（4）首页布局设计及动态获取数据
（5）分类导航设计及动态获取数据
教学重点
教学难点
“我的”界面列表导航、账号登录、用户注册、首页布局、分类导航设计及动态获取数据
仿华为商城微信小程序的制作
装有微信小程序的开发工具的电脑
教学准备
教学课件PPT
教材：《微信小程序开发图解案例教程（附精讲视频）（第3版）》
作业设计
教学过程
教学环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U 盘中的素材位置、打开授
课计划、教案等），吸引学生注意力。
【课前说明】
回顾view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容
器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件、scroll-
课前组织
课程说明
view可滚动视图区域组件、swiper滑块视图容器组件、wxss样式、t API接口等知识点，了
解仿华为商城微信小程序的功能与结构。
【目的】
使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。
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可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商
品。
（3）swiper滑块视图容器组件，用来实现海报轮播效果、账号密码登录和手机快捷登录页签切
换效果、分类导航内容切换显示。
（4）界面样式设计，需要写一些wxss样式进行界面的美化和渲染，经常会用到flex弹性布局
设计，来更好的进行页面布局设计。
（5）网络请求t(object)用来发起请求服务器端API接口数据，本案例的数据是通过
服务器端接口提供。
7.4 准备工作
（1）我们需要准备一个AppID，用来创建项目。
（2）底部标签导航，需要有选中图标和默认图标，放置在images/bar文件夹下，如图所示。
底部标签导航图标
（3）用户密码登录接口文档地址:81/showdoc/web/#/page/38。
（4）用户注册登录接口文档地址:81/showdoc/web/#/page/4。
（5）下发验证码接口文档地址:81/showdoc/web/#/page/5。
（6）手机验证码登录接口文档地址:81/showdoc/web/#/page/7。
（7）获取Banner列表接口文档地址:81/showdoc/web/#/page/9。
（8）获取商品列表接口文档地址:81/showdoc/web/#/page/11。
（9）获取商品分类导航接口文档地址:81/showdoc/web/#/page/15。
7.5 设计流程
7.5.1 我的界面列表导航设计
仿华为商城微信小程序底部标签导航分为三个：首页、分类、我的；底部标签导航选中时图片是
红色，文字颜色也是红色，非选中状态呈现为灰色；在我的界面采用列表式导航设计方式，这也是很
多App和小程序都会采用的一种设计方式，如图所示。
我的
（1）创建hwshop仿华为商城项目，不使用云开发，在文件配置首页、分类、我的底
部标签导航，配置首页、分类、我的页面路径，代码如下所示。
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/me/me"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "华为商城",
"navigationBarTextStyle": "black"
},
"tabBar": {
"selectedColor": "#ee0000",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"color": "#999999",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/images/bar/",
"selectedIconPath": "pages/images/bar/"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "pages/images/bar/",
"selectedIconPath": "pages/images/bar/"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "pages/images/bar/",
"selectedIconPath": "pages/images/bar/"
}
]
},
"sitemapLocation": ""
}
（2）在pages/me/文件配置我的页面导航背景色为红色及标题为我的，文字颜色为白
色，代码如下所示。
{
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#EE0000",
"navigationBarTextStyle": "white"
}
（3）在pages/me/文件进行我的界面布局设计，采用列表式导航设计方式，代码如下所
示。
切换账号登录
（4）在pages/me/文件进行我的界面样式渲染，代码如下所示。
.head {
width: 100%;
height: 90px;
background-color: #e00;
display: flex;
flex-direction: row;
}
.headIcon {
margin: 10px;
}
.headIcon image {
border-radius: 50%;
}
.login {
color: #fff;
font-size: 15px;
font-weight: bold;
position: absolute;
left: 100px;
margin-top: 20px;
}
.login button {
background-color: #e00;
color: #fff;
font-size: 13px;
padding: 0px;
}
button::after {
border: none;
}
.switchLogin {
background-color: #cd0000;
border-radius: 20px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.detail {
color: #fff;
font-size: 15px;
position: absolute;
right: 10px;
margin-top: 30px;
}
.nav {
display: flex;
flex-direction: row;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-item {
width: 25%;
font-size: 13px;
text-align: center;
margin: 0 auto;
}
.hr {
width: 100%;
height: 10px;
background-color: #f9f8f6;
}
.order {
padding-left: 15px;
font-size: 13px;
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
}
.order image {
margin-right: 10px;
}
.detail2 {
font-size: 13px;
position: absolute;
right: 10px;
margin-top: 15px;
color: #888;
}
.line {
height: 1px;
width: 100%;
background-color: #666;
opacity: 0.2;
}
.item {
display: flex;
flex-direction: row;
}
7.5.2 账号登录
微信小程序登录一般会采用两种方式：
（1）通过微信授权来获取微信用户的昵称、头像等信息，微信用户授权
rInfo(OBJECT) 接口有调整，使用该接口将不再出现授权弹窗，所以不能使用这样的方式
进行授权，但是微信授权提供其他两种方式：一种是使用弹窗进行授权，需要使用button组件，示
例代码如下所示。
另一种方式是只展示用户的昵称、头像信息，使用
（2）通过账号登录的方式，这种方式需要用户进行注册，提供用户登录账号。
下面采用这两种方式来进行登录设计，如图所示。
账号密码登录 手机快捷登录
（1）在pages/me/文件进行微信授权登录，同时提供账号登录入口，进行两种登录方式的
切换，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {
nickName: '授权登录',
canIUse: e('rInfo'),
headIcon:'/pages/images/icon/'
},
onLoad: function(options) {
ogin();
},
bindGetUserInfo: function (e) {//授权登录
var data = fo;
a({
nickName: me,
headIcon: Url
});
},
switchLogin: function () {//切换账号登录
teTo({
url: '../login/login',
})
},
checkLogin: function() {//校验登录，优先使用账号登录，再使用微信授权登录
var userId = rageSync("userId");
if (userId != null && userId != "") {
a({
nickName: rageSync("nickName")
});
}else{
var that = this;
ting({
success: function (res) {
if (tting['fo']) {
rInfo({// 已经授权，可以直接调用 getUserInfo 获取头像昵称
success: function (res) {
var data = fo;
a({
nickName: me,
headIcon: Url
});
}
})
}
}
})
}
}
})
（2）在文件里配置登录路径"pages/login/login"，在文件里配置页面标
题，代码如下所示。
{
"navigationBarTitleText": "账号登录"
}
在里配置访问服务器域名和用户id全局参数，示例代码如下所示。
globalData: {
userInfo: null,
host: ':8888',
userId: null//用户id
}
（3）在pages/login/文件里进行登录布局设计，包括账号密码登录、手机快捷登
录，代码如下所示。
（4）在pages/login/文件里进行登录样式渲染，代码如下所示。
.loginTitle{
display: flex;
flex-direction: row;
width: 100%;
font-size: 15px;
}
.select{
color: #EE0000;
width: 50%;
text-align: center;
height: 48px;
line-height: 48px;
border-bottom:5rpx solid #EE0000;
font-weight: bold;
}
.default{
margin: 0 auto;
padding: 15px;
}
.hr{
height: 1px;
width: 100%;
background-color: #666666;
opacity: 0.2;
}
.account{
display: flex;
flex-direction: row;
align-items: center;
}
.ac{
padding:15px;
font-size:15px;
font-weight: bold;
color: #666666;
}
.ipt input{
text-align: left;
width: 140px;
color: #000000;
}
.placeholder-style{
font-size: 14px;
color: #cccccc;
}
.login{
margin: 0 auto;
text-align: center;
padding-top:10px;
}
.login button{
width: 90%;
color: #ffffff;
background: #EE0000;
height: 40px;
border-radius: 20px;
line-height: 40px;
}
.fp{
font-size: 13px;
color: #3e13da;
padding:5px;
text-align: right;
margin-right:10px;
margin-top:10px;
}
.btn{
position: absolute;
right: 10px;
top: 10px;
width: 90px;
font-size: 12px;
color: #666666;
background-color: #f2f2f2;
}
（5）在pages/login/文件里用来处理账号密码登录逻辑和手机快捷登录逻辑，添加注
册页面跳转路径，代码如下所示。
var app = getApp();
var host = ;
var timer;
var timeSecond = false,
sendBolen = false;
Page({
data: {
currentTab: 0,
form_info: '',
yzmvalue: '获取验证码',
mobile: '',
timevalue: 60,
flag: true,
verifyCode: '',
code: ''
},
onLoad: function(options) {
Code();
},
getNewCode: function() { //登录页面进行一次获取新的code,用户登录凭证（有效期五分钟）
var that = this;
({
success: function(data) {
a({
code:
});
}
})
},
switchNav: function(e) { //账号密码登录和手机快捷登录切换
var that = this;
if (tTab == t) {
return false;
} else {
a({
currentTab: t
});
a({
form_info: ''
});
}
},
toRegister: function(e) { //跳转注册页面
teTo({
url: '../register/register'
})
},
formSubmit: function(e) { //表单登录，进行提交
var that = this;
var loginName = ame;
var mobile = ;
var loginPassword = assword;
var verifyCode = Code;
var loginType = tTab;
var code = ;
t({
url: host + '/api/user/swxLogin',
method: 'GET',
data: {
'loginName': loginName,
'mobile': mobile,
'loginPassword': loginPassword,
'verifyCode': verifyCode,
'loginType': loginType,
'code': code
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
(res);
var code = ;
var msg = ;
if (code == '0000') {
= ;
rageSync('userId', );
rageSync('nickName', me)
rageSync('swx_session', _session);
rageSync('userMobile', );
rageSync('openId', );
rageSync('token', );
ch({
url: '../index/index'
})
("2")
} else {
p(msg);
return false
}
}
})
},
showTip: function(message) { //弹出消息提示
dal({
title: '温馨提示',
showCancel: false,
content: message
})
},
getcode: function(e) { //获取验证码
var that = this;
a({
flag: false
}); //显示时间
timer = setInterval(e, 1000); //验证码倒计时
t({
url: host + '/api/user/getVerifyCode',
method: 'GET',
data: {
'mobile':
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
(res);
var code = ;
var msg = ;
if (code == '0000') {
clearInterval(timer);
a({
verifyCode: msg
});
} else {
clearInterval(timer);
a({
yzmvalue: '获取验证码',
timevalue: 60,
flag: true
});
p(msg);
return false
}
}
})
},
getMobile: function(e) { //获取手机号
a({
mobile:
})
},
settime: function() { //验证码倒计时
var timevalue = lue;
if (timevalue == 0) {
clearInterval(timer)
a({
yzmvalue: '重新获取',
timevalue: 60,
flag: true
})
timeSecond = false;
sendBolen = false;
return;
}
timevalue--;
timeSecond = true;
sendBolen = true;
a({
timevalue: timevalue,
flag: false
})
},
})
这样就完成两种登录的设计，可以使用账号密码登录和手机快捷登录来进行小程序的登录，可以
使用账号xiaogang，密码123456进行登录测试。
7.5.3 用户注册
用户可以通过用户名密码进行登录，在登录之前需要获取登录账号，这样可以通过注册功能来获
取账号信息，在登录界面提供入口，如果没有账号，可以跳转注册页面进行账号注册。
注册入口 账号注册
下面一起设计一下注册功能。
（1）在文件里配置注册路径"pages/register/register"，在文件里
配置页面标题，代码如下所示。
{
"navigationBarTitleText": "账号注册"
}
（2）在pages/ register/文件里进行账号注册布局设计，代码如下所示。
（3）在pages/ register/文件里进行账号注册样式渲染，代码如下所示。
.content{
height: 600px;
}
.loginTitle{
margin: 10px;
text-align: center;
}
.select{
font-size:12px;
color: red;
width: 50%;
text-align: center;
height: 45px;
line-height: 45px;
border-bottom:5rpx solid red;
}
.default{
font-size:12px;
margin: 0 auto;
padding: 15px;
}
.hr{
border: 1px solid #cccccc;
opacity: 0.2;
}
.account{
display: flex;
flex-direction: row;
align-items: center;
}
.ac{
padding:15px;
font-size:14px;
font-weight: bold;
color: #666666;
width: 60px;
text-align: center;
}
.ipt input{
text-align: left;
width: 200px;
}
.placeholder-style{
font-size: 14px;
color: #cccccc;
}
.login{
margin: 0 auto;
text-align: center;
padding-top:10px;
}
.login button{
width: 90%;
color: #ffffff;
background: #EE0000;
height: 40px;
border-radius: 20px;
line-height: 40px;
}
（4）在pages/ register/文件里进行账号注册业务逻辑处理，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {},
formSubmit: function(e) { //注册表单提交
var that = this;
var loginName = ame;
var mobile = ;
var loginPassword = assword;
var confirmPassword = mPassword;
var nickName = me;
t({
url: host + '/api/user/register',
method: 'GET',
data: {
'loginName': loginName,
'mobile': mobile,
'loginPassword': loginPassword,
'confirmPassword': confirmPassword,
'nickName': nickName
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
var code = ;
var msg = ;
if (code == '0000') {
ctTo({
url: '../login/login'
})
} else {
p(msg);
return false
}
}
})
},
showTip: function(message) { //弹出消息提示
dal({
title: '温馨提示',
showCancel: false,
content: message
})
}
})
7.5.4 首页布局设计及动态获取数据
仿华为商城小程序首页内容分为几个区域：搜索区域、海报轮播区域、宫格导航区域、精品推荐
区域、手机区域、笔记本电脑区域，如图所示。
下面一起进行首页的布局设计。
首页 手机 笔记本电脑
（1）在pages/index/文件里对搜索区域、海报轮播区域、宫格导航区域、精品推荐
区域、手机区域、笔记本电脑区域布局设计，代码如下所示。
duration="{{duration}}">
{{}}
精品推荐
手机
笔记本电脑
（2）在pages/index/文件里对搜索区域、海报轮播区域、宫格导航区域、精品推荐
区域、手机区域、笔记本电脑区域样式渲染，代码如下所示。
.content{
width: 100%;
font-family: "Microsoft YaHei";
}
.search{
width: 100%;
height: 40px;
line-height: 40px;
}
.searchInput{
width: 90%;
background-color: #f9f9f9;
height: 30px;
line-height: 30px;
border-radius: 15px;
display: flex;
justify-content:left;
align-items:center;
margin: 0 auto;
padding-left:10px;
}
.searchContent{
font-size:12px;
color: #777777;
margin-left: 10px;
}
.haibao{
text-align: center;
width: 94%;
margin: 0 auto;
}
.silde-image{
width: 100%;
height: 100%;
border-radius: 5px;
}
.nav{
margin: 20px;
display: flex;
justify-content: space-between;
}
.nav-item{
text-align: center;
font-size: 13px;
color: #999999;
}
.category{
font-size:18px;
text-align: center;
margin:10px;
}
.items{
display:flex;
flex-direction:row;
padding-left: 10px;
}
.item{
width: 250px;
height: 190px;
border-radius: 5px;
margin-bottom: 10px;
text-align: center;
margin-right:10px;
}
.pic{
margin-top: 5px;
}
.pic image{
width:100px;
height:120px;
border-radius: 5px;
}
.name{
font-size: 12px
}
.price{
color:red;
margin-top:2px;
font-size: 16px;
}
.items-normal{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item-normal{
width: 50%;
height: 190px;
border-radius: 5px;
text-align: center;
}
.hr{
height: 10px;
width: 100%;
background-color: #cccccc;
opacity: 0.2;
}
（3）在pages/index/文件里动态获取海报轮播图片、精品推荐商品列表、手机列表、
笔记本电脑和设置首页可以进行分析的业务逻辑处理，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
imgUrls: [
"/pages/images/haibao/",
"/pages/images/haibao/",
"/pages/images/haibao/"
],
navs:[
{
"img": "/pages/images/icon/",
"name":"华为专区"
},
{
"img": "/pages/images/icon/",
"name": "荣耀专区"
},
{
"img": "/pages/images/icon/",
"name": "领券中心"
},
{
"img": "/pages/images/icon/",
"name": "安心居家"
},
{
"img": "/pages/images/icon/",
"name": "拼团"
}
],
hotList:[],
phoneList:[],
pcList:[],
host: host
},
onLoad: function (options) {
var page = this;
nerList();
dsList();
},
getBannerList: function () {//获取海报轮播图片
var page = this;
t({
url: host + '/api/banner/getBannerList?type=1',
method: 'GET',
data: { },
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var code = ;
var list = ;
if (code == '0000') {
var code = ;
var list = ;
if (code == '0000') {
var imgUrls = new Array();
for (var i = 0; i < ; i++) {
(host + "/" + list[i].url);
}
(imgUrls);
a({ imgUrls: imgUrls });
}
}
}
})
},
getGoodsList: function () {//获取商品图片
var page = this;
t({
url: host + '/api/goods/getHomeGoodsList',
method: 'GET',
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var book = ;
var phoneList = ;
var pcList = ;
a({ hotList: (pcList) });//精品推荐列表
a({ phoneList: phoneList });//手机列表
a({ pcList: pcList });//笔记本电脑列表
}
})
},
onShareAppMessage: function () {// 用户点击右上角分享
return {
title: '华为商城', // 分享标题
desc: '华为商城是华为旗下面向全国服务的电子商务平台官网,提供正品华为手机(华为P30系列、华为
Mate20系列、华为nova系列、荣耀9X、荣耀智慧屏、荣耀20、荣耀V20等', // 分享描述
path: '/pages/index/index' // 分享路径
}
},
})
这样就完成了首页的布局设计，同时通过API接口动态从服务器获取海报轮播图片列表、精品推
荐列表、手机列表、笔记本电脑列表。
7.5.5 分类导航设计及动态获取数据
分类导航设计采用手风琴式的导航方式来显示商城商品的导航，分类页面可以划分为三个区域：
搜索区域、导航区域、导航内容显示区域，如图所示。
新品 华为手机
下面一起设计分类页面和动态获取分类导航数据。
（1）在pages/category/文件里对分类导航进行页面布局设计，代码如下所示。
bindtap="switchNav">{{ypeName}}
（2）在pages/category/文件里对分类导航进行页面样式渲染，代码如下所示。
.content {
width: 100%;
font-family: "Microsoft YaHei";
}
.search{
width: 100%;
height: 40px;
line-height: 40px;
}
.searchInput{
width: 90%;
background-color: #f9f9f9;
height: 30px;
line-height: 30px;
border-radius: 15px;
display: flex;
justify-content:left;
align-items:center;
margin: 0 auto;
padding-left:10px;
}
.searchContent{
font-size:12px;
color: #777777;
margin-left: 10px;
}
.category {
display: flex;
flex-direction: row;
}
.left {
width: 30%;
font-size: 13px;
}
.left view {
text-align: center;
height: 45px;
line-height: 45px;
}
.select{
background-color: #f9f9f9;
border-left:2px solid #CD0000;
color: #CD0000;
}
.normal{
background-color: #ffffff;
border-bottom: 1px solid #f2f2f2;
}
.space{
width: 1px;
background-color: #f2f2f2;
}
.right{
width:70%;
}
.line{
height: 1px;
width: 100%;
background-color: #dddddd;
opacity: 0.2;
}
.title{
padding: 10px;
font-size: 13px;
}
.items{
display: flex;
flex-wrap: wrap;
justify-content: space-left;
}
.item{
width: 33%;
height: 100px;
text-align: center;
padding-top:10px;
}
.item image{
width: 50px;
height: 50px;
}
.name{
font-size: 13px;
}
（3）在pages/category/文件里对分类导航进行业务逻辑处理，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {
flag: 0,
currentTab: 0,
category: []
},
onLoad: function (options) {
var page = this;
tegory();
},
loadCategory:function(){
var page = this;
t({
url: host + '/api/category/getCategoryList',
method: 'GET',
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
(res);
var code = ;
var category = ;
if (code = '0000') {
a({ category: category });
}
}
})
},
switchNav: function (e) {
var page = this;
var id = ;
if (tTab == id) {
return false;
} else {
a({ currentTab: id });
}
a({ flag: id });
}
})
这样就可以完成分类导航设计，同时可以动态获取分类导航及导航对应的数据。
总结评价
本节课主要通过仿华为商城微信小程序实例强化微信小程序设计的知识点与应用。
2024年8月24日发(作者：城初雪)
第7章 综合案例：仿华为商城微信小程序
课程名称
任务名称
项目性质
授课班级
微信小程序开发图解案例
教程
仿华为商城微信小程序
□演示性
项目名称
课时
□综合性
仿华为商城微信小程序
6
□验证性 √设计性
授课日期 授课地点
（1）学会利用微信小程序来完成界面布局以及给界面添加相关的布局样式，深入使用flex弹
性布局设计；
（2）学会底部标签导航、海报轮播效果、宫格导航的设计。
（3）学会使用scroll-view可滚动视图区域组件来进行商品左右滑动设计；
（4）学会使用swiper滑块视图容器组件可以在海报轮播设计、登录设计、导航设计等等不同
教学目标
场景的使用；
（5）学会使用网络请求t(object)用来发起请求服务器端API接口数据；
（6）学会列表式导航在页面中的使用；
（7）学会登录不同场景的使用，包括微信授权获取用户信息和登录账号获取用户信息；
（8）学会表单制作，设计表单样式以及表单组件的使用。
（1）“我的”界面列表导航设计
（2）账号登录
教学内容
（3）用户注册
（4）首页布局设计及动态获取数据
（5）分类导航设计及动态获取数据
教学重点
教学难点
“我的”界面列表导航、账号登录、用户注册、首页布局、分类导航设计及动态获取数据
仿华为商城微信小程序的制作
装有微信小程序的开发工具的电脑
教学准备
教学课件PPT
教材：《微信小程序开发图解案例教程（附精讲视频）（第3版）》
作业设计
教学过程
教学环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U 盘中的素材位置、打开授
课计划、教案等），吸引学生注意力。
【课前说明】
回顾view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容
器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件、scroll-
课前组织
课程说明
view可滚动视图区域组件、swiper滑块视图容器组件、wxss样式、t API接口等知识点，了
解仿华为商城微信小程序的功能与结构。
【目的】
使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。
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可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商
品。
（3）swiper滑块视图容器组件，用来实现海报轮播效果、账号密码登录和手机快捷登录页签切
换效果、分类导航内容切换显示。
（4）界面样式设计，需要写一些wxss样式进行界面的美化和渲染，经常会用到flex弹性布局
设计，来更好的进行页面布局设计。
（5）网络请求t(object)用来发起请求服务器端API接口数据，本案例的数据是通过
服务器端接口提供。
7.4 准备工作
（1）我们需要准备一个AppID，用来创建项目。
（2）底部标签导航，需要有选中图标和默认图标，放置在images/bar文件夹下，如图所示。
底部标签导航图标
（3）用户密码登录接口文档地址:81/showdoc/web/#/page/38。
（4）用户注册登录接口文档地址:81/showdoc/web/#/page/4。
（5）下发验证码接口文档地址:81/showdoc/web/#/page/5。
（6）手机验证码登录接口文档地址:81/showdoc/web/#/page/7。
（7）获取Banner列表接口文档地址:81/showdoc/web/#/page/9。
（8）获取商品列表接口文档地址:81/showdoc/web/#/page/11。
（9）获取商品分类导航接口文档地址:81/showdoc/web/#/page/15。
7.5 设计流程
7.5.1 我的界面列表导航设计
仿华为商城微信小程序底部标签导航分为三个：首页、分类、我的；底部标签导航选中时图片是
红色，文字颜色也是红色，非选中状态呈现为灰色；在我的界面采用列表式导航设计方式，这也是很
多App和小程序都会采用的一种设计方式，如图所示。
我的
（1）创建hwshop仿华为商城项目，不使用云开发，在文件配置首页、分类、我的底
部标签导航，配置首页、分类、我的页面路径，代码如下所示。
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/me/me"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTitleText": "华为商城",
"navigationBarTextStyle": "black"
},
"tabBar": {
"selectedColor": "#ee0000",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"color": "#999999",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/images/bar/",
"selectedIconPath": "pages/images/bar/"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "pages/images/bar/",
"selectedIconPath": "pages/images/bar/"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "pages/images/bar/",
"selectedIconPath": "pages/images/bar/"
}
]
},
"sitemapLocation": ""
}
（2）在pages/me/文件配置我的页面导航背景色为红色及标题为我的，文字颜色为白
色，代码如下所示。
{
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#EE0000",
"navigationBarTextStyle": "white"
}
（3）在pages/me/文件进行我的界面布局设计，采用列表式导航设计方式，代码如下所
示。
切换账号登录
（4）在pages/me/文件进行我的界面样式渲染，代码如下所示。
.head {
width: 100%;
height: 90px;
background-color: #e00;
display: flex;
flex-direction: row;
}
.headIcon {
margin: 10px;
}
.headIcon image {
border-radius: 50%;
}
.login {
color: #fff;
font-size: 15px;
font-weight: bold;
position: absolute;
left: 100px;
margin-top: 20px;
}
.login button {
background-color: #e00;
color: #fff;
font-size: 13px;
padding: 0px;
}
button::after {
border: none;
}
.switchLogin {
background-color: #cd0000;
border-radius: 20px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.detail {
color: #fff;
font-size: 15px;
position: absolute;
right: 10px;
margin-top: 30px;
}
.nav {
display: flex;
flex-direction: row;
padding-top: 10px;
padding-bottom: 10px;
}
.nav-item {
width: 25%;
font-size: 13px;
text-align: center;
margin: 0 auto;
}
.hr {
width: 100%;
height: 10px;
background-color: #f9f8f6;
}
.order {
padding-left: 15px;
font-size: 13px;
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
}
.order image {
margin-right: 10px;
}
.detail2 {
font-size: 13px;
position: absolute;
right: 10px;
margin-top: 15px;
color: #888;
}
.line {
height: 1px;
width: 100%;
background-color: #666;
opacity: 0.2;
}
.item {
display: flex;
flex-direction: row;
}
7.5.2 账号登录
微信小程序登录一般会采用两种方式：
（1）通过微信授权来获取微信用户的昵称、头像等信息，微信用户授权
rInfo(OBJECT) 接口有调整，使用该接口将不再出现授权弹窗，所以不能使用这样的方式
进行授权，但是微信授权提供其他两种方式：一种是使用弹窗进行授权，需要使用button组件，示
例代码如下所示。
另一种方式是只展示用户的昵称、头像信息，使用
（2）通过账号登录的方式，这种方式需要用户进行注册，提供用户登录账号。
下面采用这两种方式来进行登录设计，如图所示。
账号密码登录 手机快捷登录
（1）在pages/me/文件进行微信授权登录，同时提供账号登录入口，进行两种登录方式的
切换，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {
nickName: '授权登录',
canIUse: e('rInfo'),
headIcon:'/pages/images/icon/'
},
onLoad: function(options) {
ogin();
},
bindGetUserInfo: function (e) {//授权登录
var data = fo;
a({
nickName: me,
headIcon: Url
});
},
switchLogin: function () {//切换账号登录
teTo({
url: '../login/login',
})
},
checkLogin: function() {//校验登录，优先使用账号登录，再使用微信授权登录
var userId = rageSync("userId");
if (userId != null && userId != "") {
a({
nickName: rageSync("nickName")
});
}else{
var that = this;
ting({
success: function (res) {
if (tting['fo']) {
rInfo({// 已经授权，可以直接调用 getUserInfo 获取头像昵称
success: function (res) {
var data = fo;
a({
nickName: me,
headIcon: Url
});
}
})
}
}
})
}
}
})
（2）在文件里配置登录路径"pages/login/login"，在文件里配置页面标
题，代码如下所示。
{
"navigationBarTitleText": "账号登录"
}
在里配置访问服务器域名和用户id全局参数，示例代码如下所示。
globalData: {
userInfo: null,
host: ':8888',
userId: null//用户id
}
（3）在pages/login/文件里进行登录布局设计，包括账号密码登录、手机快捷登
录，代码如下所示。
（4）在pages/login/文件里进行登录样式渲染，代码如下所示。
.loginTitle{
display: flex;
flex-direction: row;
width: 100%;
font-size: 15px;
}
.select{
color: #EE0000;
width: 50%;
text-align: center;
height: 48px;
line-height: 48px;
border-bottom:5rpx solid #EE0000;
font-weight: bold;
}
.default{
margin: 0 auto;
padding: 15px;
}
.hr{
height: 1px;
width: 100%;
background-color: #666666;
opacity: 0.2;
}
.account{
display: flex;
flex-direction: row;
align-items: center;
}
.ac{
padding:15px;
font-size:15px;
font-weight: bold;
color: #666666;
}
.ipt input{
text-align: left;
width: 140px;
color: #000000;
}
.placeholder-style{
font-size: 14px;
color: #cccccc;
}
.login{
margin: 0 auto;
text-align: center;
padding-top:10px;
}
.login button{
width: 90%;
color: #ffffff;
background: #EE0000;
height: 40px;
border-radius: 20px;
line-height: 40px;
}
.fp{
font-size: 13px;
color: #3e13da;
padding:5px;
text-align: right;
margin-right:10px;
margin-top:10px;
}
.btn{
position: absolute;
right: 10px;
top: 10px;
width: 90px;
font-size: 12px;
color: #666666;
background-color: #f2f2f2;
}
（5）在pages/login/文件里用来处理账号密码登录逻辑和手机快捷登录逻辑，添加注
册页面跳转路径，代码如下所示。
var app = getApp();
var host = ;
var timer;
var timeSecond = false,
sendBolen = false;
Page({
data: {
currentTab: 0,
form_info: '',
yzmvalue: '获取验证码',
mobile: '',
timevalue: 60,
flag: true,
verifyCode: '',
code: ''
},
onLoad: function(options) {
Code();
},
getNewCode: function() { //登录页面进行一次获取新的code,用户登录凭证（有效期五分钟）
var that = this;
({
success: function(data) {
a({
code:
});
}
})
},
switchNav: function(e) { //账号密码登录和手机快捷登录切换
var that = this;
if (tTab == t) {
return false;
} else {
a({
currentTab: t
});
a({
form_info: ''
});
}
},
toRegister: function(e) { //跳转注册页面
teTo({
url: '../register/register'
})
},
formSubmit: function(e) { //表单登录，进行提交
var that = this;
var loginName = ame;
var mobile = ;
var loginPassword = assword;
var verifyCode = Code;
var loginType = tTab;
var code = ;
t({
url: host + '/api/user/swxLogin',
method: 'GET',
data: {
'loginName': loginName,
'mobile': mobile,
'loginPassword': loginPassword,
'verifyCode': verifyCode,
'loginType': loginType,
'code': code
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
(res);
var code = ;
var msg = ;
if (code == '0000') {
= ;
rageSync('userId', );
rageSync('nickName', me)
rageSync('swx_session', _session);
rageSync('userMobile', );
rageSync('openId', );
rageSync('token', );
ch({
url: '../index/index'
})
("2")
} else {
p(msg);
return false
}
}
})
},
showTip: function(message) { //弹出消息提示
dal({
title: '温馨提示',
showCancel: false,
content: message
})
},
getcode: function(e) { //获取验证码
var that = this;
a({
flag: false
}); //显示时间
timer = setInterval(e, 1000); //验证码倒计时
t({
url: host + '/api/user/getVerifyCode',
method: 'GET',
data: {
'mobile':
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
(res);
var code = ;
var msg = ;
if (code == '0000') {
clearInterval(timer);
a({
verifyCode: msg
});
} else {
clearInterval(timer);
a({
yzmvalue: '获取验证码',
timevalue: 60,
flag: true
});
p(msg);
return false
}
}
})
},
getMobile: function(e) { //获取手机号
a({
mobile:
})
},
settime: function() { //验证码倒计时
var timevalue = lue;
if (timevalue == 0) {
clearInterval(timer)
a({
yzmvalue: '重新获取',
timevalue: 60,
flag: true
})
timeSecond = false;
sendBolen = false;
return;
}
timevalue--;
timeSecond = true;
sendBolen = true;
a({
timevalue: timevalue,
flag: false
})
},
})
这样就完成两种登录的设计，可以使用账号密码登录和手机快捷登录来进行小程序的登录，可以
使用账号xiaogang，密码123456进行登录测试。
7.5.3 用户注册
用户可以通过用户名密码进行登录，在登录之前需要获取登录账号，这样可以通过注册功能来获
取账号信息，在登录界面提供入口，如果没有账号，可以跳转注册页面进行账号注册。
注册入口 账号注册
下面一起设计一下注册功能。
（1）在文件里配置注册路径"pages/register/register"，在文件里
配置页面标题，代码如下所示。
{
"navigationBarTitleText": "账号注册"
}
（2）在pages/ register/文件里进行账号注册布局设计，代码如下所示。
（3）在pages/ register/文件里进行账号注册样式渲染，代码如下所示。
.content{
height: 600px;
}
.loginTitle{
margin: 10px;
text-align: center;
}
.select{
font-size:12px;
color: red;
width: 50%;
text-align: center;
height: 45px;
line-height: 45px;
border-bottom:5rpx solid red;
}
.default{
font-size:12px;
margin: 0 auto;
padding: 15px;
}
.hr{
border: 1px solid #cccccc;
opacity: 0.2;
}
.account{
display: flex;
flex-direction: row;
align-items: center;
}
.ac{
padding:15px;
font-size:14px;
font-weight: bold;
color: #666666;
width: 60px;
text-align: center;
}
.ipt input{
text-align: left;
width: 200px;
}
.placeholder-style{
font-size: 14px;
color: #cccccc;
}
.login{
margin: 0 auto;
text-align: center;
padding-top:10px;
}
.login button{
width: 90%;
color: #ffffff;
background: #EE0000;
height: 40px;
border-radius: 20px;
line-height: 40px;
}
（4）在pages/ register/文件里进行账号注册业务逻辑处理，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {},
formSubmit: function(e) { //注册表单提交
var that = this;
var loginName = ame;
var mobile = ;
var loginPassword = assword;
var confirmPassword = mPassword;
var nickName = me;
t({
url: host + '/api/user/register',
method: 'GET',
data: {
'loginName': loginName,
'mobile': mobile,
'loginPassword': loginPassword,
'confirmPassword': confirmPassword,
'nickName': nickName
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
var code = ;
var msg = ;
if (code == '0000') {
ctTo({
url: '../login/login'
})
} else {
p(msg);
return false
}
}
})
},
showTip: function(message) { //弹出消息提示
dal({
title: '温馨提示',
showCancel: false,
content: message
})
}
})
7.5.4 首页布局设计及动态获取数据
仿华为商城小程序首页内容分为几个区域：搜索区域、海报轮播区域、宫格导航区域、精品推荐
区域、手机区域、笔记本电脑区域，如图所示。
下面一起进行首页的布局设计。
首页 手机 笔记本电脑
（1）在pages/index/文件里对搜索区域、海报轮播区域、宫格导航区域、精品推荐
区域、手机区域、笔记本电脑区域布局设计，代码如下所示。
duration="{{duration}}">
{{}}
精品推荐
手机
笔记本电脑
（2）在pages/index/文件里对搜索区域、海报轮播区域、宫格导航区域、精品推荐
区域、手机区域、笔记本电脑区域样式渲染，代码如下所示。
.content{
width: 100%;
font-family: "Microsoft YaHei";
}
.search{
width: 100%;
height: 40px;
line-height: 40px;
}
.searchInput{
width: 90%;
background-color: #f9f9f9;
height: 30px;
line-height: 30px;
border-radius: 15px;
display: flex;
justify-content:left;
align-items:center;
margin: 0 auto;
padding-left:10px;
}
.searchContent{
font-size:12px;
color: #777777;
margin-left: 10px;
}
.haibao{
text-align: center;
width: 94%;
margin: 0 auto;
}
.silde-image{
width: 100%;
height: 100%;
border-radius: 5px;
}
.nav{
margin: 20px;
display: flex;
justify-content: space-between;
}
.nav-item{
text-align: center;
font-size: 13px;
color: #999999;
}
.category{
font-size:18px;
text-align: center;
margin:10px;
}
.items{
display:flex;
flex-direction:row;
padding-left: 10px;
}
.item{
width: 250px;
height: 190px;
border-radius: 5px;
margin-bottom: 10px;
text-align: center;
margin-right:10px;
}
.pic{
margin-top: 5px;
}
.pic image{
width:100px;
height:120px;
border-radius: 5px;
}
.name{
font-size: 12px
}
.price{
color:red;
margin-top:2px;
font-size: 16px;
}
.items-normal{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item-normal{
width: 50%;
height: 190px;
border-radius: 5px;
text-align: center;
}
.hr{
height: 10px;
width: 100%;
background-color: #cccccc;
opacity: 0.2;
}
（3）在pages/index/文件里动态获取海报轮播图片、精品推荐商品列表、手机列表、
笔记本电脑和设置首页可以进行分析的业务逻辑处理，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
imgUrls: [
"/pages/images/haibao/",
"/pages/images/haibao/",
"/pages/images/haibao/"
],
navs:[
{
"img": "/pages/images/icon/",
"name":"华为专区"
},
{
"img": "/pages/images/icon/",
"name": "荣耀专区"
},
{
"img": "/pages/images/icon/",
"name": "领券中心"
},
{
"img": "/pages/images/icon/",
"name": "安心居家"
},
{
"img": "/pages/images/icon/",
"name": "拼团"
}
],
hotList:[],
phoneList:[],
pcList:[],
host: host
},
onLoad: function (options) {
var page = this;
nerList();
dsList();
},
getBannerList: function () {//获取海报轮播图片
var page = this;
t({
url: host + '/api/banner/getBannerList?type=1',
method: 'GET',
data: { },
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var code = ;
var list = ;
if (code == '0000') {
var code = ;
var list = ;
if (code == '0000') {
var imgUrls = new Array();
for (var i = 0; i < ; i++) {
(host + "/" + list[i].url);
}
(imgUrls);
a({ imgUrls: imgUrls });
}
}
}
})
},
getGoodsList: function () {//获取商品图片
var page = this;
t({
url: host + '/api/goods/getHomeGoodsList',
method: 'GET',
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var book = ;
var phoneList = ;
var pcList = ;
a({ hotList: (pcList) });//精品推荐列表
a({ phoneList: phoneList });//手机列表
a({ pcList: pcList });//笔记本电脑列表
}
})
},
onShareAppMessage: function () {// 用户点击右上角分享
return {
title: '华为商城', // 分享标题
desc: '华为商城是华为旗下面向全国服务的电子商务平台官网,提供正品华为手机(华为P30系列、华为
Mate20系列、华为nova系列、荣耀9X、荣耀智慧屏、荣耀20、荣耀V20等', // 分享描述
path: '/pages/index/index' // 分享路径
}
},
})
这样就完成了首页的布局设计，同时通过API接口动态从服务器获取海报轮播图片列表、精品推
荐列表、手机列表、笔记本电脑列表。
7.5.5 分类导航设计及动态获取数据
分类导航设计采用手风琴式的导航方式来显示商城商品的导航，分类页面可以划分为三个区域：
搜索区域、导航区域、导航内容显示区域，如图所示。
新品 华为手机
下面一起设计分类页面和动态获取分类导航数据。
（1）在pages/category/文件里对分类导航进行页面布局设计，代码如下所示。
bindtap="switchNav">{{ypeName}}
（2）在pages/category/文件里对分类导航进行页面样式渲染，代码如下所示。
.content {
width: 100%;
font-family: "Microsoft YaHei";
}
.search{
width: 100%;
height: 40px;
line-height: 40px;
}
.searchInput{
width: 90%;
background-color: #f9f9f9;
height: 30px;
line-height: 30px;
border-radius: 15px;
display: flex;
justify-content:left;
align-items:center;
margin: 0 auto;
padding-left:10px;
}
.searchContent{
font-size:12px;
color: #777777;
margin-left: 10px;
}
.category {
display: flex;
flex-direction: row;
}
.left {
width: 30%;
font-size: 13px;
}
.left view {
text-align: center;
height: 45px;
line-height: 45px;
}
.select{
background-color: #f9f9f9;
border-left:2px solid #CD0000;
color: #CD0000;
}
.normal{
background-color: #ffffff;
border-bottom: 1px solid #f2f2f2;
}
.space{
width: 1px;
background-color: #f2f2f2;
}
.right{
width:70%;
}
.line{
height: 1px;
width: 100%;
background-color: #dddddd;
opacity: 0.2;
}
.title{
padding: 10px;
font-size: 13px;
}
.items{
display: flex;
flex-wrap: wrap;
justify-content: space-left;
}
.item{
width: 33%;
height: 100px;
text-align: center;
padding-top:10px;
}
.item image{
width: 50px;
height: 50px;
}
.name{
font-size: 13px;
}
（3）在pages/category/文件里对分类导航进行业务逻辑处理，代码如下所示。
var app = getApp();
var host = ;
Page({
data: {
flag: 0,
currentTab: 0,
category: []
},
onLoad: function (options) {
var page = this;
tegory();
},
loadCategory:function(){
var page = this;
t({
url: host + '/api/category/getCategoryList',
method: 'GET',
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
(res);
var code = ;
var category = ;
if (code = '0000') {
a({ category: category });
}
}
})
},
switchNav: function (e) {
var page = this;
var id = ;
if (tTab == id) {
return false;
} else {
a({ currentTab: id });
}
a({ flag: id });
}
})
这样就可以完成分类导航设计，同时可以动态获取分类导航及导航对应的数据。
总结评价
本节课主要通过仿华为商城微信小程序实例强化微信小程序设计的知识点与应用。