微信小程序开发实战教程 第1章 微信小程序入门
微信小程序培训课完整版 ppt课件
1、学习css之前html要熟练，没有墙面（html）的话，我们给墙面怎么刷漆（css装 饰）？对不对？ 2、看视频教程，看书籍，写代码，调试代码，多思考。 3、坚持下去，选择他就要把他学好，不忘初心。
网络在线手册地址：/css/
ppt课件
在这里要感谢微信大神：张小龙。
ppt课件
4
html基础课程
HTML：超文本标记语言 标签：<html></html>闭合标签、<br />自闭标签<img /><hr /> HTML很重要，重要，一定要学好。
HTML标签的熟练使用 如：<div><a><span><b><img><input><table><tr><td><p><ul><ol><li><dl><dt><dd> 等等。
text-indent:24px;
}
也可以这样编写，但是一定要注意结尾有英文的分号.初学者建议采用上面的方式编写
css;
css高级语法 同时定义多个元素多组声明的写法，英文状态下的逗号
p,h1,h2,div,table{
color:red;
font-size:16px;
}
4种css的加载方式 1、行内方式
犀牛课堂小程序培训课
——培训讲师：Tabniu
ppt课件
1
微信小程序开发工具
1、打开浏览器输入 https:///debug/wxadoc/dev/devtools/download.html?t=1475052055364 打开页面 2、查看系统信息 3、选择下载对应的工具 4、安装工具 5、打开工具（需要微信扫描登录） 6、尝试运行微信小程序
微信小程序开发实战(第2版)-教学大纲
《微信小程序开发实战（第2版）》课程教学大纲（课程英文名称）课程编号：学分：学分课时：86课时（其中：讲课55课时上机31课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标微信小程序是一门面向Web前端开发人员的课程，用于快速掌握微信小程序的开发。
本课程以案例驱动模式，循序渐进地讲解了微信小程序的相关知识，包括微信小程序项目的创建方法、页面组成、发布流程、常用组件、导航栏、标签栏、数据绑定、事件绑定、this 关键字、列表渲染、常用API、Vant Weapp组件库、WeUI组件库、uni-app框架等内容以及两个综合项目。
另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。
通过本课程的学习，不仅可以让学生掌握微信小程序的核心知识，还可以培养学生的家国情怀、责任担当、敬业精神等。
二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将微信小程序与项目开发相结合。
按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。
课程设计思路：本课程根据知识点难易的先后顺序进行讲解。
采用案例驱动式体例，主要包括“案例分析”“知识储备”“案例实现”等，在每个案例中，先对案例进行需求分析，然后在知识储备中讲解实现这个案例需要使用到的知识，并结合示例代码帮助学生理解，最后通过案例实现达到学以致用的目标。
学完微信小程序的基础知识后，通过两个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。
操作系统：Windows 7或更高版本开发工具：微信开发者工具、HBuilder X三、课程的主要内容及基本要求第1章微信小程序入门学习单元微信小程序入门课时6课时学习目标1.了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境2.掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册3.掌握获取微信小程序AppID的方法，能够从微信小程序管理后台获取AppID4.掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装5.掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目6.熟悉微信小程序的项目结构，能够解释每个文件的作用7.熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式9.熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能10.掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置11.了解微信小程序开发常用快捷键，能够列举4类常用快捷键12.了解项目成员，能够说出项目成员的组织结构、分工和权限13.掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员14.熟悉微信小程序的版本，能够说明微信小程序的4种版本15.熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤学习内容知识点掌握程度重点难点什么是微信小程序了解微信小程序的特点了解微信小程序的发展前景了解微信小程序的宿主环境了解注册微信小程序开发账号掌握获取微信小程序AppID 掌握√安装微信开发者工具掌握创建微信小程序项目掌握√微信小程序的项目结构熟悉微信小程序的页面组成熟悉微信小程序的通信模型熟悉认识微信开发者工具熟悉微信小程序的项目设置掌握微信小程序开发常用快捷键了解项目成员的组织结构了解项目成员的分工了解项目成员和体验成员的管理了解项目成员的权限了解添加项目成员和体验成员掌握微信小程序的版本熟悉微信小程序的上线流程熟悉第2章微信小程序页面制作学习单元微信小程序页面制作课时10课时学习目标1.了解WXML的概念，能够说出WXML的特点、WXML与HTML的区别2.了解WXSS的概念，能够说出WXSS的特点、WXSS与CSS的区别3.了解组件的概念，能够说出组件的特点及常用的组件4.掌握页面路径的配置方法，能够运用该方法进行页面管理5.掌握view组件的使用方法，能够灵活运用view组件实现页面的布局效果6.掌握image组件的使用方法，能够灵活运用image组件完成图片插入操作7.掌握rpx单位的使用方法，能够灵活运用rpx单位解决屏幕适配的问题8.掌握页面样式的导入方法，能够灵活运用该方法导入公共样式9.掌握swiper和swiper-item组件的使用方法，能够灵活运用swiper和swiper-item组件完成轮播图的制作10.掌握text组件的使用方法，能够灵活运用text组件定义行内文本11.掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局12.掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置13.掌握标签栏的配置方法，能够完成页面标签栏的配置14.掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度15.掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理16.掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作学习内容知识点掌握程度重点难点WXML简介了解WXSS简介了解常用组件了解页面路径配置掌握√view组件掌握√image组件掌握√√rpx单位掌握样式导入掌握【案例2-1】个人信息-准备工作掌握【案例2-1】个人信息-实现“个人信息”微掌握√信小程序的页面结构【案例2-1】个人信息-实现“个人信息”微掌握信小程序的页面样式swiper和swiper-item组件掌握√text组件掌握Flex布局掌握【案例2-2】本地生活-准备工作掌握【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面结构【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面样式导航栏配置掌握标签栏配置掌握vm、vh单位掌握video组件掌握表单组件掌握√【案例2-3】婚礼邀请函-准备工作掌握【案例2-3】婚礼邀请函-项目初始化掌握【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的结构【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的样式【案例2-3】婚礼邀请函-实现“照片”页面掌握的结构【案例2-3】婚礼邀请函-实现“照片”页面掌握的样式【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的结构【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的样式【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的结构【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的样式第3章微信小程序页面交互学习单元微信小程序页面交互课时10课时学习目标1.熟悉Page()函数，能够归纳Page()函数及其各个参数的作用2.掌握数据绑定，能够运用数据绑定实现页面中数据的显示与修改3.掌握事件绑定，能够在组件触发时执行对应的事件处理函数4.熟悉事件对象，能够总结事件对象的属性及其作用5.掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数6.掌握setData()方法的使用，能够完成数据的设置与更改7.掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件8.掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件9.熟悉hidden属性，能够区分其与wx:if控制属性的区别10.掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取11.掌握模块的使用，能够完成模块的创建和引入12.掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中13.掌握网络请求的实现，能够通过网络请求与服务器进行交互14.掌握提示框的实现，能够在页面中显示消息提示框15.掌握WXS的使用，能够运用WXS处理页面中的数据16.掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载17.掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载18.掌握双向数据绑定，能够运用双向绑定实现数据的动态更改学习内容知识点掌握程度重点难点Page()函数熟悉√数据绑定掌握事件绑定掌握√事件对象熟悉this关键字掌握setData()方法掌握√条件渲染掌握√<block>标签掌握hidden属性熟悉【案例3-1】比较数字大小-准备工作掌握【案例3-1】比较数字大小-实现“比较数字大小”微信小程序的页面结构掌握【案例3-1】比较数字大小-获取并保存用户输入的数字掌握【案例3-1】比较数字大小-判断数字大小并显示结果掌握data-*自定义属性掌握模块掌握【案例3-2】计算器-准备工作掌握【案例3-2】计算器-实现“计算器”微信小程序的页面结构掌握【案例3-2】计算器-实现“计算器”微信小程序的页面逻辑掌握【案例3-2】计算器-特殊情况处理掌握√列表渲染掌握√网络请求掌握√提示框掌握WXS 掌握√上拉触底掌握下拉刷新掌握【案例3-3】美食列表-准备工作掌握【案例3-3】美食列表-获取初始数据掌握【案例3-3】美食列表-实现页面渲染掌握【案例3-3】美食列表-处理电话格式掌握【案例3-3】美食列表-实现上拉触底掌握【案例3-3】美食列表-实现下拉刷新掌握双向数据绑定掌握√【案例3-4】调查问卷-准备工作掌握【案例3-4】调查问卷-获取初始数据掌握【案例3-4】调查问卷-实现页面渲染掌握第4章微信小程序常用API（上）学习单元微信小程序常用API（上）课时9课时学习目标1.掌握scroll-view组件，能够运用scroll-view组件完成视图区域的横向滚动或者纵向滚动2.掌握slider组件，能够运用slider组件完成滑动选择器的制作3.掌握<include>标签，能够运用<include>标签引用其他文件中的代码4.掌握背景音频API，能够运用背景音频API实现音频后台播放、音频暂停等功能5.掌握录音API，能够运用录音API实现录音功能6.掌握音频API，能够运用音频API实现音频播放、暂停等功能7.掌握选择媒体API，能够运用wx.chooseMedia()方法选择图片或视频8.掌握图片预览API，能够运用wx.previewImage()方法预览图片9.掌握文件上传API，能够运用wx.uploadFile()方法实现将本地资源上传到服务器中10.掌握文件下载API，能够运用wx.downloadFile()方法实现资源文件的下载11.掌握canvas组件，能够灵活运用canvas组件创建画布12.掌握画布API，能够运用画布API完成图形的绘制学习内容知识点掌握程度重点难点scroll-view组件掌握√slider组件掌握√<include>标签掌握背景音频API 掌握√【案例4-1】音乐播放器-准备工作掌握【案例4-1】音乐播放器-实现“音乐播放器”掌握微信小程序的页面结构【案例4-1】音乐播放器-实现标签页切换掌握【案例4-1】音乐播放器-实现“音乐推荐”标签页掌握【案例4-1】音乐播放器-实现“播放器”标签页掌握【案例4-1】音乐播放器-实现播放器区域掌握【案例4-1】音乐播放器-实现播放进度的控制掌握【案例4-1】音乐播放器-实现“播放列表”标签页掌握录音API 掌握音频API 掌握【案例4-2】录音机-准备工作掌握【案例4-2】录音机-初始化录音功能掌握【案例4-2】录音机-实现“录音机”微信小程序的页面结构掌握【案例4-2】录音机-实现录音功能掌握【案例4-2】录音机-实现播放录音功能掌握√选择媒体API 掌握图片预览API 掌握文件上传API 掌握√文件下载API 掌握√【案例4-3】头像上传下载-准备工作掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面结构掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面逻辑掌握canvas组件掌握画布API 掌握√【案例4-4】模拟时钟-准备工作掌握【案例4-4】模拟时钟-初始化画布掌握【案例4-4】模拟时钟-绘制表盘掌握【案例4-4】模拟时钟-绘制指针掌握【案例4-4】模拟时钟-实现时钟走动效果掌握√第5章微信小程序常用API（下）学习单元微信小程序常用API（下）课时13课时学习目标1.掌握动画API，能够完成动画的制作2.熟悉登录流程时序，能够归纳微信小程序的登录流程3.掌握登录API，能够运用wx.login()方法实现用户登录4.掌握数据缓存API，能够对数据进行存储、获取和移除等操作5.掌握头像昵称填写功能，能够实现头像选择和昵称填写6.掌握腾讯地图SDK，能够实现腾讯地图SDK的接入和使用7.掌握map组件，能够灵活运用map组件实现地图效果8.掌握地图API，能够实现地图中地理位置的获取等功能9.掌握位置API，能够实现获取当前地理位置的功能10.掌握路由API，能够利用路由API实现页面跳转11.掌握WebSocket API，能够成功创建WebSocket连接12.掌握SocketTask，能够使用SocketTask管理WebSocket连接学习内容知识点掌握程度重点难点动画API 掌握√【案例5-1】罗盘动画-准备工作掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面结构掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面逻辑掌握登录流程时序熟悉登录API 掌握√数据缓存API 掌握√头像昵称填写掌握App()函数掌握√【案例5-2】用户登录-准备工作掌握【案例5-2】用户登录-实现用户登录掌握【案例5-2】用户登录-检查用户是否已经登录掌握【案例5-2】用户登录-获取用户的积分掌握【案例5-2】用户登录-获取用户头像和昵称掌握腾讯地图SDK 掌握map组件掌握地图API 掌握√位置API 掌握路由API 掌握√【案例5-3】查看附近美食餐厅-准备工作掌握【案例5-3】查看附近美食餐厅-获取初始数据掌握【案例5-3】查看附近美食餐厅-在页面中显示地图掌握【案例5-3】查看附近美食餐厅-实现跳转到优惠券页面掌握【案例5-3】查看附近美食餐厅-实现查找附近美食餐厅功能掌握WebSocket API 掌握√√SocketTask 掌握√√【案例5-4】在线聊天-准备工作掌握【案例5-4】在线聊天-实现WebSocket连接掌握【案例5-4】在线聊天-实现发送消息功能掌握【案例5-4】在线聊天-实现消息列表展示功能掌握第6章综合项目——“点餐”微信小程序学习单元综合项目——“点餐”微信小程序课时20课时学习目标1.掌握封装网络请求的方法，能够通过封装网络请求简化项目中网络请求的代码2.掌握用户登录的开发，能够独立实现用户登录3.掌握商家首页的开发，能够独立完成商家首页的编写4.掌握菜单列表页的开发，能够独立完成菜单列表页的编写5.掌握购物车的开发，能够独立实现购物车6.掌握订单确认页的开发，能够独立完成订单确认页的编写7.掌握订单详情页的开发，能够独立完成订单详情页的编写8.掌握订单列表页的开发，能够独立完成订单列表页的编写9.掌握消费记录页的开发，能够独立完成消费记录页的编写学习内容知识点掌握程度重点难点【任务6-1】项目开发准备-开发背景了解【任务6-1】项目开发准备-项目模块划分熟悉【任务6-1】项目开发准备-项目初始化掌握【任务6-2】封装网络请求-保存接口地址掌握【任务6-2】封装网络请求-封装网络请求函数掌握√【任务6-2】封装网络请求-请求失败时的处理掌握【任务6-2】封装网络请求-请求成功时的处理掌握【任务6-3】用户登录-判断登录状态掌握√【任务6-3】用户登录-执行登录操作掌握√【任务6-3】用户登录-记住登录状态掌握【任务6-4】商家首页-加载商家首页数据掌握【任务6-4】商家首页-实现商家首页的轮播图区域掌握【任务6-4】商家首页-实现商家首页的中间区域掌握【任务6-4】商家首页-实现商家首页的底部区域掌握【任务6-5】菜单列表页-加载菜单列表页数据掌握【任务6-5】菜单列表页-实现折扣信息区域掌握【任务6-5】菜单列表页-实现菜单列表区域掌握【任务6-5】菜单列表页-实现点击左侧菜单项滚动右侧商品列表掌握√【任务6-5】菜单列表页-实现滚动右侧商品掌握√列表激活左侧菜单项【任务6-6】购物车-实现底部购物车区域掌握【任务6-6】购物车-实现添加商品到购物车掌握√【任务6-6】购物车-实现小球动画效果掌握√【任务6-6】购物车-实现满减优惠信息区域掌握【任务6-6】购物车-实现购物车界面区域掌握【任务6-6】购物车-实现增加和减少商品数掌握量【任务6-6】购物车-实现清空购物车掌握【任务6-7】订单确认页-跳转到订单确认页掌握【任务6-7】订单确认页-加载订单确认页数掌握据【任务6-7】订单确认页-实现页面结构和页掌握面样式【任务6-7】订单确认页-实现订单信息区域掌握【任务6-7】订单确认页-实现备注区域掌握【任务6-7】订单确认页-实现支付区域掌握【任务6-8】订单详情页-加载订单详情页数掌握据【任务6-8】订单详情页-实现取餐信息区域掌握【任务6-8】订单详情页-实现订单详情区域掌握【任务6-8】订单详情页-实现订单信息区域掌握【任务6-9】订单列表页-加载订单列表页数掌握据【任务6-9】订单列表页-实现订单列表页的掌握页面结构【任务6-9】订单列表页-实现订单列表页的掌握页面样式【任务6-9】订单列表页-实现下拉刷新掌握√【任务6-9】订单列表页-实现上拉触底掌握√【任务6-9】订单列表页-跳转到订单详情页掌握【任务6-10】消费记录页-加载消费记录页数掌握据【任务6-10】消费记录页-实现消费记录页的掌握页面结构【任务6-10】消费记录页-实现消费记录页的掌握页面样式【任务6-10】消费记录页-获取头像掌握第7章微信小程序开发进阶学习单元微信小程序开发进阶课时9课时学习目标1.掌握自定义组件的创建方法，能够根据实际需要创建自定义组件2.掌握自定义组件的使用方法，能够使用自定义组件3.掌握使用自定义组件渲染标签栏的方法，能够使用自定义组件渲染标签栏4.掌握Vant Weapp组件库的使用方法，能够使用Vant Weapp组件库快速搭建微信小程序的页面5.掌握WeUI组件库的使用方法，能够使用WeUI组件库快速搭建微信小程序的页面6.掌握navigator组件的使用方法，能够利用navigator组件实现页面跳转7.了解uni-app框架的概念，能够说出使用uni-app框架开发项目的优势8.掌握HBuilder X开发工具的设置，能够完成HBuilder X的基本设置和个性化设置9.掌握uni-app项目的创建方法，能够完成uni-app项目的创建10.熟悉uni-app项目的目录结构，能够解释各个文件和文件夹的作用11.掌握uni-app项目运行至微信小程序的方法，能够将uni-app项目运行至微信小程序12.掌握uni-app项目的全局配置文件，能够对导航栏、底部标签栏、页面的文件路径等进行配置学习内容知识点掌握程度重点难点创建自定义组件掌握√使用自定义组件掌握√使用自定义组件渲染标签栏掌握Vant Weapp组件库掌握【案例7-1】自定义标签栏-准备工作掌握【案例7-1】自定义标签栏-项目初始化掌握【案例7-1】自定义标签栏-定义标签栏数据掌握【案例7-1】自定义标签栏-实现页面布局掌握【案例7-1】自定义标签栏-实现页面逻辑掌握WeUI组件库掌握√navigator组件掌握√√【案例7-2】电影列表-准备工作掌握【案例7-2】电影列表-实现标签栏掌握【案例7-2】电影列表-实现“正在热映”标签页掌握【案例7-2】电影列表-实现“搜索”标签页掌握【案例7-2】电影列表-实现“分类”标签页掌握uni-app框架概述了解HBuilder X开发工具掌握创建uni-app项目掌握uni-app项目的目录结构熟悉将uni-app项目运行至微信小程序掌握√uni-app项目的全局配置文件掌握【案例7-3】待办事项-准备工作掌握【案例7-3】待办事项-实现添加待办事项的掌握功能【案例7-3】待办事项-实现列表区域掌握第8章uni-app项目—— “短视频”微信小程序学习单元uni-app项目—— “短视频”微信小程序课时9课时学习目标1.掌握公共头部的开发，能够独立完成公共头部代码的编写2.掌握导航栏的开发，能够独立完成导航栏代码的编写3.掌握轮播图的开发，能够独立完成轮播图代码的编写4.掌握视频列表的开发，能够独立完成视频列表代码的编写5.掌握视频详情页的开发，能够独立完成视频详情页的编写学习内容知识点掌握程度重点难点【任务8-1】项目开发准备-项目展示掌握【任务8-1】项目开发准备-项目初始化掌握√【任务8-2】公共头部区域-实现公共头部区域的页面结构掌握【任务8-2】公共头部区域-实现公共头部区域的页面样式掌握【任务8-2】公共头部区域-在页面中显示公共头部区域掌握【任务8-3】导航栏区域-加载导航栏数据掌握√【任务8-3】导航栏区域-实现导航栏区域的页面结构掌握【任务8-3】导航栏区域-实现导航栏区域的页面样式掌握【任务8-3】导航栏区域-实现导航栏的切换效果掌握【任务8-4】轮播图区域-加载轮播图数据掌握【任务8-4】轮播图区域-实现轮播图区域的页面结构掌握【任务8-4】轮播图区域-实现轮播图区域的页面样式掌握【任务8-5】视频列表区域-加载视频列表数据掌握【任务8-5】视频列表区域-实现视频列表区域的页面结构掌握【任务8-5】视频列表区域-实现视频列表区域的页面样式掌握【任务8-5】视频列表区域-实现跳转到视频详情页掌握√【任务8-6】视频详情页-实现整体页面结构掌握【任务8-6】视频详情页-实现视频详情区域掌握【任务8-6】视频详情页-实现推荐视频区域掌握【任务8-6】视频详情页-实现评论列表区域掌握四、课时分配五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
微信小程序开发 1-1 教案-微信小程序概述[4页]
![微信小程序开发 1-1 教案-微信小程序概述[4页]](https://img.taocdn.com/s3/m/3b0648d6f605cc1755270722192e453611665b51.png)
第一章微信小程序入门任务1.1 微信小程序概述一、小程序简介现在，生活中随处都应用到微信小程序。
打开不同的微信小程序，如图1.1所示，点击右上角“…”可以进行转发、添加到我的小程序、取消等。
点击右上角“⊙”，则可以关闭微信小程序。
只要通过扫一扫或搜一搜，或者附近的小程序，你就可以看到5公里内所有的小程序。
同时，小程序完全不需要下载安装，也不需要卸载，更不会占用手机内存。
微信小程序也被简称为小程序，其英文名称是Mini Program。
它是一种存在于微信内部的轻量级应用程序。
微信研发团队在其官方网站上有一段关于微信小程序的介绍:“小程序是一种新的开放四、小程序的发展前景在未来的发展中，小程序将会更加方便、快捷，注册申请的渠道也更加快捷、方便，与此同时，还会进一步加强第三方平台的合作，如果能够开放第三方开发平台，那么它将为小程序的开发提供更大的后方支援。
并且随着小程序的日臻完善，小程序的开发者将能够获得更大的权限支持，由此可见，小程序在未来的发展空间中是相当巨大的，并且对于企业进行小程序制作的优势也将会进一步凸显出来。
小程序传统产业的代表，如图所示。
小程序可以使企业和用户更好地交流，也能够实现用户更好的转化，所以对企业来说小程序可以带来可观的利润和流量。
随着微信开放的功能的不断增多，那么一些小程序也会不断地完善自己，开放一些功能且不断得到匹配，这样也就提供了更多的接口能力，从而能够方便开发者进行深度地挖掘。
相信未来小程序也将具备更多的功能，那么企业所能实现的功能也会随着增加，这对于其未来发展有着至关重要的作用，同时也能推动微信的发展。
小程序互联网公司的代表，如图所示。
小程序将会与其他行业有更为友好的链接，小程序的发展是在微信的用户发展基础上而发展的，这样才能够用微信更好地结合，从而可以实现更多的功能。
因此，小程序在未来不仅方便企业与用户，也会方便企业与企业之间、用户与用户之间的交流。
《微信小程序开发实战》读书笔记PPT模板思维导图下载
04
4.3 【任 务2】照 片页面
05
4.4 【任 务3】美 好时光页 面
06
4.5 【任 务4】婚 礼地】 宾客信息页面
课后习题
第5章 API应用案例（上）
【教学导航】
5.1 【案例1】用 户登录
5.2 【案例2】个 人中心
5.3 【案例3】天 气预报查询
第8章 综合项目—— 点餐系统
08
第7章 小程序开发框 架
本书是针对Web前端开发人员编写的一本快速掌握微信小程序开发的教程。本书通过通俗易懂的语言、丰 富实用的案例，讲解微信小程序的原理和开发技术。全书共8章，第1、2章主要讲解微信小程序的入门知识，介 绍微信小程序的优势和发展前景，通过简单易懂的“比较数字大小”案例帮助读者快速熟悉开发流程；第3、4章 分别讲解“音乐”和“婚礼邀请函”小程序项目，通过这两章的学习，读者可以掌握小程序的布局和各种组件的 使用；第5、6章讲解微信小程序的各种API，通过8个典型的案例对这些API的使用进行演示；第7章讲解微信小 程序开发框架，涵盖了微信小程序模块开发、第三方框架（mpvue、WePY）和UI库（WeUI）；第8章讲解一 个综合项目—点餐系统，详细讲解项目从需求分析到代码实现的全过程。本书适合作为高等院校本、专科计算机 相关专业的教材，也可作为广大计算机编程爱好者的参考书。
内容提要
第1章 微信小程序入门
【教学导航】
1.1 初识微信小 程序
1.2 开发环境搭 建
1.3 小程序的开 发体验
本章小结
1.4 团队开发与 项目上线
课后习题
第2章 微信小程序开发基础
01
【教学导 航】
02
2.1 【案 例1】比 较数字大 小
微信小程序开发-简易教程
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。
这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
下载源码1. 获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。
注意不可直接使用服务号或订阅号的AppID。
利用提供的帐号，登录https://，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的AppID了。
注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。
那么我们还需要操作“绑定开发者”。
即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。
本教程默认注册帐号、体验都是使用管理员微信号。
2. 创建项目我们需要通过开发者工具，来完成小程序创建和代码编辑。
开发者工具安装完成后，打开并使用微信扫码登录。
选择创建“项目”，填入上文获取到的AppID，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个quick start项目。
选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。
项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。
3. 编写代码创建小程序实例点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。
最关键也是必不可少的，是app.js、app.json、app.wxss这三个。
其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。
学做小程序——基础篇
学做小程序——基础篇学做小程序——基础篇小程序是一种轻量级的应用程序，适用于许多平台，如微信、支付宝等。
相对于传统的应用程序，小程序不需要下载安装，用户可以直接在平台上面使用，省去了许多的步骤和流程，同时，小程序也具有开发简单、功能丰富、使用便捷等优点，因此越来越受到人们的关注和喜爱。
如何学习小程序呢？下面我们来谈谈学习小程序的基础篇。
一、基础语法小程序的基础语法同样也是十分重要的，任何一门编程语言都有自己的基础语法，小程序也不例外。
小程序的语法相对简单，基本上都是一些标签和属性组成的，与HTML和CSS的语法很相似。
开发者需要对小程序的基础语法进行一遍学习，对于小程序中最常见的标签和属性进行掌握，例如View、Text、Image、Button等标签，以及它们相应的属性，例如fontSize、color、src、disabled等。
二、开发工具小程序是一种应用程序，需要特定的开发工具才能进行开发。
微信官方提供了一个叫做“微信开发者工具”的IDE，是小程序开发的主流工具，支持实时预览、代码编辑、调试等功能。
开发者需要学习如何使用微信开发者工具，包括如何创建小程序项目、如何生成项目的AppID、如何在开发者工具中进行调试等。
三、界面布局界面布局是小程序开发的核心之一，它涉及到小程序的展示效果和用户交互体验。
小程序可以使用WXML和WXSS，分别对小程序的结构和样式进行描述，开发者需要学习如何使用WXML和WXSS对小程序进行界面布局。
需要注意的是，小程序的界面布局需要符合响应式的设计思想，即在不同的设备上可以自适应地展示不同的布局和样式，这是小程序开发中需要重点学习的一点。
四、数据绑定和事件处理数据绑定和事件处理是小程序开发中比较高频率的操作，也是比较基础的部分。
小程序的数据绑定可以使用{{}}语法将数据源和视图进行绑定，而事件处理则可以使用bind或catch来绑定视图和JavaScript语句之间的响应。
微信小程序开发图解案例教程第1章 认识微信小程序
图1.10 模拟器区域
1.3.4 编辑器区域
编辑器区域分为两部分：一部分用 来展示项目文件目录和文件结构；另一 部分用来进行代码编辑，如图1.11所示。
图1.11 编辑器区域
（1）在项目目录上单击鼠 标右键可以在硬盘打开文件 目录，对文件目录重新命名， 删除目录，在该目录下查找 指定内容、新建文件等，如 图1.12所示。
（4）2016年12月28日，张小龙在微信公开课中解答外界对微信小程序 的几大疑惑，包括没有应用商店、没有推送消息等。 （5）2016年12月30日，微信公众平台对外发布公告，上线的微信小程 序最多可生成10?000个带参数的二维码。 （6）2017年1月9日，微信小程序正式上线。 （7）2017年3月27日，个人开发者可以申请小程序开发和发布。
图1.19 AppData功能
（6）WXML窗口用于帮助开发者开发WXML转化后的界面。在这里可以 看到真实的页面结构以及结构对应的WXSS属性，同时可以修改对应的 WXSS属性，如图1.20所示。
图1.20 Wxml功能
1.3.6 工具栏区域
1．编译操作 我们可以通过编译按钮或者使用快捷键CTRL+B编译当前小程序的
1.2.2 开发准备
STEP1：在“微信公众平台”注册微信开发者账号。单击“立即注 册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据 提示填写相关信息完成注册。
在微信公众平台中，选择“小程序”→“小程序开发文档”，如 图1.3（A）所示，可以打开帮助文档界面，如图1.3（B）所示。
图1.3（a） 开发文档
图1.3（b） 帮助文档
在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6 个菜单，针对不同角色的用户提供了不同内容的帮助文档。
微信小程序基础ppt课件
合理利用微信小程序的缓存机制， 对常用图片进行缓存，减少重复加 载。
数据缓存机制应用实践分享
数据结构优化
采用合适的数据结构，减少数据 存储和读取的时间。
缓存策略选择
根据数据特点选择合适的缓存策 略，如本地缓存、网络缓存等。
缓存清理
定期清理过期或不再使用的缓存 数据，保证缓存空间的有效利用
。
点击“立即注册”按钮 选择“小程序”注册
下载并安装微信开发者工具
访问微信开发者工具 官网
安装并运行微信开发 者工具
下载适合自己操作系 统的版本
创建并运行第一个小程序
填写项目名称和目录
在微信开发者工具中点击“ 新建项目”
01
02
03
选择小程序的模板
点击“确定”按钮创建项目
04
05
在微信开发者工具中预览和 调试小程序
03
微信小程序基本框架 与组件
小程序基本框架结构
01
02
03
04
小程序由页面、路由、配置文 件等组成
页面由多个组件组成，用于展 示数据和交互
件用于配置小程序的基 本信息和页面路径等
小程序页面结构及组件介绍
视图容器包括view、scroll-view 、swiper等，用于布局和滚动内 容
一致性
设计风格和元素应保持一 致，避免给用户带来混乱 和困惑。
用户体验
设计应注重用户体验，提 供良好的交互和反馈，使 用户能够轻松完成任务。
界面布局与排版技巧分享
布局合理
界面布局应合理，使用户 能够快速找到所需信息。
排版清晰
文字、图片等元素应排版 清晰，避免拥挤和重叠。
图标与文字
图标与文字应清晰易懂， 避免使用过于复杂或难以 理解的图标。
微信小程序入门教程--列表渲染多层嵌套循环及wx：key的使用
微信⼩程序⼊门教程--列表渲染多层嵌套循环及wx：key的使⽤⼊门教程之列表渲染多层嵌套循环，⽬前官⽅的⽂档⾥，主要是⼀维数组列表渲染的案例，还是⽐较简单单⼀，给刚⼊门的童鞋还是⽆从⼊⼿的感觉。
<view wx:for="{{items}}">{{index}}: {{item.message}}</view>还有⼀个九九乘法表把数据直接写到wxml⾥的，并不是动态⼆维数组的列表渲染<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view>那么今天，我们主要来讲讲动态多维数组和对象混合的列表渲染。
讲解何为多维数组和对象混合，给个很简单的例⼦twoList:[{id:1,name:'应季鲜果',count:1,twodata:[{'id':11,'name':'鸡脆⾻'},{'id':12,'name':'鸡⽖'}]},{id:2,name:'精致糕点',count:6,twodata:[{'id':13,'name':'羔⽺排⾻⼀条'},{'id':14,'name':'微辣'}]}]上述例⼦就是⼀个数组，这都是我们⽇常开发过程中，经常会碰到的JSON格式，该数组的元素是有对象，对象⼜分为属性，属于数组对象混合，可能对于刚接触⼩程序的童鞋，碰到这种数组对象混合的就会发难了。
ch01微信小程序入门
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 填写完成后在下方管理员身份验证栏 目会自动出现一个二维码。 此时需要管理员用本人微信扫描页面 上提供的二维码来进行身份确认。这 种验证方式是免费的，不会扣取任何 费用。
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 扫码后手机微信会自动跳转到微信验 证页面。 检查微信验证页面上所显示的姓名和 身份证号码，确认无误后点击“确定” 按钮会提示身份验证成功。
02 小程序的准备工作
03 成员管理
2. 成员人数限制 个人类型的小程序允许管理员添加15个开发者，其中5个开发者，10个体验者。 其他类型的小程序开发者数量限制如下： • 未认证未发布组织类型：30人； • 已认证未发布/未认证已发布组织类型：60人； • 已认证已发布组织类型：90人。
02 小程序的准备工作
02 小程序的准备工作
01 注册开发者账号
在当前页面上选择注册的账号类型为“小程序”，即可进入小程序的正式注册页面。
02 小程序的注册页面包含三个填写 步骤：账号信息、邮箱激活、信息登 记。 1. 账号信息填写 在账号信息填写页面需要填写邮箱、 密码、确认密码、验证码以及勾选确 认协议条款。
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 当前可以直接单击“前往小程序”按钮进 入小程序管理页面。
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 此时账号是默认登录后的状态，可以直接进行小程序的后续管理工作。
现在小程序的账号注册就全部完成了，之后可以访问微信公众平台（） 手动输入账号和密码登录进入小程序管理页面。
提交审核与发布 完成小程序后需要进行代码上传，然后由管理员提交代码等待 微信团队审核，审核通过后即可正式发布。
微信小程序开发实战-综合项目——“点餐”微信小程序
任务实现
5. 实现滚动右侧商品列表激活左侧菜单项
先定一个小 目标！
掌握滚动右侧商品列表激活左侧菜单项 的实现，能够完成滚动右侧商品列表激 活左侧菜单项功能的开发
任务实现
5. 实现滚动右侧商品列表激活左侧菜单项
滚动右侧商品列表激活左侧菜单项
在菜单列表中，滚动右侧商品列表时激活左侧菜单项，使左侧菜单项可以根 据右侧列表对应的分类进行变化。
项目模块划分
先定一个小 目标！
熟悉项目的模块划分，能够总结每个模 块的内容
项目模块划分
“点餐”微信小程序包含的模块
用户登录
当“点餐”微信小程序启动后， 会自动进行用户登录。
商家首页
在商家首页点击“开始点餐之 旅”，跳转到菜单列表页进行 点餐。
菜单列表页
用户可以在菜单列表页中根 据自己的需求选择商品，点 击“+”将所选商品加入购 物车。
目录/Contents
01
【任务6-1】项目开发准备
02
【任务6-2】封装网络请求
03
【任务6-3】用户登录
04
【任务6-4】商家首页
05
【任务6-5】菜单列表页
目录/Contents
06
【任务6-6】购物车
07
【任务6-7】订单确认页
08
【任务6-8】订单详情页
09
【任务6-9】订单列表页
10
购物车界面
当购物车中数量不为0时，购物车 图标右上角显示商品数量，购物车 图标可变为点击状态，此时点击购 物车图标可以显示或者隐藏购物车 界面区域。当显示购物车界面区域 时，可以添加或者减少购物车中的 商品数量。
任务实现
6. 实现增加和减少商品数量
微信小程序入门ppt课件
WXSS
26
1
尺寸单位
设备
rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 屏幕宽度
iPhone5
1rpx = 0.42px
1px = 2.34rpx
320
iPhone6
1rpx = 0.5px
1px = 2rpx
375
iPhone6 Plus 1rpx = 0.552px
27
2
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联 样式表的相对路径，用;表示语句结束。
28
3
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解 析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{{color}};" />
0
1
2
3
16
7
View
实现点击效果
hover-class指定按下去的样式类。 当 hover-class="none" 时，没有点击态效果
WXML <view hover-class='hover'>按钮</view>
WXSS
.hover{ background-color: #aaa;
}
178239text\t 空格（ 多个只会显示一个空格） \n 换行
<text>你好！\t七月流火啊！\n我 在下一行</text>
PHP程序设计与微信小程序案例教程 课件全 第1-7章
</view> </view>
2.3.4 制作“比较成绩”页面
1. “比较成绩”页面框架 框
框 按钮
框
框 文本 输入框
框 文本 输入框 按钮
3.微信开发者工具界面
（1）菜单栏 项目：用于新建项目、关闭项目、导入项目、查 看所有项目。 文件：用于新建、保存、关闭文件。 编辑：用于查找替换编辑代码、格式化代码。 工具：用于访问一些辅助工具。 界面：用于显示和隐藏开发者界面的各个窗口。 设置：用于设置外观、快捷键、编辑器等。
微信开发者工具：用于切换账号、更换开发模式、 调试等操作。
框 文本
2.3.4 制作“比较成绩”页面
2.“比较成绩”页面WXML代码
步骤一 app.json
{ "pages":[ "pages/bjcj/bjcj", "pages/index/index", "pages/logs/logs" ]
}
步骤二 bjcj.wxml
<view> <text>请输入语文成绩</text> <input type="number" />
1.3注册微信小程序账号
1.注册微信小程序账号
1
Hale Waihona Puke 2打开微信公众平台官网 https://
选择注册的账号类型： 小程序
3
依次完成账号信息、邮箱 激活、信息登记
《微信小程序开发与实战》课后习题答案
微信小程序企业开发实战课后习题答案答案第一章 微信小程序简介1．填空题（1）轻量（2）微信公众号、微信小程序、企业微信（3）即用即走，无须下载第二章 微信开发者工具1、填空题（1）订阅号、服务号、小程序、企业微信（2）小程序（3）WXML、WXSS、JSON、JS2、选择题（1）C（2）B第三章 微信小程序起步1．填空题（1）WXML、WXSS、JSON、JS（2）渲染层、逻辑层（3）App()、Page()、Component()2、选择题（1）D（2）D第四章 小程序的配置文件 1、填空题（1）app.json（2）style（3）page.json（4）black2、选择题（1）D（2）B（3）C第五章 WXML语法基础 1、填空题（1）Mustache（2）wx:if、wx:elif、wx:else （3）import、include2、选择题（1）B第六章 WXSS样式处理 1、填空题（1）rpx（2）px、rpx、rem（3）import2、选择题（1）B第七章 WXS语法1、填空题（1）WeiXin Script（2）module、src（3）constructor、typeof2、选择题（1）C（2）D（3）C第八章 WXS语法1、填空题（1）MINA（2）View视图层、App Service逻辑层、Native系统层（3）ECMAScript、小程序框架、小程序API2、选择题（1）A（2）B（3）C第九章 微信小程序核心组件1、填空题（1）view（2）表单（3）camera、mode（4）longitude、latitude2、选择题（1）D（2）B（3）B第十章 微信小程序核心API1、填空题（1）HTTPS（2）10（3）enablePullDownRefresh2、选择题（1）D（2）D（3）A第十一章 微信小程序开放能力1、填空题（1）wx.getUserProfile()（2）wx.requestPayment()（3）onAddToFavorites()、onShareAppMessage()、onShareTimeline() 2、选择题（1）A（2）D第十二章 微信小程序云开发1、填空题（1）云数据库、云存储、云函数（2）小程序管理员、云开发管理员、云开发开发者（3）非关系型（4）wx.cloud.callFunction()2、选择题（1）A（2）D（3）D第十三章 第三方UI组件库1、填空题（1）WXML、WXSS、JSON、JS（2）component、true（3）<slot>2、选择题（1）C（2）B。
2024版微信小程序基础ppt课件
应用场景及案例分析
拼多多小程序
拼多多通过小程序实现了电商购物的全流程体验，包括商品浏览、购买、支付等。借助小程序的便捷 性和用户群体优势，拼多多成功吸引了大量用户并实现快速增长。
美团外卖小程序
美团外卖通过小程序为用户提供餐饮外卖服务。用户可以在小程序中浏览餐厅和菜品、下单支付并享 受送餐服务。美团外卖小程序的便捷性和实用性赢得了用户的青睐。
提交审核、发布上线等后续操作指南
提交审核流程详解
详细阐述小程序提交审核的流程，包括准备审核材料、填 写审核信息、提交审核申请等。
审核常见问题及解决方案
列举在提交审核过程中可能遇到的问题，如审核失败、审 核时间过长等，并提供相应的解决方案和技巧。
发布上线操作指南
指导如何将通过审核的小程序发布上线，包括设置小程序 版本、选择发布范围、发布操作等。同时介绍如何管理已 发布的小程序，如更新版本、暂停服务等。
定期更新与优化
根据用户反馈和数据分析，定期更新小程序 并优化界面设计和用户体验。
06
网络请求与数据处理方案探讨
网络请求方式选择及实现过程演示
HTTP请求
01
使用`wx.request`发起HTTP请求，支持GET和POST方法。演示
如何设置请求参数、请求头以及处理响应数据。
WebSocket通信
微信小程序优势与特点
用户群体庞大
微信拥有超过十亿的用户群体， 为小程序提供了巨大的潜在用户 基础。
跨平台支持
小程序可在iOS和Android等主流 移动操作系统上运行，无需针对 不同平台开发多个应用。
微信小程序优势与特点
开发成本低
相对于原生应用，小程序的开发成本更低，维护更容易。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 什么是微信小程序
微信小程序与原生App的关系图。 关系特点： 跨平台（支持iOS/Android） 与微信紧密结合 扫一扫或搜一搜可以获取小程序 一键登录
购物
订票
…
微信小程序
微信
…
原生应用
操作系统 （如Android、iOS）
✎ 1.1 初识微信小程序
1 什么是微信小程序
微信小程序覆盖的领域：
✎ 1.2 开发环境搭建
1 注册微信公众号
在“设置”-“开发设置”中查看AppID，为小程序开发做准备：
✎ 1.2 开发环境搭建
2 安装微信开发者工具
在微信公众平台网站中找到微信开发工具的下载地址：
✎ 1.2 开发环境搭建
2 安装微信开发者工具
Windows 7操作系统为例，演示开发者工具的安装和使用，具体步骤如下：
教育 媒体
房地
交通
产
旅游 电商
✎ 1.1 初识微信小程序
1 什么是微信小程序
微信小程序存在的必要性： 小程序可以完成订票、打车、订餐等服务。 服务号的功能薄弱，而小程序功能强大。 小程序可以被附近用户搜索到。 小程序可以结合公众平台来推广。
✎ 1.1 初识微信小程序
1 什么是微信小程序
无需升级
开发成本 开发周期短
开发周期长
开发周期适中
开发周期 开发成本低
开发成本高
开发成本适中
✎ 1.1 初识微信小程序
4 微信小程序的发展前景
微信小程序迅速发展表现：
生态体系。
•微信小程序通过对开发者的支持加大，能够实现更多的功能。 •企业中也会大量引入微信小程序业务开展，如滴滴打车、美团外卖、货拉 拉等等。
微信小程序发展数据：
8 200
150
上线
6
100
数量
4
开发
50
者
2
0
0
用户
活跃 用户
✎ 1.1 初识微信小程序
1 什么是微信小程序
微信小程序热门应用案例。
京东 美团 购物 外卖
摩拜 单车
链家 租房
✎ 1.1 初识微信小程序
1 什么是微信小程序
单击微信中的搜索按钮，输入关键词“美团外卖”。
✎ 1.1 初识微信小程序
☞点击查看本节相关知识点
小程序开发体验
☞点击查看本节相关知识点
团队开发与项目上线
☞点击查看本节相关知识点
✎ 1.1 初识微信小程序
1 什么是微信小程序
微信小程序：是一种不需要安装即可使用的应用，用户只需扫一扫或搜一下 即可打开应用，无需安装或卸载。
应用体积小 无需安装
特点
触手可及
无需卸载
✎ 1.1 初识微信小程序
第1章 微信小程序入门
微信 小程序
• 初识微信小程序 • 小程序的开发体验
• 开发环境搭建 • 团队开发与项目上线
✎
学习目标
1 了解微信小程序的
概念及发展前景
掌握微信小程序 2
开发工具的使用
掌握微信小程序
4 的目录结构
掌握微信小程序
的基本功能 3
✎
目录
初识微信小程序
☞点击查看本节相关知识点
开发环境搭建
双击下载后 的安装包， 安装程序打
开后
单击“下一 步”
单击“我接 受”
单击“安 装”
✎ 1.2 开发环境搭建
2 安装微信开发者工具
安装向导：
✎ 1.3 小程序开发体验
1 创建项目
首次微信扫码登录，登录成功后选择开发模式：
✎ 1.3 小程序开发体验
1 创建项目
单击“小程序”项目，就可以创建一个新的小程序项目：
✎ 1.3 小程序开发体验
2 开发者工具的使用
小程序项目创建成功后，就会进入到开发调试环境中。
✎ 1.3 小程序开发体验
2 开发者工具的使用
菜单栏 工具栏
模拟器
编辑器
调试器
✎ 1.3 小程序开发体验
2 开发者工具的使用
通过菜单栏可以访问微信开发者工具的大部分功能： 项目：用于新建项目或打开一个现有的项目。 文件：用于新建文件、保存文件或关闭文件。 编辑：用于编辑代码，对代码进行格式化。 工具：用于访问一些辅助工具。 界面：用于控制界面中各部分的显示和隐藏。 设置：用于对外观、快捷键、编辑器等进行设置。 微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。
1 注册微信公众号
注册微信公众号的步骤：
浏览器打开 “https://”
选择注册的账号类型
单击“小程序”完成注册
✎ 1.2 开发环境搭建
1 注册微信公众号
微信公众号展示图：
✎ 1.2 开发环境搭建
1 注册微信公众号
微信小程
2 开发者工具的使用
工具栏提供了一些常用功能的快捷按钮，具体解释如下： 个人中心：位于工具栏最左侧第1个按钮，显示当前登录用户头像。 模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。 云开发：开发者可以使用云开发来开发小程序、小游戏。云开发能力从基
础库2.2.3开始支持。
✎ 1.1 初识微信小程序
2 微信小程序账号
小程序与订阅号、服务号的区别：
对比项
加载及组件 运营后台 接口数量
小程序
加载慢，专门提供组件 实时数据
丰富的接口，如文件操作、设备相关、动画等
订阅号和服务号
加载快，使用风格统一且近乎原生的页面组件 非实时数据
接口数量比较少，只提供有限的功能，受限于浏览器
开放能力。
•方便开发者进行深度挖掘。 •微信小程序的配套服务将会不断完善，对发展起到推动作用。
用户黏性。
•随着微信小程序用户量的发展，用户对产品的诉求的不断提高，用户对产 品的改进意见越来越多，会帮助微信小程序的发展。 •未来小程序和微信之间将实现更佳的链接，用户获取小程序更加方便。
✎ 1.2 开发环境搭建
✎ 1.1 初识微信小程序
3 微信小程序的特点
微信小程序与原生App、Web App的区别：
对比项
下载 安装
小程序
订阅号和服务号
无需下载，通过 扫码等方式获取
从iOS和Android应用商店中下载
无需安装
安装在手机中占用存储空间
Web App
无需下载通过浏览器进入 无需安装
升级
无需升级
需要升级操作
✎ 1.3 小程序开发体验
2 开发者工具的使用
工具栏提供了一些常用功能的快捷按钮，具体解释如下： 模式切换下拉菜单：用于在小程序模式搜索动态页和插件模式之间切换。 编译下拉菜单：用于切换编译模式，默认为普通编译。 编译：编写小程序的代码后，需要编译才能运行。
1 什么是微信小程序
微信小程序的功能界定。
支持的功能 线下扫码 挂起状态 消息通知
小程序和公众号的关联 小程序的搜索和历史列表
不支持的功能 小程序没有集中入口，没有应用商店
小程序没有订阅关系 小程序不能主动推动消息（可用模板消息）
-
✎ 1.1 初识微信小程序
2 微信小程序账号
微信公众平台账号分类：