《PHP程序设计与微信小程序案例教程》 课件全套 谭丽君 1.微信小程序入门 -7.微信小程序的发布

第1章微信小程序入门微信小程序开发1.1什么是微信小程序微信小程序（WechatMiniProgram），是一种不需要下载安装即可使用的应用，用户扫一扫或搜一下即可打开应用。微型小程序应用的领域非常多，包括教育、媒体、交通、房地产、生活服务，旅游、电商、餐饮，民政民生，科技等多个领域。微信小程序以快捷、低成本优势，为电商行业实现了更多的盈利，为消费者带来更好的服务。1.2微信小程序开发流程1.微信小程序运行流程1.2微信小程序开发流程

2.微信小程序开发流程打开微信公众平台官网依次完成账号信息、邮箱激活、信息登记选择注册的账号类型：小程序1.3注册微信小程序账号1.注册微信小程序账号123

2.查找自己的小程序id和AppSecret登录微信公众平台官网在左侧菜单中单击开发->开发管理，在中间窗口单击开发设置。1.3注册微信小程序账号小程序id即小程序的身份证号，AppSecret即小程序的密钥。1.4微信开发者工具1.下载微信开发者工具微信开发者工具是微信小程序专用开发集成环境。代码写在微信开发者工具中，可直接看到代码运行的结果、直接进行调试、上传。打开微信公众平台网站单击“工具”-->“下载”单击小程序开发文档下载步骤1.5新建和导入项目1.新建项目打开微信开发者工具单击管理-->单击+号，创建新项目。单击目录（提前创建一个空目录）-->粘贴自己的AppID-->单击不使用云服务-->单击新建。1.5微信开发者工具2.导入项目“单击导入”选择项目所在的文件夹单击新建1.6微信开发者工具的使用3.微信开发者工具界面（1）菜单栏项目：用于新建项目、关闭项目、导入项目、查看所有项目。文件：用于新建、保存、关闭文件。编辑：用于查找替换编辑代码、格式化代码。工具：用于访问一些辅助工具。界面：用于显示和隐藏开发者界面的各个窗口。设置：用于设置外观、快捷键、编辑器等。微信开发者工具：用于切换账号、更换开发模式、调试等操作。1.6微信开发者工具（3）模拟器可以模拟手机环境，在模拟器的底部状态栏会显示当前的页面路径。（4）编辑器编辑器包括左右两部分。左侧用于浏览项目目录结构，单击某个文件，在右侧对这个文件进行编写代码。（5）调试器：对小程序序进行调试。Console:“控制台”面板，用于输出代码中console.log()的调试信息，也可以直接编写代码执行。Sources:“源代码”面板，可以查看或编辑源代码，并支持代码调试。Wxml:

Wxml面板，查看和调试WXML和WXSS。1.6微信开发者工具（2）工具栏个人中心：左侧第一个按钮，显示当前登录用户的头像和用户名。模拟器、编辑器和调试器按钮：用于切换显示或隐藏对应的工具。编译下拉菜单：默认为普通编译。可以添加其它编译模式。编译：编写小程序代码后，要单击“编译”按钮，或者按下ctrl+s快捷键，才能在模拟器看到显示效果，在调试器中进行调试。预览：单击该按钮，会生成一个二维码，用手机微信扫一扫，可在手机微信中预览小程序的实际运行效果。真机调试：通过网络连接对手机上运行的小程序进行调试，可以在手机上更好地定位和查找出现的问题。切后台：模拟在手机中小程序切换后台的效果。清缓存：清除数据缓存或文件缓存。上传：当小程序代码调试成功后，单击上传按钮，可以将代码上传到小程序管理后台，做为体验版本。2.常用操作1.6微信开发者工具（1）搜索：打开一个代码文件，按下快捷键CTRL+F，弹出搜索框，输入需要查找的内容。搜索结果会以特殊颜色标识出来。如下图2-19所示。（2）替换：在搜索框中，单击查找框左边箭头，会显示替换框，在替换中输入替换的内容，进行替换，2.常用操作1.6微信开发者工具2.常用操作1.6微信开发者工具（3）撤消：可以用CTRL+Z撤销最近的操作。（4）格式化代码：对代码进行格式调整，查看代码更直观，不会有格式混乱。快捷键是ALT+SHIFT+F。（5）清除缓存启动小程序时，会保存一些登录信息，如果后面需要重新修改这些登录信息并调试，就需要清除缓存。（6）小程序的调试方法Console:编写完代码，单击工具栏中编译，或者ctrl+s,在调试区的Console中可以看到打印输出的信息。2.常用操作1.6微信开发者工具console调试窗口2.常用操作1.6微信开发者工具（7）小程序开发者文档是微信小程序的开发教程。

2.1微信小程序代码框架介绍

主讲人：谭丽君微信小程序开发2.1微信小程序代码框架介绍1.微信小程序前端与网站前端网页的相同点与区别

2.1微信小程序代码框架介绍

1.微信小程序前端的开发技术使用wxml、js、wxss三种开发语言组合使用，见表3-2所示。表3-2微信小程序前端的开发技术2.微信小程序前端的开发技术2.1微信小程序代码框架介绍3.微信小程序的文件类型

2.1微信小程序代码框架介绍

4.小程序的目录结构新建一个小程序项目

2.1微信小程序代码框架介绍

4.小程序的目录结构

2.2微信小程序JSON文件

主讲人：谭丽君微信小程序开发2.2微信小程序JSON文件JSON是一种数据格式，不是编程语言。Json文件的语法格式：包含在一个大括号中，通过key：value键值对的方式来描述数据。key必须放在一对双引号中。最后特别强调，JSON文件中不能使用注释。2.2微信小程序JSON文件（1）全局配置文件在项目的根目录有一个

