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

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间1-1授课对象授课内容第1章微信小程序入门2.1微信小程序框架结构2.2JSON文件的常用操作主要教学内容教学过程及时间分配1.1什么是微信小程序微信小程序（WechatMiniProgram），是一种不需要下载安装即可使用的应用，应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序实现了即用即走的优点，使得微信小程序可以代替许多APP。1.2微信小程序开发流程1.微信小程序运行流程2.微信小程序开发流程1.3注册微信小程序账号打开浏览器，输入网址，打开微信公众平台官网。在微信公众平台官网首页，点击右上角的“立即注册”按钮。1.4下载安装微信开发者工具微信开发者工具是微信小程序专用开发集成环境。在微信开发者工具中可编辑和修改代码写，可查看代码运行的结果、可调试、上传。1.5新建和导入项目新建项目在桌面上双击安装好的微信开发者工具快捷图标，首次打开微信开发者工具时，需要用手机微信扫一扫，确认登录。然后弹出小程序管理列表页。点击管理，可以删除以前的项目。使用这个工具可以进行小程序、小游戏、公众号网页、代码片段开发。我们这里选择小程序，单击+号，创建新项目。2.导入项目如果我们已经有小程序项目了，可以导入项目，在下图2-16所示中，“单击导入项目”，单击目录下拉箭头，选择项目所在的文件夹，复制粘贴自己的AppID（打开微信公众平台网址，登录，在开发设置中会显示自己的AppID），单击导入。1.6微信开发者工具的使用微信开发者工具的主界面包括以下5个部分：菜单栏、工具栏、模拟器、编辑器、调试器。常用操作：搜索、替换、撤消、格式化代码、清除缓存、小程序的调试方法、小程序开发者文档2.1微信小程序框架结构微信小程序与网站前端网页的相同点与区别微信小程序实质上是一款基于Web技术的应用程序，与网站前端网页很相似，但有区别，如下表所示。特点微信小程序网站前端网页相同点使用的开发语言代码结构和代码的运行机制是相同的。不同点运行在微信中运行在浏览器中微信小程序与微信紧密相融，能方便获取用户的身份、位置信息、手机存储。前端开发语言：wxml、js、wxss前端开发语言：HTML、js、CSS微信小程序前端的开发技术使用wxml、js、wxss三种开发语言组合使用，如下表所示。小程序前端开发语言作用wxml用组件元素构成页面的结构wxss给每个页面元素加上样式，包括大小，颜色，位置，形状等js给组件添加动态效果，例如鼠标点击的响应、展示数据微信小程序的文件类型在一个小程序中必须有以下四种类型文件，分别是Json、WXML、CSS和js。小程序的文件类型文件功能Json配置项目或者页面的一些属性WXML描述页面的结构，代码类似HTML语言。WXSS页面的样式，也称为样式文件，代码类似cssjs处理页面和用户的交互表3-3微信小程序的文件类型上面是小程序必须有的四种类型文件。除此之外，还可以在小程序中添加图片文件，图片文件格式包括PNG、JPG。小程序的目录结构微信小程序的目录结构主要包括以下几部分，如下表所示。目录结构文件的说明pages文件夹（存放了2个文件夹，即小程序有2个页面。）index文件夹（index页面）index.js=1\*GB3①index文件夹下有四个类型的文件，并且这四个文件的主文件名称必须要和页面名称index相同index.jsonindex.wxmlindex.wxsslogs文件夹（logs页面）logs.js=2\*GB3②logs文件夹下有四个类型的文件，并且这四个文件的主文件名称必须要和页面名称logs相同logs.jsonlogs.wxmllogs.wxssutilities文件夹内部放置了js文件存放公共的js代码，方便在不同页面调用。app.jsapp.jsonapp.wxssapp.js项目全局app.json全局配置app.wxss全局样式project.config.json项目配置文件，通常不需要改动sitemap.json允许微信搜索收录小程序页面，通常不需要改动2.2JSON文件JSON文件JSON是一种数据格式，不是编程语言。Json文件的语法格式：包含在一个大括号中，通过”key”：value键值对的方式来描述数据。key必须放在一对双引号中。最后特别强调，JSON文件中不能使用注释。微信小程序提供了全局配置文件（app.json）和页面配置JSON文件。（1）全局配置文件在项目的根目录有一个

app.json，它是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。{

"pages":[

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":

"#fff",

"navigationBarTitleText":

"Weixin",

"navigationBarTextStyle":"black"

}}pages字段定义的是一个数组。该数组成员是当前小程序每个页面的路径。第一个页面路径为首页，如果想把某一页设置为首页，就必须把该页面的路径放在该数组的第一个位置。windows字段定义的是一个对象设置小程序所有页面下拉样式设置小程序所有页面导航栏的背景颜色设置小程序所有页面导航栏文字内容设置小程序所有页面导航栏文字颜色页面JSON文件在第2章新建项目中，在

pages/index和

pages/logs

目录下的index.json和

