目录
介绍
一、小程序与普通网页开发的区别
1、运行环境不同
网页运行在浏览器环境中
小程序运行在微信环境中
2、API 不同
由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。
但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位、扫码、支付
3、开发模式不同
网页的开发模式：浏览器 + 代码编辑器
小程序有自己的一套标准开发模式：
申请小程序开发账号
安装小程序开发者工具
创建和配置小程序项目
注册小程序
使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程.
根据注册提示进行大概分三个步骤：
1、填写账号信息
填写邮箱
设置密码
2、邮箱内激活
在填写的邮箱内，收到相关邮件，并点击激活账号
3、信息登记
注册国家/地区
主体类型：个人 国家 政府 媒体 其他组织
主体信息登记：如果是个人的话需要姓名、身份证号、电话、微信扫码进行管理员身份认证
4、获取小程序的 AppID
注册完成后 - 登录
在 开发 - 开发设置 获取APPID
开发工具安装
一、下载
在 开发 - 开发工具 - 开发者工具 获取下载链接下载
微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：
快速创建小程序项目
代码的查看和编辑
对小程序功能进行调试
小程序的预览和发布
二、创建项目
打开IDE,点击+号创建项目
按下图填写项目信息
三、设置建议
1、关闭代理
菜单栏 - 设置 - 代理设置 - 不使用任何代理
项目结构
一、项目目录介绍
utils 用来存放工具性质的模块（例如：格式化时间的自定义模块
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
二、页面部分介绍
小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：
.js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
.json 文件（当前页面的配置文件，配置窗口的外观、表现等）
.wxml 文件（页面的模板结构文件）
.wxss 文件（当前页面的样式表文件）
项目中的配置文件
一、app.json 文件
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。Demo 项目里边的 app.json 配置内容如下：
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
}
简单了解下这 4 个配置项的作用：
pages：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景色、文字颜色等
style：全局定义小程序组件所使用的样式版本
sitemapLocation：用来指明 sitemap.json 的位置
二、project.config.json 文件
project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：
setting 中保存了编译相关的配置
projectname 中保存的是项目名称
appid 中保存的是小程序的账号 ID
三、sitemap.json 文件
微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。
sitemap.json 文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。
当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
{
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}
注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
四、页面的 .json 配置文件
小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，
页面中的配置项会覆盖 app.json 的 window 中相同的配置项。例如：
小程序的宿主环境
一、宿主环境
宿主环境（host environment）指的是程序运行所必须的依赖环境。
例如：Android 系统和 iOS 系统是两个不同的宿主环境。
安卓版的微信 App 是不能在 iOS 环境下运行的，所以，Android 是安卓软件的宿主环境。
脱离了宿主环境的软件是没有任何意义的！
二、微信宿主环境
手机微信是小程序的宿主环境，如图所示：
小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：
微信扫码、微信支付、微信登录、地理定位、etc…
三、微信宿主环境提供的内容
通信模型、运行机制、组件、API
1、通信模型
1、渲染层和逻辑层之间的通信
由微信客户端进行转发
2、逻辑层和第三方服务器之间的通信
由微信客户端进行转发
2、运行机制
把小程序的代码包下载到本地
解析 app.json 全局配置文件
执行 app.js 小程序入口文件，调用 App() 创建小程序实例
渲染小程序首页
小程序启动完成
加载解析页面的 .json 配置文件
加载页面的 .wxml 模板和 .wxss 样式
执行页面的 .js 文件，调用 Page() 创建页面实例
页面渲染完成
3、组件
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：
| 组件分类 | 组件举例 |
|---|---|
| 视图容器 | view：相当于div scroll-view：可滚动的视图区域 swiper 和 swiper-item：轮播图容器组件 和 轮播图 item 组件 |
| 基础内容 | text：文本组件，类似于 HTML 中的 span 标签，是一个行内元素 rich-text：富文本组件，支持把 HTML 字符串渲染为 WXML 结构 button：功能比 HTML 中的 button 按钮丰富，通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等 image：image 组件默认宽度约 300px、高度约 240px |
| 表单组件 | |
| 导航组件 | navigator：页面导航组件，类似于 HTML 中的 a 链接 |
| 媒体组件 | |
| map地图组件 | |
| canvas画布组件 | |
| 开放能力 | |
| 无障碍访问 |
4、API
小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力
例如：获取用户信息、本地存储、支付功能等。
小程序官方把 API 分为了如下 3 大类：
| 类型 | 说明 |
|---|---|
| 事件监听 API | 特点：以 on 开头，用来监听某些事件的触发 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件 |
| 同步 API | 特点1：以 Sync 结尾的 API 都是同步 API 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常 举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容 |
| 异步 API | 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据 |
协同工作和发布
暂不整理
行者常至，为者常成！