app.json，它是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。2.2微信小程序JSON文件（2）页面JSON文件在第2章新建项目目录中，

pages/index和

pages/logs

目录下的index.json和

logs.json文件，就是页面JSON文件。在页面JSON文件中可以设置顶部导航栏的背景颜色、文字。主讲人：谭丽君2.3微信小程序代码WXML微信小程序开发2.3.1WXML基本语法WXML是从HTML（超文本标签语言）衍生而来的一种在小程序前端页面使用的语言，WXML仍然是标签语言，使用标记标签来描述页面的结构，页面内容写在标签内部.2.3.1WXML基本语法双标签：成对出现的标签。格式：<关键词>内容</关键词>例如：视图容器<view></view>单标签：不成对出现的标签。格式：<关键词/>例如：输入框<input/>1.标签：标签由一对尖括号包围关键词。2.3.1WXML基本语法通用属性大部分标签都有的属性。例如：class、id、style等专用属性不同标签有自己独特属性。例如：<inputpassword="true"/>password作用：输入框中输入内容以小圆点显示2.标签属性:给组件设置参数用的。2.3.1WXML基本语法3.常用组件2.3.2制作第一个小程序"pages":["pages/test/test","pages/index/index","pages/logs/logs"],<view>第一个小程序</view>

<view>Hello

World</view>

<inputplaceholder="请输入姓名"/>新建一个微信小程序运行效果步骤一app.json文件步骤二test.wxml文件2.3.3制作“景区名片”页面1.“景区名片”页面框架大框<viewclass="card">大标题框<viewclass="big-title">图片<image>内容框<viewclass="content">小标题框<viewclass="small-title">段落框<viewclass="dl">2.3.3制作“景区名片”页面1.“景区名片”页面代码"pages":["pages/jqmp//jqmp","pages/index/index","pages/logs/logs"],<viewclass="card"> <viewclass="big-title">荔波小七孔</view> <imagesrc="../../images/lb.jpg"></image> <viewclass="content"> <viewclass="small-title">简介</view> <viewclass="dl">小七孔风景区位于贵州省荔波县城南部30余公里的群峰之中，景区全长7公里，面积约10平方公里，有百多个游览景点。是集山、水、林、洞、湖、瀑为一体的原始奇景。1988年被列为国家级自然保护区。</view> </view> </view>步骤一app.json文件步骤二jqmp.wxml文件2.3.4制作“比较成绩”页面1.“比较成绩”页面框架框框按钮框框框按钮框文本输入框文本输入框文本2.3.4制作“比较成绩”页面

2.“比较成绩”页面WXML代码<view><text>请输入语文成绩</text><inputtype="number"/></view><view><text>请输入数学成绩</text><inputtype="number"/></view><button>比较成绩</button><view><text>比较结果：</text></view>{

"pages":[

"pages/bjcj/bjcj","pages/index/index","pages/logs/logs"

]}步骤一app.json步骤二bjcj.wxml

2.3.5数据绑定

1.数据绑定：就是通过双重花括号{{变量名}}的语法格式，将一个变量绑定到页面上。小程序上的大部分数据都是后端服务器返回给小程序的，也就是说这些数据是动态的，每次加载小程序都要先访问服务器，服务器处理数据后，再返回小程序显示数据绑定

2.3.5数据绑定

2.数据绑定的操作方法wxml文件js文件12在标签内容或者属性需要数据绑定的地方写入{{变量名}}对该变量进行定义，把变量的值放在下面所示代码data:{}中。

2.3.5数据绑定

3.数据绑定示例：<view>{{name}}</view>index.js代码Page({/*页面的初始数据*/data:{name:'贵州黄果树'}})①index.wxml②index.js运行结果

2.3.5数据绑定

4.数据绑定{{}}的使用位置：wxml中数据绑定的位置除了放在内容中，还可以放在其它位置。

2.3.6列表渲染

列表渲染：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:for是标签的一种特殊属性，称为控制属性。默认数组的当前项的下标变量名默认为index，步骤一index.wxml默认数组当前项的变量名默认为item。步骤二index.js运行效果

2.3.7制作“轮播图”

一、轮播组件二、swiper常用属性<swiper></swiper><swiper-item>...</swiper-item>

<swiper-item>...</swiper-item>父级儿子级<swiper

indicator-dots="true“autoplay="true"

interval="1000"

circular="true">

2.3.7制作“轮播图”

步骤1：App.json文件步骤2：在项目根目录下创建images文件夹，粘贴4张图片

2.3.7制作“轮播图”

步骤3：lx.wxml文件

2.3.7制作“轮播图”

使用列表渲染写轮播组件注意：1.wx:for写在需要循环的组件里2.item是数组里每一项3.注意在wxml中数组和变量一定要写在{{}}里。步骤1：lx.wxml文件步骤2：lx.js文件2.3.8条件渲染在wxml中，使用wx:if=“{{条件

}}"来判断是否需要渲染该组件。示例：成绩大于80，显示良好，否则大于60，显示及格<view

wx:if="{{cj>80}}">良好</view><view

