学年第一学期教案
院系：信息科学系
课程名称
微信小程序开发
授课教师
谭丽君
课程类型
专业必修课
授课时间
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
页面的样式，也称为样式文件，代码类似css
js
处理页面和用户的交互
表3-3微信小程序的文件类型
上面是小程序必须有的四种类型文件。除此之外，还可以在小程序中添加图片文件，图片文件格式包括PNG、JPG。
小程序的目录结构
微信小程序的目录结构主要包括以下几部分，如下表所示。
目录结构
文件的说明
pages文件夹
（存放了2个文件夹，即小程序有2个页面。
）
index文件夹
（index页面）
index.js
=1\*GB3①index文件夹下有四个类型的文件，并且这四个文件的主文件名称必须要和页面名称index相同
index.json
index.wxml
index.wxss
logs文件夹
（logs页面）
logs.js
=2\*GB3②logs文件夹下有四个类型的文件，并且这四个文件的主文件名称必须要和页面名称logs相同
logs.json
logs.wxml
logs.wxss
utilities文件夹
内部放置了js文件
存放公共的js代码，方便在不同页面调用。
app.js
app.json
app.wxss
app.js项目全局
app.json全局配置
app.wxss全局样式
project.config.json
项目配置文件，通常不需要改动
sitemap.json
允许微信搜索收录小程序页面，通常不需要改动
2.2JSON文件
JSON文件JSON是一种数据格式，不是编程语言。Json文件的语法格式：包含在一个大括号中，通过”key”：value键值对的方式来描述数据。key必须放在一对双引号中。最后特别强调，JSON文件中不能使用注释。
微信小程序提供了全局