一、概念
（1）小程序是什么？
产品经理视角：用户不需要安装卸载就可以使用的应用，达到了用完即走的目的。
用户视角：微信里的应用
（2） 小程序和普通网页开发的区别
1、运行环境不同（宿主环境不同）
网页运行在浏览器环境中
小程序运行在微信环境中
2. API不同
小程序是在微信中运行的 所以小程序没有DOM、BOM API，但是小程序可以调用微信环境提供的API：微信支付、微信扫码、地理定位
3.开发模式不同
网页开发模式：代码编辑器 + 浏览器
小程序开发有自己的一套标准 ：
- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置并开发小程序项目
- 上线到微信提供的环境中
（3）小程序开发流程
参考 ： 微信公众平台
1.注册：在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发 通常由运营、产品经理、项目经理进行注册
2.小程序信息完善：填写小程序基本信息，包括名称、头像、介绍及服务范围等 通常是有运营、项目经理、产品经理进行完善
3.开发小程序：完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具，参考文档进行小程序的开发和调试，前端主要工作
4. 提交审核和发布： 完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布） 前端提交审核产品经理提交上下
填写邮箱等信息后 返回小程序AppID, 相当于小程序在微信中的身份证
（4）基本配置
下载最新的稳定版Stable Build 的微信开发者工具 下载地址
（1）设置===》外观设置 可以设置背景颜色和调试工具的颜色
（2）不使用任何代理，部分点可能装了网络加速器或者 翻强 工具，导致网络不稳定，所以新建项目时 选中不是有代理
（5）文件结构
全局
- pages 用来存放所有小程序的页面
- utils用来存放工具性质的模块(例如：格式化事件的自定义模块)
- app.js 小程序项目的入口文件
- app.json 小程序项目的全局配置文件
- app.wxss 小程序的全局样式文件 相当于css文件
- project.config.json 项目的配置文件
- sitemap.json 用来配置小程序及页面运行被微信搜索
局部
小程序官方建议把所有的小程序页面，都放在pages目录中，每个页面以单独的文件存在。
其中，每个页面由4个基本文件组成，分别为：
- .js文件--页面的脚本文件，定义页面的数据、事件处理函数、生命周期
- .json文件--当页面的配置文件，配置页面的外观、标题等
- .wxml文件--页面的模板结构文件 相当于html
- .wxss文件--当前页面的样式表文件 局部css文件
注意：当局部权重大于等于全局wxss时 局部wxss大于全局wxss
（6）app.json 文件
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。
Demo 项目里面的 app.json 配置内容如下：
简单了解下这 4 个配置项的作用：
pages：用来记录当前小程序所有页面的路径window：全局定义小程序所有页面的背景色、文字颜色等style：全局定义小程序组件所使用的样式版本sitemapLocation：用来指明 sitemap.json 的位置
（6）project.config.json 文件
project.config.json
setting中保存了编译相关的配置projectname中保存的是项目名称appid中保存的是小程序的账号 ID
（7）sitemap.json 文件
微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO （搜索引擎优化），sitemap.json 用来配置小程序页面是否允许微信搜索。
当开发者允许微信搜索时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
注意： sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
（8）页面的 .json 配置文件
小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 中的 window 中的配置项
（9）新建小程序页面
- 在
pages文件中右键新建文件夹 -- home，在home文件夹右键新建 Page -- 输入 home
- 官方推荐文件夹名称和页面的名称一致，方便后期的维护
- 新建页面组件的时候，
不需要输入后缀名
- 在
app.json-->pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件 - 对 pages 目录下页面的删除或者新增都需要在 app.json 文件的 pages 数组中进行新增或删除
（10）设置首页的两个方式
调整 app.json --> pages 数组中页面路径的前后顺序，即可修改项目的首页，小程序会把排在第一位的页面，当作项目首页进行渲染
在 app.json 中 pages 同级，配置一个新的节点 entryPagePath 节点，传入需要设置为首页的路径即可，最终小程序项目的首页，以 entryPagePath 节点设置的为准
编辑
（11）WXML 的概念以及和 HTML 之间的区别
- 什么是
WXMLWXML（WeiXin Markup Language）是框架设计的一套标签语言（组件），用来构建小程序页面的结构，其作用类似于网页开发中的HTML WXML和HTML的区别
- 标签名称不同
HTML---div、span、img、aWXML---view、text、image、navigator
- 标签属性不同
<a href="#">超链接</a><navigator url="/pages/home/home"></navigator>
- 提供了类似于 Vue 中的模板语法
- 数据绑定 -- 插值表达式
- 列表渲染 -- wx:for -- v-for
- 条件渲染 -- wx:if -- v-if
（12）WXSS 的概念以及和 CSS 之间的区别
- 什么是
WXSS
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式- 类似于网页开发中的
CSS
WXSS和CSS之间的区别
- 新增了 rpx 自适应尺寸单位
CSS中需要手动进行像素单位换算，例如remWXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
- 提供了全局的样式和局部样式
- 项目根目录中的
app.wxss会作用于所有小程序页面 - 局部页面的
.wxss样式仅对当前页面生效
WXSS仅支持部分CSS选择器
- .class 和 #id
- element（标签选择器）
- 并集选择器和后代选择器
- ::after 和 ::before 等伪类选择器
（13）小程序中 JS 文件的三大分类
一个项目仅仅提供页面的展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作，例如：响应用户的点击、获取用户的位置等等
小程序中的 JS 文件分类三大类，分别是：
- app.js
- 是
整个小程序项目的入口文件，通过调用App() 函数来启动整个小程序
- 页面的 .js 文件
- 是
页面的入口文件，通过调用Page() 函数来创建小程序页面，并运行小程序页面
- 普通的 .js 文件
- 是
普通的功能模块文件，用来封装公共的函数或属性供页面使用
（14）小程序的宿主环境
编辑
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位 等等
- 小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
（15）小程序的通信主体
小程序中通信的主体是 渲染层 和 逻辑层，其中：
WXML模板和WXSS样式工作在渲染层JS脚本工作在逻辑层
编辑
小程序的通信模型
小程序中的通信模型分为两个部分
渲染层和逻辑层之间的通信
- 由微信客户端进行转发
逻辑层和第三方服务器之间的通信
- 由微信客户端进行转发
编辑
渲染层和逻辑层运行在不同的线程中
（16）运行机制
- 小程序启动的过程
- 把小程序的代码包下载到本地
- 加载
app.json全局配置文件 - 执行
app.js小程序入口文件，调用 App() 创建小程序实例 - 渲染小程序首页
- 小程序启动完成
- 页面渲染的过程
- 加载页面的
.json配置文件 - 加载页面的
.wxml模板和.wxss样式 - 执行页面的
.js文件，调用 Page() 创建页面实例 - 页面渲染完成
（17）权限管理需求
- 在中大型的公司中，人员的分工非常仔细：同一个小程序项目，一般会有不同的岗位、不同角色的员工同时参与设计与开发
- 此时出于管理需要，我们迫切需要对不同的岗位、不同的角色的员工的权限进行边界的划分，使他们能够高效的进行协同开发
编辑
小程序的开发流程
（18）程序成员管理的两个方面
小程序成员管理体现在 管理员 对小程序 项目成员 及 体验成员 的管理：
- 项目成员
- 表示参与小程序开发、运营的成员
- 可登陆小程序管理后台(微信公众平台)
- 管理员可以添加、删除项目成员，并设置项目成员的角色
- 体验成员
- 表示参与小程序内测体验的成员
- 可使用体验版小程序，但不属于项目成员
- 管理员及项目成员均可添加、删除体验成员
（19）开发者的权限说明
项目成员分为三个角色： 运营成员、开发人员、数据分析者
开发者的权限说明
开发者权限：可使用小程序开发者工具及对小程序的功能进行代码管理
体验者权限：可使用体验版小程序
登录权限：可登录小程序的后台管理，无需要管理员确认
开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
腾讯云管理：云开发相关设置
（20）如何添加项目成员和体验成员
小程序管理
（21）小程序的发布
软件开发过程中，根据时间节点的不同，会产出不同的软件版本
- 开发版本：开发者编写代码的同时，对项目代码进行自测
- 体验版本：直到程序达到一个稳定可靠，可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试
- 正式版本：最后修复完程序的 bug 后，发布正式版供外部用户使用
编辑
在后台查看上传之后的版本
登录小程序管理后台 --> 管理 --> 版本管理 --> 开发版本，即可查看刚才提交上传的版本
交审核
- 为什么需要提交审核
- 为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾讯官方审核的
- 提交审核的方式
- 在开发版本的列表中，点击
提交审核按钮之后，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核 - 编辑
发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时在审核版本的列表中，点击 发布 按钮之后，即可把 审核通过 的版本发布为 线上版本，供所有小程序用户访问和使用