wx:elif="{{cj>60}}">及格</view>Page({/***页面的初始数据*/data:{cj:70},步骤1：lx.wxml文件步骤2：lx.js文件主讲人：谭丽君2.4微信小程序WXSS微信小程序开发

2.4

微信小程序wxss

全局样式app.wxss对当前小程序的所有页面样式生效。页面样式:文件名.wxss

对当前页面样式生效。例如index.wxss12

选择器{

样式属性名：属性值；

样式属性名：属性值；...}

2.4.1WXSS的基本语法

WXSS是样式语言，用于描述WXML的组件样式.WXSS的语法格式选择器就是要设置样式的元素。.yw{width:300rpx;height:100rpx;background:red;}示例：给class类名为yw的组件，设置样式:宽度300rpx、高度100rpx、背景色为红色。<view

class="yw">语文成绩</view><view>数学成绩</view><view>英语成绩</view>index.wxss文件index.wxml文件12

2.4.1WXSS的基本语法

2.4.2WXSS选择器

1.标签选择器格式：标签名{样式属性名：属性值;}2.类选择器格式：.类名{样式属性名：属性值;}3.id选择器格式：#id名{样式属性名：属性值;}

2.4.2WXSS选择器

4.并集选择器格式：选择器1，选择器2，...选择器n{样式属性名：属性值;}5.后代选择器格式：祖先后代{样式属性名：属性值;}

2.4.3WXSS常用样式

1.字号设置font-size格式选择器{font-size:合法的尺寸单位;}rpx（responsivepixel）单位:可以根据屏幕宽度进行自适应。rpx单位是wxml提出的一个新尺寸单位。2.字体加粗font-weight格式选择器{font-weight:字体粗度值;}

2.4.3WXSS常用样式

3.文本颜色color格式选择器{color:颜色值;}4．行高line-height格式选择器{line-height:值;}

2.4.3WXSS常用样式

5．首行缩进text-indent格式：选择器{text-indent:尺寸单位;}6.水平对齐方式text-align格式：选择器{text-align:left|right|center|justif}使用em作为首行缩进的尺寸单位，1em就表示一个汉字的长度。

2.4.3WXSS常用样式

7.元素的大小格式选择器{width:数值;height:数值;}8.背景颜色background-color格式选择器{background-color:颜色;}

2.4.4盒子模型盒子包括：外边距(margin)+边框(border)+内边距(padding)+元素内容。内容上外边距上内边距下内边距下外边距右内边距右外边距左内边距左外边距右边框线左边框线下边框线上边框线

2.4.4盒子模型1.边框

2.4.4盒子模型2.边框圆角border-radius

2.4.4盒子模型3.padding内边距

2.4.4盒子模型4.margin外边距

2.4.4盒子模型5.box-shadow边框阴影选择器{box-shadow:h-shadowv-shadowblurspreadcolor;}

2.4.5弹性布局flex（flexiblebox）弹性布局盒模型。1.容器：使用display:flex样式的元素，称为flex容器。2.项目：它的所有子元素自动成为容器成员，称为flex项目。3.两根轴：容器默认存在主轴和交叉轴。它们是垂直关系。（1）容器属性

2.4.5弹性布局(2)项目属性

2.4.5弹性布局index.wxmlindex.jsindex.wxss运行效果

2.4.6制作“景区名片”样式“景区名片”页面框架大框<viewclass="card">大标题框<viewclass="big-title">图片<image>内容框<viewclass="content">小标题框<viewclass="small-title">段落框<viewclass="dl">

2.4.6制作“景区名片”样式“景区名片”页面框架嵌套步骤一，大框对应的WXSS样式代码如下图

2.4.6制作“景区名片”样式“景区名片”页面框架嵌套步骤二，加入大标题框、图片、内容框后对应的WXSS代码如下图

2.4.6制作“景区名片”样式“景区名片”页面框架嵌套步骤三，加入小标题框和段落框后，对应的WXSS代码如下图

2.4.7制作“比较成绩”样式“比较成绩”页面框架嵌套

2.4.7制作“比较成绩”样式“比较成绩”页面框架嵌套步骤一，对应的WXSS样式代码

2.4.7制作“比较成绩”样式“比较成绩”页面框架嵌套步骤二，对应的WXSS样式代码主讲人：谭丽君2.5微信小程序JS微信小程序开发

2.5.1.1JS变量、数据类型

1.变量JS是区分大小写的,变量名,函数,关键字都要区分大小写2.小程序变量定义var变量名=值在函数里面进行变量定义

data:{变量名:值,数组名:[]，对象名：{}}在data里定义变量数组数组

[,,,]数组就是存放一组数据。读取数组第一个元素数组名[0]读取数组第二个元素数组名[1]面向过程和面向对象的区别面向对象思想对象名.函数名()大象放冰箱：如果是用面向对象编程：冰箱对象.装大象函数（）面向过程思想第1步做什么第2步做什么第3步做什么大象放冰箱：如果是用面向过程编程：第1步：把冰箱门打开，第2步：把大象推进去，第3步：把冰箱门上。对象书写格式、对象获取属性、对象调用函数的格式对象要调用函数

格式对象名.函数名()对象书写格式对象

{属性名：值，属性名：值，属性名：值}对象获取属性

格式对象名.属性名()函数就是方法

2.5.1.1JS变量、数据类型

示例：新建一个小程序，创建xs页面，打开xs.js文件中，在data中name初始化值”刘红”，在onLoad函数中定义一个变量age=18，并打印输出这2个变量。"pages":["pages/xs/xs","pages/index/index","pages/logs/logs"],Page({data:{name:"刘红"},onLoad:function(options){varage=18console.log()console.log(age)},打印输出用this.data来访问Page页面中data里的数据打印输出结果app.jsonxs.js2.数据类型stringnumberboolean数组对象

2.5.1.1JS变量、数据类型

数组名：[值，...值]对象名：{属性名:值，属性名:值}包括整数或小数""或''包围的truefalse2个值数组里面存放了一组数据。数组的第一个元素下标为0.对象由一对花括号包含。访问对象属性有2种方法：方法1：对象名.属性名;方法2：对象名[“属性名”]JS函数书写格式JS函数书写有3种格式：1.标准格式

函数名：function(){

一段代码}2.匿名函数3.箭头函数

2.5.1.1JS变量、数据类型

示例：在xs.js文件data中初始化数组jzfp，并打印输出Page({data:{jzfp:["刘红","王小","李明"]},onLoad:function(options){console.log(this.data.jzfp)},xs.js

2.5.1.1JS变量、数据类型

1示例：在xs.js中,在data中初始化对象xs，并打印输出Page({data:{xs:{name:"小明",sex:"男",age:12,height:180}},onLoad:function(options){console.log(this.data.xs)}xs.js2.5.2微信小程序JS文件app.js文件是项目的入口文件。整个小程序必须有，并且只有一个App()，否则会出现错误。页面逻辑JS文件:文件名.js全局逻辑app.js对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。2.5.2微信小程序JS文件页面逻辑JS文件2.5.2微信小程序JS文件页面逻辑JS文件1.Page方法：生成一个页面,必须有,否则会出错。2.Page中data对象，主要存放该页面的数据，Page({data:{

}})2.5.2微信小程序JS文件页面逻辑JS文件3.Page中函数（1）Page中小程序的生命周期函数在小程序中每个页面都存在着一条生命时间线，包括代码加载>页面渲染>显示到页面上(不同页面之前切换时，就会产生隐藏)-->页面的销毁（关闭小程序），这样一个流程叫做生命周期。就像花的生命周期一样，从种子发芽>开花>结果实>凋谢。页面生命周期函数及功能2.5.2微信小程序JS文件页面逻辑JS文件3.Page中函数（2）Page中自定义函数函数名:function(参数){//函数内容}2.5.2微信小程序JS文件4.事件事件绑定在组件上，当触发事件时，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset。事件响应的操作步骤步骤:1在wxml文件中，给组件绑定一个事件处理函数。<标签事件名=“函数名”>步骤2:在对应的js文件中，写上相应的事件处理函数，注意函数名要和wxml中绑定的函数名相同。

Page({函数名:function(参数){//函数内容}})2.5.2微信小程序JS文件4.事件示例在xs.wxml文件中view组件上绑定一个单击事件tj，触发tj事件后，在控制台输出view组件传过来的数据。步骤1:xs.wxml<viewid="box"data-km="Python"bindtap="tj">点击</view>步骤2:xs.jsPage({tj:function(e){console.log(e)

console.log(e.target.id)console.log(e.target.dataset.km)}})e：触发当前事件的组件。自定义数据属性data-名字打印触发当前事件的组件的属性。打印触发当前事件的组件id值。打印触发当前事件的组件中自定义数据km值。2.5.2微信小程序JS文件console.log(e)打印出来的内容如下图所示：2.5.3微信小程序JS中的数据处理1.如何访问Page中data里的数据和Page中函数（1）在函数中，可以直接使用this来访问Page页面中data里的数据和Page里的函数。在小程序中，this表示当前对象的一个引用，此时this所指向的对象为全局对象，也就是这个页面。this.data.变量名this.函数名格式如下2.5.3微信小程序JS中的数据处理（2）在API中，访问Page中data里的数据和Page里函数的操作步骤如下，什么是API？我们在3.5.4中进行详细讲解。varthat=this步骤2：在API里面用that来调用Page中data里的数据和Page里函数。步骤1：在API的外面，要先保存当前页面的this。that.data.变量名that.函数名2.5.3微信小程序JS中的数据处理示例：JS中数据处理在index.js中输入以下代码（1）在Page中data里定义了name、sex、age变量的值。（2）在Page中定义一个函数new，打印输出“新函数”3个字。（3）在onLoad函数中，直接用this调用data数组中变量。（4）在onLoad函数中，直接用this调用new函数。Page({/***页面的初始数据*/data:{name:"刘红",sex:"女",age:18},new:function(){console.log("新函数")},/***生命周期函数--监听页面加载*/onLoad:function(options){console.log(this.data)console.log()console.log(this.data.sex)console.log(this.data.age)console.log(this.new)}})index.js运行结果2.5.3微信小程序JS中的数据处理2.如何更新Page中data里的数据用this.setData()方法，修改的值才会在页面中显示，否则页面显示的是更改之前的值。this.setData({变量名:新的值})语法格式如下2.5.3微信小程序JS中的数据处理步骤1：在xs.wxml中输入如下代码<view>{{name}}</view>示例步骤2：在xs.js中输入如下代码Page({data:{name:""},new:function(){="王小"},/***生命周期函数--监听页面加载*/onLoad:function(options){this.setData({name:"李艺"})this.new()}

)}运行结果2.5.3微信小程序JS中的数据处理3.不同页面之间的数据传递（2）全局数据在不同页面之前传递（1）参数传递2种方法页面跳转过程中进行传递参数，参数传递在后面的章节中讲解首先把数据在全局数据中进行保存，然后每个页面从全局数据中读取。步骤2：在页面js文件中读取全局数据，格式如下getApp().globalData.变量名步骤1：在app.js文件中保存全局数据，格式如下App({globalData:{userInfo:null//把全局数据放在globalData对象里。}})2.5.4微信小程序API1.API的定义API的全称是ApplicationProgrammingInterface，即应用程序编程接口。API是一些预先定义的函数或功能模块。例如：微信小程序提供的获取用户信息、本地存储、支付功能、打开微信扫一扫。开发人员可以直接使用这些功能模块API，不需要知道里面代码是怎么实现的。API有同步和异步2种，用的多是异步，因此，本教材重点讲异步API。2.5.4微信小程序API2.调用异步API格式如下wx.API名称({

属性名：值,属性名：值success函数fail函数complete函数

})success为接口调用成功的回调函数，fail为接口调用失败的回调函数，complete为接口调用结束的回调函数，无论调用成功或者失败，都会执行complete中的代码。Success、fail、complete这三个回调函数调用时会传入一个Object类型参数，包含以下字段，回调函数的参数见下表调用函数函数名（参数

）调用普通函数调用API函数wx.函数名（{}）示例wx.showModal({title:"",content:"",success(res){if(res.confirm){console.log("我要支付")}elseif(res.cancel){console.log("我不想买了")}})2.5.4微信小程序API

微信登录的API，获得与用户身份有关的一些信息，如头像、名称等。wx.login({success(res){//api调用成功执行的代码},fail(res){console.log(res.errMsg)//api调用失败执行的代码},complete(res){//api调用完毕执行的代码})示例2.5.5常用API介绍1.显示消息提示框格式：wx.showToast(Objectobject)wx.showToast中参数说明2.5.5常用API介绍示例

在xs.js文件中输入以下代码//pages/index/index.jsPage({/***页面的初始数据*/data:{

},/***生命周期函数--监听页面加载*/onLoad:function(options){wx.showToast({title:'成功',icon:'success',duration:9000})}})运行效果2.5.5常用API介绍2.显示模态对话框格式：wx.showModal(Objectobject)显示模态对话框参数属性类型说明titlestring提示的标题contentstring提示的内容object.success回调函数中参数说明示例在xs.js中输入以下代码Page({onLoad:function(options){wx.showModal({title:'提示',content:'这是一个模态弹窗',success(res){if(res.confirm){console.log('用户点击确定')}elseif(res.cancel){console.log('用户点击取消')}}})}})代码运行效果2.5.5常用API介绍3.显示加载

提示框格式：wx.showLoading(Objectobject)如果要关闭提示框，需主动调用wx.hideLoading才能关闭。可以设置定时器进行定时关闭。示例

在xs.js文件中输入以下代码，显示加载中提示框，3秒后自动关闭加载中提示框Page({onLoad:function(options){wx.showLoading({title:'加载中',})

setTimeout(function(){wx.hideLoading()},3000)

}

})运行效果图setTimeout倒计时setTimeout(函数（）,毫秒数)setTimeout(function（）{console.log(“去学校广场集合”)},5000)2.5.5常用API介绍二、页面路由API：就是小程序页面之前的跳转。1.wx.relaunch()功能是关闭所有页面，打开到应用内的某个页面。示例：wx.reLaunch({url:'../index/index'})url参数的值是字符串型，是必填选，标明需要跳转的页面路径。2.wx.redirectTo()功能是关闭当前页面，跳转到应用内的某个页面示例：wx.redirectTo({url:''../index/index'})url参数的值是字符串型，是必填选，标明需要跳转的页面路径。2.5.5常用API介绍3.wx.navigateTo()功能是保留当前页面，跳转到应用内的某个页面示例：wx.navigateTo({url:'../index/index'})url参数的值是字符串型，是必填选，标明需要跳转的页面路径。主讲人：谭丽君2.6制作“比较成绩”js代码微信小程序开发

2.6制作“比较成绩”js代码

1.bjcj.wxml文件中给输入框添加bindchange事件、按钮添加bindtap事件，给最后一个view组件内容数据绑定{{result}}。框框按钮框文本输入框文本输入框文本2

<inputbindchange="yw"></input>13

<buttontype="primary"bindtap="bj">比较成绩</button>

<inputbindchange="sx"></input>

<view>比较结果{{result}}</view>34

2.6制作“比较成绩”js代码

Page({data:{cj1:0,cj2:0,result:'',},步骤1：在bjcj.js文件的Page中的data里给页面变量赋初值步骤2：在bjcj.js文件的Page中编写yw事件处理函数，yw:function(e){this.setData({cj1:Number(e.detail.value)})},e是触发事件的组件e.detail.value是获取用户输入的值this.setData是把e.detail.value的值赋值给cj1

2.6制作“比较成绩”js代码

步骤3：在bjcj.js文件的Page中编写sx事件处理函数，sx:function(e){this.setData({cj2:Number(e.detail.value)})},e是触发事件的组件e.detail.value是获取用户输入的值this.setData是把e.detail.value的值赋值给cj1

2.6制作“比较成绩”js代码

步骤4：在bjcj.js文件的Page中编写bj事件处理函数，bj:function(){varstr="成绩相等"if(this.data.cj1>this.data.cj2){str="语文成绩高"}if(this.data.cj1<this.data.cj2){str="数学成绩高"}this.setData({result:str})},如果cj1>cj2str的值为语文成绩高如果cj1<cj2str的值为数学成绩高用this.setData函数把str的值赋值给result给str变量赋值

2.6制作“比较成绩”js代码

优化代码：1.把2个输入框的绑定事件函数统一用fs2.分别给2个输入框添加data-name框框按钮框文本输入框文本输入框文本2

<inputbindchange="fs"data-name="cj1"></input>13

<buttontype="primary"bindtap="bj">比较成绩</button>

<inputbindchange="fs"data-name="cj2"></input>

<view>比较结果{{result}}</view>34

2.6制作“比较成绩”js代码

优化代码：在bjcj.js文件的Page中编写fs事件处理函数：fs:function(e){console.log(e)this.data[]=Number(e.detail.value)},

<inputbindchange="fs"data-name="cj1"></input>删除yw和sx函数第3章点餐小程序项目需求分析主讲人：谭丽君微信小程序开发

3.1点餐小程序项目需求分析

项目需求分析原则

从用户角度出发，与用户进行沟通交流，充分挖掘用户真实需求，分析并写出需求文档。

3.1点餐小程序项目需求分析

菜单菜单页面功能①轮播图②显示商品：

显示每种商品的图片、名称、价格和购物车按钮。③添加商品到购物车：点击“加入购物车”按钮，可以将商品添加到购物车。本项目点餐微信小程序主要实现点餐最基本的功能，包括菜单、购物车、确认订单、订单4个页面。菜单、购物车、订单3个页面底部都有标签导航，点击标签导航，可以相互切换这3个页面，并显示对应的页面内容。

3.1点餐小程序项目需求分析

购物车购物车页面功能①显示购物车中每件商品:包括每件商品的图片、名称、价格数量，最下面显示全选、合计、结算\删除，右上角显示编辑/完成。②修改商品数量：单击+或者-,可以增加或者减少商品数量。③删除商品：点击右上角“编辑”按钮，才能进行以下删除操作。★点击商品前面选框-->点击右下角“删除”按钮，可以删除选中的商品。★点击左下角“全选”-->点击右下角“删除”按钮，可以删除所有商品。④结算：点击右上角“完成”按钮，切换为“编辑”按钮，才能进行下面的结算操作。★点击商品前面选框，下方显示合计金额-->点击右下角“结算”按钮，可以结算选中的商品。★点击左下角“全选”，下方显示合计金额-->点击右下角“结算”按钮，可以结算所有商品。

3.1点餐小程序项目需求分析

确认订单页面功能①显示本次订单中每种商品的图片、标题、单价、数量，下面显示总金额、“立即结算”按钮。②点击“立即结算”，弹出“确认提交订单吗”窗口。★点击“确定”，显示下单成功，并跳转到订单页。本教程没有实现支付功能。★点击“取消”，弹出取消订单。确认订单

3.1点餐小程序项目需求分析

订单订单页面功能显示我的所有订单：①每个订单中会显示订单商品图片、标题、数量、实付金额、下单时间。②每个订单之间会有间隔显示。3.2点餐小程序页面框架分析1.菜单页面菜单的最上面是轮播图，中间是所有商品信息，底部导航栏在app.json文件里实现，菜单页面框架分析如下图3.2点餐小程序页面框架分析2.购物车购物车的右上角显示编辑/完成，可以相互切换，中间是购物车中商品信息，下面是结算。3.2点餐小程序页面框架分析3.确认订单确认订单中上面显示订单中商品信息，下面显示金额和立即结算。3.2点餐小程序页面框架分析4.订单订单的上面是订单商品信息，底部导航栏在app.json文件里实现。4.1创建点餐微信小程序主讲人：谭丽君微信小程序开发

4.1创建点餐微信小程序

1.创建微信小程序项目3.打开以下文件，删除部分代码4.拷贝图片文件序号文件名修改内容①index.js只保留下面代码

Page({})②index.wxml删除该文件里所有内容③index.wxss删除该文件里所有内容④app.json{"pages":["pages/index/index"]，

⑤app.wxss删除该文件里所有内容⑥app.js只保留下面代码App({})2.删除logs文件夹项目目录选择D:\phpstudy_pro\www\shop\小程序。

4.1.1初始化app.json文件

1.在app.json文件中添加页面路径对应页面依次为：菜单购物车确认订单订单

4.1.1初始化app.json文件

2.在app.json文件中设置底部导航栏属性描述color底部导航栏上的文字默认颜色selectedColor底部导航栏上的文字选中时的颜色，listlist是数组①pagePath属性：页面路径②text属性：底部导航栏上按钮文字③iconPath属性：图片路径，icon大小限制为40kb，建议尺寸为81px*81px。④selectedIconPath属性：选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px。list是数组，该数组中最少2个、最多5个tab元素。tab按数组的顺序排序，每个项都是一个对象。运行效果代码页面底部导航栏tabBar属性及值

4.1.2初始化app.js文件

getApp().globalData.api1.定义全局数据2.其它页面使用全局数据的方法全局数据api，存放后台接口文件相同的部分。

4.1.3初始化util.js文件

1.封装网络请求：在点餐小程序每个页面的js文件中，都需要使用wx.request发起网络请求，获取后台数据。为了减少重复写代码，在util.js文件中以_get和_post方法对wx.request进行封装。_get和_post使用箭头函数的定义格式函数名：（参数列表）=>{函数体}★url:服务器接口地址★data：发送到服务器的数据★success:网络请求成功回调函数★error:网络请求失败回调函数（1）通过module.exports对外暴露接口，其它的js文件中才可以使用_get和_post函数。

4.1.3初始化util.js文件

调用全局数据getApp().globalData.api（2）封装API请求代码4.1.3初始化util.js文件utils._post(参数1,参数2,function(res){

});2.小程序页面调用模块的方法constutils=require('../../utils/util.js');utils._get(参数1,参数2,function(res){

});（1）在需要调用_get和_post模块的js文件中，引入util.js文件。（2）调用_get模块的代码（3）调用_post模块的代码4.2制作“菜单”页面主讲人：谭丽君微信小程序开发

4.2.1“菜单”页面wxml文件

“菜单”页面包括轮播图、商品信息列表

4.2.1“菜单”页面wxml文件

轮播图对应的wxml代码如下序号名称使用组件数据绑定说明①轮播列表swiper-itemwx:for="{{movies}}"列表渲染，movies为数组名。②图片imagesrc="{{item.url}}"src属性值绑定了movies数组中当前元素的url值轮播图中数据绑定

4.2.1“菜单”页面wxml文件

每个商品信息对应的wxml代码每个商品信息中数据绑定序号名称使用组件组件部分属性、内容说明①商品列表viewwx:for="{{goods}}"列表渲染，goods为数组名②商品图片imagesrc="{{item.cover}}"src属性值绑定了goods数组中当前元素的cover值③商品名称view<viewclass="list-title">{{item.title}}</view>view内容绑定了goods数组中当前元素的title值。

④商品价格text<textclass="list-price">￥{{item.price}}</text>text内容绑定了goods数组中当前元素的price值。

⑤加入购物车textbindtap="addCart"data-id="{{item.id}}"绑定了事件函数addCart自定义了一个属性data-id，其值为goods数组中当前元素的id值。

4.2.2“菜单”页面wxss文件

轮播图效果和框架序号选择器样式内容①.head宽度、高度、顶上内边距、背景图片（创建一个线性渐变的"图像"(从上到下)）②.swiper宽度、高度、水平位置居中、顶上外边距③.swiperimage宽度、高度、设置圆角边框轮播图样式代码轮播图样式设置

4.2.2“菜单”页面wxss文件

每个商品信息效果和框架结构1.一行宽度100%，一行要放2个商品，每个商品各占父亲的一半50%，但每个商品外面有外边距，因此每个商品宽度设置45%,高度为460rpx..shop-list{width:45%;height:460rpx;}2.图片宽度超出手机屏幕的45%，所以要设置图片宽度(和父亲shop-list一样宽)100%,图片高度460-2行文字的高度-行间距=300rpximage{width:100%;height:300rpx;}在index.wxml文件中，再复制一个商品信息

4.2.2“菜单”页面wxss文件

2.每个商品信息效果和框架结构3.设置一行放2个商品.shop-list{float:left;}4.设置每个商品的外边距,(100%-45%*2)/4=2.5%,因为还有边框线的位置，所以外边距为2%.shop-list{margin:2%}

4.2.2“菜单”页面wxss文件

每个商品信息效果和框架结构5.需要给每个商品信息加外边框和圆角.shop-list{border:2rpxsolid#eee;border-radius:16rpx;}在index.wxml文件中，再复制一个商品信息6.图片离2行文字太近，需要设置图片下外边距.list-img{margin-bottom:30rpx}

4.2.2“菜单”页面wxss文件

每个商品信息效果和框架结构在index.wxml文件中，再复制一个商品信息7.分别设置标题文字和第2行文字大小和行高.list-title{

font-size:

30rpx;

line-height:

40rpx;}.list-text{

font-size:

26rpx;

line-height:

40rpx;}8..list-text设置弹性布局，“价格”和“加入购物车”两端对齐.list-text{

display:flex;

justify-content:

space-between;}

4.2.3“菜单”页面js文件

util.js文件1.封装网络请求wx.request，创建下面2个函数_get（url,data,success,error）_post(url,data,success,error)2.小程序页面调用这2个函数的方法在需要调用_get和_post的文件中，引入util.js文件。constutils=require("../../utils/util.js);

4.2.3“菜单”页面js文件

（1）单击“编译”时，会运行index.js文件中onLoad函数，并发送网络请求给后台goodsList接口，前后端数据交互如下图。4.2.3“菜单”页面js文件onLoad（）{}function(){}单击“编译”，会自动执行onLoad函数自定义函数调用自定义函数this.函数名()

函数名(){}普通函数匿名函数调用普通函数4.2.3“菜单”页面js文件onLoad()函数1.把res.data.data的值赋值给result2.把result的赋值给data里的goodsgetList函数utils._get（'goods/goodsList',param||{},匿名函数）function(res){console.log(res)varresult=res.data.data;that.setData(){goods:result;}}res是从服务器返回来的数据4.2.3“菜单”页面js文件getList函数功能显示加载提示框wx.showLoadingvarthat=this使用util.js文件中_get函数（'goods/goodsList',param||{},函数）1.关闭加载提示框2.把res.data.data的值赋值给result3.把result的赋值给data里的goodsfunction(res){wx.hideLoading();varresult=res.data.data;that.setData(){goods:result;}}res是从服务器返回来的数据4.2.3“菜单”页面js文件getList函数功能显示加载提示框wx.showLoadingvarthat=this使用util.js文件中_get函数（'goods/goodsList',param||{},函数）function(res){wx.hideLoading();varresult=res.data.data;that.setData(){goods:result;}}1.关闭加载提示框2.把res.data.data的值赋值给result3.把result的赋值给data里的goods

4.2.3“菜单”页面js文件

单击调试器-->Network-->XHR，单击goodsList接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。

4.2.3“菜单”页面js文件

单击Preview，可以查看goodsList接口返回给前端的数据

4.2.3“菜单”页面js文件

（2）点击“加入购物车”时，会运行index.js文件中addCart事件函数，并发送网络请求给后台add接口，前后端数据交互如下图addCart事件函数addCart()函数判断res.data.code的值是否为200，如果是弹出成功模态框，持续2秒获取点击加入购物车的商品id值utils._post（'cart/add',param,匿名函数）function(res){if(200==res.data.code){wx.showToast({title:res.data.msg||'操作成功',icon:'success',duration:2000}varparam={'goods_id':goods_id};vargoods_id=e.target.dataset.id;

res是从服务器返回来的数据

4.2.3“菜单”页面js文件

在导入的点餐小程序项目中，在菜单页中分别单击思念丝娃娃和红汤羊肉火锅“加入购物车”，每单击一次“加入购物车”，就会触发一次事件，因此在调试器中会出现两个add接口，单击add接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值，如左下图。还可以查看add接口接收的前端数据，如右下图。

4.2.3“菜单”页面js文件

单击Preview，可以查看add接口返回给前端的数据4.2.3“菜单”页面js文件2.“菜单”index.js文件代码模块如下表序号模块说明①constutils=require('../../utils/util.js');引入utils.js文件②Page

初始数据data初始数据：//轮播图movies:[{url:'/static/banner1.jpg'},{url:'/static/banner2.jpg'},{url:'/static/banner3.jpg'},{url:'/static/banner4.jpg'}],//商品列表goods:[]

函数onLoad功能：调用getList。getList功能：调用utils._get函数，发送网络请求给后台接口goodsList，并返回商品信息数据到前端。

addCart功能：调用utils._post函数，发送网络请求给后台接口add。4.3制作“购物车”页面主讲人：谭丽君微信小程序开发

4.3.1“购物车”页面wxml文件

购物车”页面包括右上角编辑、中间的商品信息和下面的结算。

4.3.1“购物车”页面wxml文件

1.“编辑/完成”框架②text组件内容为三元运算表达式，adminShow值为真时，显示“完成”，adminShow值为假时，显示“编辑”。①text组件，绑定了点击事件adminTap。

4.3.1“购物车”页面wxml文件

2.“购物车”页面会有以下两种情况：购物车是空的和购物车有商品购物车是空的购物车有商品

4.3.1“购物车”页面wxml文件

3.每个商品信息效果和框架结构如下图，

4.3.1“购物车”页面wxml文件

4.“购物车”中底部结算效果和框架结构，

4.3.2“购物车”页面wxss文件

1.“编辑/完成”效果和框架结构，序号选择器样式内容①.edit宽度、高度、背景颜色、行高、固定定位、顶上位置为0、弹性布局、右对齐②.edit>text右外边距、字颜色、字大小、“编辑/完成”wxss样式设置“编辑/完成”wxss样式代码

4.3.2“购物车”页面wxss文件

2.每个商品信息的效果和框架，wxss样式设置序号选择器样式内容1.shop宽度、顶上内边距、底下内容边距、自适应居中、底下外边距2.empty文本水平居中、内边距、字颜色3.shop-content底下外边距、溢出隐藏、弹性布局4.shop_check_box顶上外边距、左边外边距5.check_img宽度、高度、顶上外边距、左边外边距6.shop_img宽度、高度、外边距7.shop_detail该元素flex为1即填满剩下的宽，右外边距8.shop_name字大小、行高9.shop_detail_bottom弹性布局、顶上外边距10.shop_price行高、本元素flex为1即填满剩下的宽，11.num_change弹性布局、顶上内边距12.minus_icon宽度、高度13.shop_num行高、高度、宽度、文本居中、字大小14.add_icon宽度、高度

4.3.2“购物车”页面wxss文件

3.结算框架效果和框架结构，wxss样式设置序号选择器样式内容1.footer

宽度、高度、固定定位、底下0px、背景色、弹性布局2.check_box该元素flex为1即填满剩下的宽，弹性布局、行高、字大小3.check_img宽度、高度、顶上外边距、左边外边距4.check_text左外边距、行高5.footer_total_text字颜色、行高、该元素flex为1即填满剩下的宽6.footer_tatal_price字颜色7.footer_total,.deleteshop宽度、高度、背景色、字大小、字颜色、文本水平居中、行高

4.3.3“购物车”页面js文件

1.显示“购物车”页面时，会运行cart.js文件中onShow函数，并发送网络请求给后台接口cartList，前后端数据交互，接口地址

4.3.3“购物车”页面js文件

，单击Preview，可以查看cartList接口返回给前端的数据

4.3.3“购物车”页面js文件

2.在购物车页面，单击“加号”或“减号”时，会运行cart.js文件中numchangeTap事件函数，并发送网络请求给后台接口syncNum，前后端数据交互如下图，

4.3.3“购物车”页面js文件

在导入的点餐小程序项目中，在购物车页面，单击思恋丝娃娃“加号”，在调试器中，单击syncNum接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。如左下图

。还可以查看接口从前端接收的数据，如右下图。，

4.3.3“购物车”页面js文件

，单击Preview，可以查看goodsList接口返回给前端的数据

4.3.3“购物车”页面js文件

3.在购物车页面，选择商品，单击右下角删除时，会运行cart.js文件中delete事件函数，并发送网络请求给后台接口syncDelete，前后端数据交互如下图，

4.3.3“购物车”页面js文件

在导入的点餐小程序项目中，在购物车页面，点击“编辑”，选择“红汤羊肉火锅”，点击删除，在调试器中，单击syncDelete接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。如左下图。还可以查看接口接收的前端数据，如右下图。，

4.3.3“购物车”页面js文件

单击Preview，可以查看syncDelete接口返回给前端的数据

4.3.3“购物车”页面js文件

4.在购物车页面，选择商品后，单击结算按钮，会运行cart.js文件中goClearing事件函数，跳转到确认订单页面，如下图，

4.3.3“购物车”页面js文件

在导入的点餐小程序项目中，在购物车页面，选择思恋丝娃娃，单击结算按钮，打开调试器，单击Headers，可以查看跳转地址，如左下图。还可以查看跳转页面时传递的参数，如右下图，

4.3.3“购物车”页面js文件

，单击Preview，可以查看“确认订单”页面中，发送网络请求给confirm接口，返回给前端的数据

4.3.3“购物车”页面js文件

，序号代码划分说明①constutils=require('../../utils/util.js');引入utils.js文件②Page

初始数据data初始化以下数据：adminShow:false,//编辑items:[],//购物车数据total:0,//总金额checkedAll:false,//全选checkedGoo