logs.json文件，就是页面JSON文件。在页面JSON文件中可以设置顶部的背景颜色、文字。一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求微信小程序开发流程、注册微信小程序账号、微信开发者工具使用教学重点与难点下载安装微信开发者工具，新建项目教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结注册微信小程序账号、微信开发者工具使用作业布置下载安装微信开发者工具，新建项目教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间1-2授课对象授课内容2.3微信小程序wxml基本语法、常用组件、制作“景区名片”页面主要教学内容教学过程及时间分配2.3.1WXML基本语法WXML(WeiXinMarkupLanguage)是从HTML（超文本标签语言）衍生而来的一种在小程序前端页面使用的语言，WXML仍然是标签语言，使用标记标签来描述页面的结构，页面内容写在标签内部，标签由一对尖括号包围关键词。标签包括以下两种双标签：成对出现的标签，有开始标签和结束标签，内容写在两个标签之间。单标签：不成对出现的标签，只有一个标签，没有结束标签。标签属性就是对不同组件设置参数用的。（1）标签属性基本格式如下表3-7所示：标签分类标签属性格式示例双标签<标签属性名称=“属性值”>内容</标签><viewclass=”box”></view>单标签<标签属性名称=“属性值”/><inputclass="weui-input"placeholder="输入成绩"/>（2）属性分为通用属性和专用属性两类，通用属性: 大部分标签都有的属性 class、id、style等专用属性: 不同标签有自己独特属性 <inputpassword="true"/>password作用：输入框中输入内容以小圆点显示3.常用组件WXML中组件很多，我们这里先介绍5个常用组件如下表3-10所示。还有很多组件，可以打开小程序文档去查看。组件类型组件功能示例视图容器view视图容器<viewclass=”containter”></view>基础组件text文本域<textclass=”product”>冰激凌</text>表单组件button按钮<buttonbindtap=”tj”>确定</button>input输入框<inputplaceholder=”请输入成绩”/>form表单<form></from>checkbox复选框<checkbox></checkbox>radio单选框<radio></radio>媒体组件image图片<imagesrc=”/images/xs.jpg”></image>2.3.2制作第一个小程序1.打开微信开发者工具，新建一个小项目。2.在项目目录中，双击打开app.json文件。在"pages"字段中添加一个页面路径"pages/test/test"，此时会自动生成test文件夹，并自动生成test.js、test.json、test.wxml、test.wxss，4个文件.3.打开test.wxml文件，输入以下内容：<view>第一个小程序</view>

<!--view是容器

--><view>Hello

World</view>

<!--view是容器--><inputplaceholder="请输入姓名"/><!--

input是输入框-->2.3.3制作“景区名片”页面1.“景区名片”页面框架制作“景区名片”页面①打开微信开发者工具，新建项目，找到app.json文件。在"pages"字段中添加一个页面路径"pages/jqmp//jqmp"。②在pages/jqmp//jqmp.wxml文件中输入代码一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求微信小程序wxml基本语法、常用组件、制作“景区名片”页面教学重点与难点微信小程序wxml基本语法、常用组件、制作“景区名片”页面教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结微信小程序wxml基本语法、常用组件、制作“景区名片”页面作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间2-1授课对象授课内容制作“比较成绩”页面主要教学内容教学过程及时间分配2.3.4制作“比较成绩”页面1.“比较成绩”页面框架输入语文成绩和数学成绩，并比较哪科成绩分数高。页面效果和框架结构如下图【示例2-4】制作“比较成绩”页面①在微信开发者工具中，新建一个项目。②在app.json文件中，添加“比较成绩”页面路径。③在pages/bjcj/bjcj.wxml文件中输入代码“比较成绩”WXSS样式代码在后面章节中进行讲解。一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求制作“比较成绩”页面教学重点与难点制作“比较成绩”页面教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结制作“比较成绩”页面作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间2-2授课对象授课内容数据绑定、列表渲染、制作“轮播图”主要教学内容教学过程及时间分配2.3.5数据绑定1.数据绑定：就是通过双重花括号{{变量名}}的语法格式，将一个变量绑定到页面上。例如:<view>{{name}}</view>为什么要用数据绑定呢？因为小程序上的大部分数据都是后端服务器返回给小程序的，也就是说这些数据是动态的，每次加载小程序都要先访问服务器，服务器处理数据后，再返回小程序显示，因此，不能直接把数据写在wxml前端页面，要使用变量。当小程序运行时，服务器返回数据，再赋值给变量，完成数据的加载显示，这就是数据绑定的意义。2.数据绑定的操作方法:（1）wxml文件：在标签内容或者属性需要数据绑定的地方写入{{变量名}}（2）js文件:对该变量进行定义，把变量的值放在下面data:{}代码中。Page({/*页面的初始数据*/data:{}})当wxml文件加载组件时,会自动将变量名拿到js文件中查找，并将查找到的数据值渲染到页面上。【示例】数据绑定 <!--默认复选框为未选中--> <imageclass="check_img"hidden="{{item.check}}"src="/static/flase.png"></image> <!--复选框为选中--> <imageclass="check_img"hidden="{{!item.check}}"src="/static/true.png"></image>2.3.6列表渲染列表渲染：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:for是标签的一种特殊属性，称为控制属性。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。列表渲染举例：操作步骤如下表列表渲染操作步骤代码=1\*GB3①在index.wxml中输入右侧代码<view

wx:for="{{xs}}">{{}}{{item.sex}}</view>=2\*GB3②在index.js中输入右侧代码Page({data:

{xs:[

{name:'刘红',sex:'女'},

{name:'李小明',sex:'男'}]})2.3.7制作“轮播图”轮播组件轮播组件框架如下图说明：最外面父级元素为<swiper></swiper>（2）重复的子元素为<swiper-item>...</swiper-item>（3）swiper常用属性见表2-15所示表2-15轮播组件常用属性swiper标签常用属性默认值功能indicator-dotsfalse是否显示面板指示点autoplayfalse是否自动切换interval5000每隔一定时间切换一张图片,单位：mscircularfalse衔接滑动制作4张图片的轮播页面框架如图所示。<swiper><swiper>《<swiper-item><image><swiper-item><image><swiper-item><image><swiper-item><image>一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求数据绑定、列表渲染、制作“轮播图”教学重点与难点数据绑定、列表渲染、制作“轮播图”教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结数据绑定、列表渲染、制作“轮播图”作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间3-1授课对象授课内容2.3使用列表渲染制作“轮播图”、条件渲染主要教学内容教学过程及时间分配3.使用列表渲染制作轮播图步骤1：把上面nb.wxml中4对<swiper-item>减化成1对<swiper-item>，如图2-15所示。用wx:for做列表渲染，使用数组中banerData中imgUrl的数据重复渲染<swiper-item>组件。数组banerData的值写在js文件的data中，imgUrl是banerData数组中的元素。<swiper<swiperindicator-dots="true"autoplay="true"interval="1000"circular="true"></swiper><swiper-itemwx:for="{{bannerData}}"wx:key="index"><imagesrc="{{item.imgUrl}}"></image></swiper-item><swiperindicator-dots="true"autoplay="true"interval="1000"circular="true"><swiper-item></swiper-item><swiper-item></swiper-item><swiper-item></swiper-item><swiper-item></swiper-item></swiper><imagesrc="../../images/eat1.jpg"></image><imagesrc="../../images/eat2.jpg"></image><imagesrc="../../images/eat3.jpg"></image><imagesrc="../../images/eat4.jpg"></image>图2-154对<swiper-item>减化成1对2.3.8条件渲染（1）条件渲染wx:if="{{条件}}"格式为：<组件名wx:if="{{条件}}">内容</组件名>如果条件为真，显示该组件内容，如果条件为假，不显示该组件内容。【示例2-9】条件渲染案例。显示购物车是空的<viewclass="empty"wx:if="{{items.length==0}}">购物车是空的 </view>一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求使用列表渲染制作“轮播图”、条件渲染教学重点与难点使用列表渲染制作“轮播图”、条件渲染教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结使用列表渲染制作“轮播图”、条件渲染作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间3-2授课对象授课内容wxss选择器、常用样式、盒子模式主要教学内容教学过程及时间分配WXSS(WeiXinStyleSheets)WXSS是样式语言，用于描述WXML的组件样式，它是基于CSS的修改和扩充。因此具有CSS的大部分特性。WXSS和CSS的作用是相同的，使用WXSS代码，可以设置组件的字体、颜色、位置、大小、宽度和高度等样式，使页面的视觉效果更佳。WXSS的语法格式选择器{属性：属性值；属性：属性值；...}选择器就是要设置样式的元素。WXSS样式书写位置在WXSS文件中书写样式，格式如下选择器{属性：属性值；属性：属性值；...}示例：给view组件设置样式为宽度300rpx，高度100rps,背景色为红色。样式写在index.WXSS文件中如下view{width:300rpx;height:100rpx;background:red;}Index.wxml代码如下<view

>

贵州遵义会址

</view>2.4.2WXSS选择器1.标签选择器通过标签选择元素，所有的标签都可以是选择器。格式如下标签名{样式属性名：属性值;}2.id选择器使用id选择器时，要在id值前加上"#",id选择器只能选中一个元素，同一个页面要保证id的唯一性。格式为#id名{样式属性名：属性值;}3.类选择器使用class选择器时，要在class名前加上"."，class选择器可以被多个元素共同使用,不同元素可以有相同的class值。同一个元素可以有多个类名，要使用空格隔开。尽量使用类选择器，而不是id选择器。格式为：.类名{样式属性名：属性值;}4.并集选择器同时选中多个元素，选择时要用“,”隔开。标签选择器、ID选择器、class选择器都可以使用。格式选择器1，选择器2，...选择器n{样式属性名：属性值;}5.后代选择器是一种祖先结构关系，并不一定是父子关系。祖先和后代之间要有一个空格隔开。标签选择器，ID选择器，class选择器都可以使用。格式祖先后代{样式属性名：属性值;}3.4.3WXSS常用样式1.字号设置font-sizefont-size用于设置字体的尺寸。常用尺寸单位有：rpx(推荐使用)、px、%。格式选择器{font-size:合法的尺寸单位;}rpx（responsivepixel）:可以根据屏幕宽度进行自适应。rpx单位是wxml提出的一个新尺寸单位，css中没有rpx单位。不同的手机有不同的宽度和像素比，如果用px做单位换算会很麻烦。使用rpx单位，由小程序内部负责进行转换，就不用考虑手机宽度不同的问题了。使用rpx单位，同一套代码在不同手机上运行都是正常的。规定手机屏幕宽为750rpx，在小程序中设置元素宽度为750rpx，该元素的宽度就是手机屏幕宽度的100%。在iPhone6手机上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。建议：

开发微信小程序时选用iPhone6。2.字体加粗font-weight格式选择器{font-weight:字体粗度值;}字体粗度值 含义数字 100-900，没有单位，一般设置成整百，数字越大，字体越粗bold 表示粗体，相当于数字700normal 表示正常字体粗细，相当于数字4003.文本颜色colorcolor用于设置文本的颜色。当文字没有设置颜色时，默认为黑色。格式选择器{color:颜色值;}css常用颜色格式如下:#rrggbb 16进制数,rr(红色)，gg(绿色)，bb(蓝色)所有值必须介于00与ff之间,如#f64a8crgb(x,x,x) RGB值，范围是rgb(0,0,0)到rgb(255,255,255)之间英文单词 表示颜色的如redgreenblueblackwhiteyellow4．行高line-height行高指每行的高度，不是行间距。当行高与高度height相等时，单行文本会垂直居中。格式选择器{line-height:值;}css文本行高值及含义如下行高值 含义带尺寸单位的数值 固定的行高数字 当前字体大小的倍数来设置行高百分比 当前字体大小的百分比来设置行高5．首行缩进text-indenttext-indent用于设置文本块首行文本的缩进。它的属性值可以是固定的长度值，也可以是相对于父元素宽度的百分比，默认值为0。格式：选择器{text-indent:尺寸单位;}经常使用em作为首行缩进的尺寸单位，1em就表示一个汉字的长度。6.水平对齐方式text-aligntext-align用于设置元素中文本的水平对齐方式，格式：选择器{text-align:left|right|center|justif；}7.元素的大小通常是自动的，会根据元素的内容计算出实际的宽度和高度。但可以通过WXSS手动设置宽度和高度，控制每个元素的大小，包换宽度、高度。格式选择器{width:数值;height:数值;}属性 含义 单位width 设置元素的宽度 rpx(推荐使用)、px、%height 设置元素的高度 8.背景颜色background-color设置单一的颜色作为背景，也可以用background简写格式1选择器{background-color:颜色;}格式2选择器{background:颜色;}颜色通常用16进制数，格式为：#rrggbb。其中，rr(红色)，gg(绿色)，bb(蓝色)。所有值必须介于00与ff之间，如#f64a8c。2.4.4盒子模型1.盒模型又叫框模型（BoxModel），每个元素(element)都可以看成是框架或者盒子。盒子包括：外边距(margin)+边框(border)+内边距(padding)+元素内容(content)。注意外边距、边框、内边距都有上右下左4个方向。2.盒子模型相关样式属性名见表（1）边框围绕元素内容和内边距的线条，设置边框属性时，首先确定的是方向，边框有4个方向：上右下左。可以一次定义4个方向边框的宽度、样式、颜色，也可以只定义一个方向宽度、样式、颜色。方向格式含义4个方向border:widthstylecolor;（简写方式）一次定义4个方向的边框宽度、样式、颜色上border-top:widthstylecolor;只定义上边框宽度、样式、颜色右border-right:widthstylecolor;只定义右边框宽度、样式、颜色下border-bottom:widthstylecolor;只定义下边框宽度、样式、颜色左border-left:widthstylecolor;只定义左边框宽度、样式、颜色（2）圆角边框border-radius，给组件添加圆角的边框，格式见表方向格式属性值边框左上角border-top-left-radius：值;为绝对值或者百分比边框右上角border-top-right-radius：值;边框左下角border-bottom-left-radius：值;边框右下角border-bottom-right-radius：值;简写方式border-radius:值1值2值3值4border-radius:值1值2border-radius:值1值2值3border-radius:值1（3）padding内边距是指边框和内容之间的距离。css内边距padding格式见表方向格式属性值上内边距padding-top：值;像素、百分比，但不能为负数右内边距padding-right：值;下内边距padding-bottom：值;左内边距padding-left：值;简写方式内边距简写有以下4种形式：①padding:value(上)value(右)value(下)value(左);②padding:value(上)value(左右)value(下);③padding:value(上下)value(左右);④padding:value(四个方向相同);（4）margin外边距围绕在元素边框周围的外空白区域是外边距，与下一个元素之间的距离。wxss外边距margin格式见表方向格式属性值上外边距margin-top：值;像素、百分比，但不能为负数。外边距如果取值auto，实现水平方向居中显示的效果右外边距margin-right：值;下外边距margin-bottom：值;左外边距margin-left：值;简写方式外边距简写有以下4种形式：①magin:value(上)value(右)value(下)value(左);②margin:value(上)value(左右)value(下);③margin:value(上下)value(左右);④margin:value(四个方向相同);（5）box-shadow边框阴影给方框添加一个或多个阴影。box-shadow格式如下box-shadow:h-shadowv-shadowblurspreadcolorinset;box-shadow属性值见表2-25所示表2-25box-shadow属性值box-shadow属性值含义h-shadow必选项，水平阴影的位置v-shadow必选项，垂直阴影的位置blur可选项，模糊距离spread可选项，为阴影的尺寸color可选项，为阴影的颜色2.4.5flex（flexiblebox）弹性布局盒模型,是一种简洁、快速弹性布局的属性。容器：采用flex布局的元素，称为flex容器（flexcontainer），简称”容器”。项目：容器中的所有子元素自动成为容器成员，称为flex项目（flexitem），简称”项目”。两根轴：容器默认存在主轴和与主轴垂直的交叉轴。主轴可以水平方向，也可以是垂直方向。交叉轴可以是水平方向，也可以是垂直方向。一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求wxss选择器、常用样式、盒子模式教学重点与难点wxss选择器、常用样式、盒子模式教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结wxss选择器、常用样式、盒子模式作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间4-1授课对象授课内容制作“景区名片”WXSS样式、制作“比较成绩”WXSS样式主要教学内容教学过程及时间分配“景区名片”样式效果和框架结构如下序号选择器样式内容1.card整个名片宽度设置为750rpx,背景色为#F7F7F72.big-title标题水平居中，字号20px，加粗,内边距20px3img设置宽度4.content内边距为25px,字号14px，颜色为灰色，行高为当前字大小的2倍，即28px5.small-title小标题居中、字号18px、加粗6.dl段落前面缩进2个汉字的宽度“景区名片”index.wxss代码如下.card{ width:750rpx; background:#F7F7F7;}/*标题水平居中，字号40rpx，加粗,内边距20px*/.big-title{ text-align:center; font-size:40rpx; font-weight:bold; padding:40rpx;}/*图片宽度和父级.box一样宽*/image{ width:100%;}/*图片下面内容:内边距为50rpx,字号28rpx，颜色为灰色，行高为当前字大小的2倍，即56rpx*/.content{ padding:50rpx; font-size:28rpx; color:#999; line-height:2;}/*小标题居中、字号36rpx、加粗*/.small-title{ text-align:center; font-size:36rpx; font-weight:bold;}/*段落前面缩进2个汉字的宽度*/.dl{ text-indent:2em;} 比较成绩样式效果和框架结构如下序号框架结构对应样式（1）viewtextview上右下左外边距50rpx，字大小35rpxinputinput宽度600rpx，顶上外边距30rpx，底部边框线2rpx实线浅灰（2）viewtextview上右下左外边距50rpx，字大小35rpxinputinput宽度600rpx，顶上外边距30rpx，底部边框线2rpx实线浅灰（3）buttonbutton上下左右外边距为60rpx,字颜色为白色、背景色为绿色、字间距为30rpx（4）viewtextview上右下左外边距50rpx，字大小35rpx 表3-22WXSS样式分析以下为在index.wxss文件中的代码如下所示view

{

margin:

50rpx;

font-size:

35rpx;}input

{

width:

600rpx;

margin-top:30rpx;

border-bottom:

2rpx

solid

#ccc;}button

{

margin:

60rpx;

color:

#fff;

background:

#350;

letter-spacing:

30rpx;}一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求制作景区名片样式、比较成绩样式教学重点与难点制作景区名片样式、比较成绩样式教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结制作“景区名片”WXSS样式、制作“比较成绩”WXSS样式作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间4-2授课对象授课内容js基本语法主要教学内容教学过程及时间分配2.5.1JS基本语法小程序只有界面展示是不够的，还需要和用户做交互。响应用户的点击、获取用户的位置等等。在小程序里，通过编写JS脚本文件来处理用户的操作。JS是JavaScript的简称，是一种轻量级的编程语言，用于微信小程序的逻辑层，将数据进行处理后发送给视图层，同时接受视图层的事件反馈功能。变量：即可变的量，变量是用于存储数据的容器。变量命名原则：变量名只能以字母、_、$开头，余下的可以是字母、数字、_、$，注意变量名不能数字开头。变量名不能用js关键字。JS是区分大小写的,变量名,函数,关键字都要区分大小写。2.小程序定义变量格式：在小程序JS文件中，在data里初始化变量数据data:{变量名:值,数组名:[]，对象：{}}（2）在小程序JS文件中，在data之外进行变量定义var变量名=值例如：varname="贵州省";3.数据类型（1）number:包括整数或小数。例如：8090.5（2）string:用””双引号或者’’单引号包围的叫字符串，不管里面是文字还是数字。例如："abc""a"'abc'"123"（3）boolean:布尔类型只有true和false值。（4）null:一个对象为空的占位符，该对象定义了，但没有赋值。（5）undefined:如果一个变量未定义，则会被默认赋值为undefined（6）数组:数组下标是从零开始的，数组的第一个项目下标0，第二个是1，以此类推。（7）对象∶对象由一对花括号包含。在括号内部，对象的属性以名称和值成对的形式(name:value)来定义，属性之间由逗号分隔。最后一项数据后不能有逗号。例如∶varxs={name:"小明",sex:"男",age:12,height:180};访问对象属性有2种方法，如下所示：方法1：对象名.属性名;方法2：对象名[“属性名称”]2.5.2微信小程序JS文件小程序JS文件有2种，分别是全局逻辑app.js和页面逻辑JS文件。app.js文件app.js文件是项目的入口文件。每个小程序都需要在app.js中调用App方法，注册小程序实例、绑定生命周期回调函数、错误监听和页面不存在监听函数等。整个小程序必须有，并且只有一个App()，否则会出现错误。注册小程序格式如下App({onLaunch:function(){//小程序启动之后，触发}})二、页面js文件对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。下图2-24是小程序自动生成的index.js文件代码。Page方法，生成一个页面，格式如下Page({//这里是页面内容})小程序每个页面的js中都必须有一个Page方法，否则会出错。Page方法里面的内容根据需求来写，如果Page方法里面不写代码，也不会报错。Page中data对象，主要存放该页面的数据，格式如下Page({data:{})}data中写入数据。在wxml文件中通过数据绑定的方式显示。data中数据格式为：以名称和值成对的形式(name:value)来定义，属性之间由逗号分隔。最后一项数据后不能有逗号。Page中可以有很多函数（1）Page中小程序的生命周期函数在小程序中每个页面都存在着一条生命时间线，包括代码加载>页面渲染>显示到页面上(不同页面之前切换时，就会产生隐藏)-->页面的销毁（关闭小程序），这样一个流程叫做生命周期。就像花的生命周期一样，从种子发芽>开花>结果实>凋谢。小程序每个页面生命周期的时间流程上都有相对应的函数，这些函数写在Page函数中，函数中的函数又叫回调函数。（2）Page中自定义函数函数名:function(参数){//函数内容}事件事件是视图层到逻辑层的联系方式。事件可以将用户的行为反馈到逻辑层进行处理。事件绑定在组件上，当触发事件时，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。事件响应的操作步骤步骤(1)在wxml文件中，给组件绑定一个事件处理函数，格式如下<标签事件名=“函数名”>步骤(2)在对应的js文件中，在Page中写上相应的事件处理函数，注意函数名要和wxml中绑定的函数名相同。事件案例：【示例2-31】在xs.wxml文件中的view组件上绑定一个单击事件tj，触发tj事件后，在控制台输出view组件传过来的数据。（1）在xs.wxml文件中，输入以下代码：<viewid="box"data-km="Python"bindtap="tj">点击我</view>注意：data-km是组件中自定义数据属性。组件中自定义数据属性的格式：data-变量名（2）在xs.js文件中，输入以下代码：Page({data:{},tj:function(e){console.log(e)console.log(e.target.id)console.log(e.target.dataset.km)},注意：tj函数不能写在onLoad中。console.log(e)打印出来的内容如图2-25所示。一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求js基本语法教学重点与难点js基本语法教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结js基本语法作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间5-1授课对象授课内容js数据处理主要教学内容教学过程及时间分配2.5.3微信小程序JS中的数据处理1.如何访问Page中页面data里的数据和Page里的函数（1）在函数中，可以直接使用this来访问Page页面中data里的数据和Page里的函数。在小程序中，this表示当前对象的一个引用，此时this所指向的对象为全局对象，也就是这个页面。（2）在API中，访问Page中data里的数据和Page里函数的操作步骤如下，什么是API？我们在3.5.4中进行详细讲解。步骤1：在API的外面，要先保存当前页面的this。例如：varthat=this步骤2：在API里面用that来调用Page中data里的数据和Page里函数。例如：that.data.变量名that.函数名2.5.3微信小程序JS中的数据处理1.如何访问Page中data里的数据和Page中函数this.data.变量名this.函数名2.如何更新Page中data里的数据用this.setData()方法，修改的值才会在页面中显示，否则页面显示的是更改之前的值。this.setData({变量名:新的值})示例：在购物车页面中单击编辑切换为完成，单击完成切换为编辑事件在cart.wxml中<viewclass="edit"> <textcatchtap="adminTap">{{adminShow?"完成":"编辑"}}</text></view>在cart.js中Page({/***页面的初始数据*/data:{adminShow:false,//编辑},//点击编辑按钮，是否显示管理的选项adminTap:function(){this.setData({adminShow:!this.data.adminShow});},})一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求js数据处理教学重点与难点js数据处理教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结js数据处理作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间5-2授课对象授课内容常用API操作主要教学内容教学过程及时间分配2.5.4微信小程序API1.API的定义API的全称是ApplicationProgrammingInterface，即应用程序编程接口。API是一些预先定义的函数或功能模块。例如：微信小程序提供的获取用户信息、本地存储、支付功能、打开微信扫一扫。开发人员可以直接使用这些功能模块API，不需要知道里面代码是怎么实现的。API有同步和异步两种，使用最多的是异步，因此，本教材重点讲异步API。2.异步API大多数API都是异步API。异步API接口通常需要传入一个Object回调函数对象作为API的调用参数。异步API的格式如下API函数名称({//success部分//fail部分//complete部分})success部分、fail部分、complete部分称为API的回调函数。其中，success为接口调用成功的回调函数，fail为接口调用失败的回调函数，complete为接口调用结束的回调函数，无论调用成功或者失败，都会执行complete中的代码。success、fail、complete这三个回调函数调用时会传入一个Object类型参数，包含以下字段，2.5.5常用API介绍一、界面交互API显示消息提示框格式：wx.showToast(Objectobject){}属性类型取值说明titlestring提示的标题iconstring'success'显示成功图标‘loading’显示加载图标durationnumber数字提示的延迟时间显示模态对话框格式：wx.showModal(Objectobject){}属性类型说明titlestring提示的标题contentstring提示的内容显示加载提示框。格式：wx.showLoading(Objectobject){}关闭提示框格式：wx.hideLoading(Objectobject){}页面路由API就是小程序页面之前的跳转。wx.relaunch()功能是关闭所有页面，打开到应用内的某个页面。格式：wx.reLaunch({url:''})url参数的值是字符串型，是必填选，标明需要跳转的页面路径。wx.redirectTo()功能是关闭当前页面，跳转到应用内的某个页面格式：wx.redirectTo({url:''})url参数的值是字符串型，是必填选，标明需要跳转的页面路径。wx.navigateTo()功能是保留当前页面，跳转到应用内的某个页面格式：wx.navigateTo({url:''})url参数的值是字符串型，是必填选，标明需要跳转的页面路径。index.wxml文件：

<view

class="usermotto">

<text

class="user-motto"

bindtap="xs">{{motto}}</text>

</view>Index.js文件

xs:function(){

wx.navigateTo({

url:

'../xs/xs',

})

},一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求常用API操作教学重点与难点常用API操作教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间6-2、7-1授课对象授课内容2.6制作“比较成绩”js代码主要教学内容教学过程及时间分配2.6制作“比较成绩”js代码1.“比较成绩”页面的bjcj.wxml文件要添加3个绑定事件，并给最后1个文本框添加条件渲染。步骤1：给语文成绩输入框添加输入框发生改变事件：bindchange="bj",并且给这个输入框设置data-id=”cj1”步骤2：给数学成绩输入框添加输入框发生改变事件：bindchange="bj",并且给这个输入框设置data-id=”cj2”步骤3：给按钮添加事件bindtap=”tj”。步骤4：给最后一个文本框添加条件渲染wx:if=”{{flag}}”，如果flag值为真，就显示{{result}}，否则就不显示。2.“比较成绩”页面的bjcj.js文件中，要给页面变量赋初始值，还要定义tj和bj事件函数，最后更新data里变量的值。步骤1：在index.js文件的Page中的data里给页面变量赋初值步骤2：在index.js文件的Page中定义bj事件处理函数，代码如下，bj函数的功能如下：（1）如果是语文输入框输入数据，发生改变就触发了bj事件，那么Number(e.detail.value)获取语文输入框中输入的值并转化为数值型数据，e.target.dataset.id获取语文输入框中data-id的值cj1。把语文输入框中输入的数值赋值给cj1变量。（2）如果是数学输入框输入了数据，发生改变就触发了bj事件，那么Number(e.detail.value)获取数学输入框中输入的值并转化为数值型数据，e.target.dataset.id获取语文输入框中data-id的值cj2。把数学输入框中输入的数值赋值给cj2变量。步骤3：在index.js文件的Page中定义tj事件处理函数，tj函数的功能如下：首先给str变量赋值为“两科成绩相等”，然后判断如果this.cj1>this.cj2为真，str变量赋值为语文成绩分数高，否则如果this.cj1<this.cj2为真，str变量赋值为数学成绩分数高。步骤4：给Page中data里result变量更新赋值为str，flag变量更新赋值为true，一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求制作“比较成绩”js代码教学重点与难点制作“比较成绩”js代码教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间7-2授课对象授课内容第3章点餐小程序项目需求分析、框架分析、PHP开发环境搭建、掌握搭建点餐数据库主要教学内容教学过程及时间分配3.1点餐小程序项目需求分析1.项目需求分析原则从用户角度出发，与用户进行沟通交流，挖掘用户真实需求。分析并写出需求文档。对于初学者不要一次实现所有需求，第一次先实现最基础的功能，后面再循序渐进的完善。本教程讲解的小程序点餐只实现了最基础的功能。点餐微信小程序项目需求分析本项目点餐微信小程序，主要实现点餐最基本功能，包括菜单、购物车、确认订单、订单4个页面，在菜单、购物车、订单3个页面底部都有标签导航，点击标签导航，可以相互切换这3个页面，并显示对应的页面内容。3.2点餐小程序页面框架分析1.菜单菜单的最上面是轮播图，中间是所有商品信息，底部导航栏在app.json文件里实现。2.购物车购物车的右上角显示编辑/完成，可以相互切换，中间是购物车中商品信息，下面是结算。底部导航栏在app.json文件里实现。确认订单确认订单中上面显示订单中商品信息，下面显示金额和立即结算。订单订单的上面是订单商品信息，底部导航栏在app.json文件里实现。3.2PHP开发环境搭建PHP开发环境需要安装Apache、PHP以及MySQL，单独安装配置Apache、PHP和MySQL较为复杂，选择phpStudy（Apache+PHP+MySQL）集成开发环境，一次性安装，无须配置即可使用PHP服务器。1.phpStudy开发环境搭建phpStudy是将Apache、PHP和MySQL等服务器软件整合在一起，免去了单独安装配置服务器带来的麻烦，实现了PHP开发环境的快速搭建。phpStudy是免费的，直接到官方网站下载，并进行安装。phpStudy安装时默认路径为D:/phpstudy_pro。单击“网站”，默认网站域名为localhost，端口80，物理路径D:/phpstudy_pro/WWW。①把本教材素材库中shop目录里所有内容复制到d:/phpstudy_pro/www文件夹下。②运行phpstudy_pro，启动Apache2.2.39和MySQL5.7.26成功。③单击左侧“网站”-->单击“创建网站”，弹出网站窗口，输入网站域名：，单击“浏览”按钮，选择目录D:/phpstudy_pro/www/shop/public。2.搭建点餐数据库(1)导入点餐数据库1.运行phpstudy，启动Apache2.4.39和MySQL5.7.26成功。2.创建新数据库之前，必须要修改root用户的默认密码。步骤①单击左侧“数据库”，单击数据库root后面的“操作”下拉选项，单击“修改密码”。步骤②弹出“修改密码”窗口，输入新密码123456，单击确认。3.单击创建数据库，弹出“数据库”窗口，输入数据库名称：my_shop，输入用户名：tlj，输入密码：123456。单击确认。4.单击myshop数据库后的“操作”，单击“导入”，弹出“选择文件”窗口，单击浏览按钮，选择要导入的数据库文件d:\phpstudy_pro\www\shop\backup\my_shop.sql，单击确认，完成导入数据库。一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求点餐小程序项目需求分析、框架分析教学重点与难点PHP开发环境搭建、掌握搭建点餐数据库教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结点餐小程序项目需求分析、框架分析、PHP开发环境搭建、掌握搭建点餐数据库教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间8-1授课对象授课内容创建点餐微信小程序，初始化公共文档app.json、app.js、util.js文件主要教学内容教学过程及时间分配4.1创建点餐微信小程序1.创建项目打开D:\phpstudy_pro\www\shop，新建一个“小程序”目录，打开微信开发者工具，单击“项目”菜单-->单击“新建项目”菜单项。项目目录选择D:\phpstudy_pro\www\shop\小程序。粘贴自己的AppID-->单击不使用云服务->单击新建，创建微信小程序。2.删除logs文件夹在小程序目录中删除logs文件夹3.打开以下文件，删除部分代码。4.拷贝图片文件在D:\phpstudy_pro\www\shop\小程序下，创建static文件夹，从素材库中把轮播图的4张图片、底部导航栏“菜单”、“购物车”、“订单”选中状态和未选中状态的6张图片，以及购物车页面增加数量、减少数量、复选框选中、复选框未选中4张图片粘贴进来。在D:\phpstudy_pro\www\shop\public\upload文件夹下，从素材库中把商品图片粘贴进来。4.1.1初始化app.json文件1.在app.json文件中添加页面路径打开app.json文件，在"pages/index/index"路径后面，添加3个页面路径，2.在app.json文件中设置底部导航栏（1）tabBar组件在app.json文件中添加tabBar组件，可以给页面添加底部导航栏。（2）设置底部导航栏只显示菜单、购物车、订单，4.1.2初始化app.js文件1.定义全局数据在app.js文件中使用全局数据globalData，可以让小程序各个页面之间共同使用全局数据。在点餐小程序app.js文件中，定义一个全局数据api，存放后台接口文件相同的部分。4.1.3初始化util.js文件1.封装网络请求在点餐小程序每个页面的js文件中，都需要使用wx.request发起网络请求，获取后台数据。为了减少重复写代码，在util.js文件中以_get和_post方法对wx.request进行封装，（1）module.exports是对外暴露接口通过module.exports对外暴露接口，其它的js文件中才可以使用_get和_post模块。（2）以上函数定义使用的是箭头函数，箭头函数的基本格式如下函数名：（参数列表）=>{函数体}（3）_get:(url,data,success,error)和_post:(url,data,success,error)模块中各参数含义如下：★url:服务器接口地址★data：发送到服务器的数据★success:网络请求成功回调函数★error:网络请求失败回调函数2.小程序页面调用模块的方法（1）在需要调用_get和_post模块的js文件中，引入util.js文件，示例代码如下。const

utils

=

require('../../utils/util.js');（2）在需要调用_get模块的位置，输入以下代码。

utils._get(参数1,

参数2,

function

(res)

{

});（3）在需要调用_post模块的位置，输入以下代码。

utils._post(参数1,

参数2,

function

(res)

{

});一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求创建点餐微信小程序，初始化公共文档app.json、app.js、util.js文件教学重点与难点创建点餐微信小程序，初始化公共文档app.json、app.js、util.js文件教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结创建点餐微信小程序，初始化公共文档app.json、app.js、util.js文件作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间8-2授课对象授课内容制作“菜单”页面的wxml文件主要教学内容教学过程及时间分配4.2制作“菜单”界面4.2.1“菜单”页面wxml文件1.“菜单”页面包括轮播图、商品信息列表。“菜单”页面效果和框架结构如下图4-2所示。2.每个商品信息效果和框架结构如下一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求制作“菜单”页面的wxml文件教学重点与难点制作“菜单”页面的wxml文件教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结制作“菜单”页面的wxml文件作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间9-1授课对象授课内容制作“菜单”页面的wxss文件主要教学内容教学过程及时间分配4.2.2“菜单”页面wxss文件1.轮播图效果和框架1.轮播图效果和框架轮播图样式设置轮播图样式设置商品信息样式设置2.每个商品信息效果和框架结构商品信息样式设置2.每个商品信息效果和框架结构一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求制作“菜单”页面的wxss文件教学重点与难点制作“菜单”页面的wxss文件教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结制作“菜单”页面的wxss文件作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间9-2、10-1授课对象授课内容制作“菜单”页面的js文件主要教学内容教学过程及时间分配4.2.3“菜单”页面js文件1.“菜单”页面前后端数据交互（1）菜单页加载时，会运行index.js文件中onLoad函数，并发送网络请求给后台goodsList接口，前后端数据交互如下单击微信开发者工具中“项目”-->“导入项目”，导入本教材素材库中提供的点餐小程序，打开调试器，打开“菜单”页面，单击调试器-->Network-->XHR，单击goodsList接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。（2）点击“加入购物车”时，会运行index.js文件中addCart事件函数，并发送网络请求给后台add接口，前后端数据交互如下图3.页面加载函数onLoad，功能调用获取商品列表，4.普通函数getList，功能是页面加载时调用获取商品列表，5.事件函数addCart，功能是加入购物车，一、导入新课内容（5分钟）；二、新课内容（40分钟）；三、上机练习（40分钟）；四、教学总结(5分钟)。教学目的及要求制作“菜单”页面的js文件教学重点与难点制作“菜单”页面的js文件教学手段理论+实践课前准备

（参考资料）查阅资料、准备课件，机房调试软件板书设计课后小结制作“菜单”页面的js文件作业布置教学后记

（手写）

学年第一学期教案院系：信息科学系课程名称微信小程序开发授课教师谭丽君课程类型专业必修课授课时间11-1授课对象授课内容PHP变量、数据类型、运算符、表达式、流程控制语句主要教学内容教学过程及时间分配5.1PHP概念一、即“超文本预处理器”，PHP是一种简单高效、应用广泛、最流行的Web服务器端脚本语言。PHP文件的后缀名是".php"。PHP文件能够包含HTML、CSS以及PHP代码。目前PHP最常用的版本是7.0。二、使用submile创建第一个PHP文件1.submile：是一款简洁、体积小巧、高效、跨平台的PHP代码编辑器。2.使用submile编辑器创建第一个PHP程序文件步骤①运行sublime编辑软件步骤②单击”file”-->单击”OpenFolder”打开文件夹，选择d:/phpstudy_pro/www，步骤③鼠标右击www文件夹，弹出快捷菜单，单击“NewFolder”，在窗口底部FolderName后面输入5-3，即新文件夹名。步骤④单击“file”-->单击“newfile”.步骤⑤在代码编辑区中输入以下代码，单击“file”-->单击“save”，将文件保存在“D:\phpstudy_pro\WWW\5-3”文件夹下，文件名为“index.php”文件。5.2.1PHP变量、数据类型、常量变量:其值可以改变的量称为变量。PHP变量名：以$符号开头，其后是变量的名称。变量名称必须以字母或下划线开头不能以数字开头。变量名是区分大写的。约定变量名用小写。php是一种弱类型的语言，使用变量前不用声明变量，赋值时就是创建了变量。2.PHP常用数据类型（1）整型（integer）：只能包含整数。【示例5-1】给一个变量赋值100，并输出该变量的值（2）字符串型（string）：使用双引号””，或者单引号’’包含的连续的字符序列，由数字、字母和符号组成。【示例5-2】给一个变量赋值”贵州欢迎您！！！”，并输出该变量的值（3）布尔型（boolean）：只有两个值，真（true）和假（false），其中true和false是PHP的内部关键字。（4）浮点型（float）：可以用来存储整数，也可以存储小数，它提供的精度比整数大得多。【示例5-4】给一个变量赋值3.56，并输出该变量的值（5）数组：数组是一组数据的集合，数组中的每个数据称为一个数组元素。每个数组元素包括键名和值两个部分，数组元素效果如下图5-21示例。元素的键名（key）可以是数字或字符串组成，元素的值(value)可以是任意类型。创建数组有很多种方法，本章节只简单介绍一种方法，后面章节中再详细介绍。创建数组格式：数组名=array(key=>value,...key=>value,);【示例5-5】定义一个数组，包含5个元素，该数组的键名是数字，先输出该数组第一个元素的值，换行后，再输出整个数组的所有元素键名和值。（6）对象：是类的实例化，后面章节会详细介绍。（7）空值：表示该变量没有值，唯一的值就是null3.PHP常量：常量的值在脚本中不能改变，不可再次对该常量进行赋值。 常量名由英文字母、下划线、和数字组成，但数字不能作为首字母出现。常量名前面不需要加$修饰符。约定常量名一般使用大写，方便区分常量和变量。 使用define(“name”,value)函数自定义常量。name即常量名称，value即常量的值。【示例5-6】定义一个常量，并输出该常量的值。5.3运算符和表达式1.算术运算包括加、减、乘、除、取余、自增、自减、对应的运算符分别为＋、－、*、/、%、＋＋、－－。【示例5-7】分别对2个变量进行几种算术运算，并输出结果2.关系运算关系（比较）运算符用于比较两个