入职就让开发微信小程序，首先应该了解什么？api不同 APP的api是手机操作系统提供的由于运行环境的不同，所以小程序

小程序与普通网页有什么不同

api不同
- APP的api是手机操作系统提供的
- 由于运行环境的不同，所以小程序中,无法调用DOM 和 BOM的API
- 但是，在小程序中可以调用微信环境的API，例如
  - 微信扫码
  - 微信支付
  - 地理定位
开发模式不同
- APP开发模式需要调用 IOS和Android 的组件库
- 网页的开发模式：浏览器和代码编辑器
- 小程序拥有自己的一套标准开发模式
  - 申请小程序开发账号
  - 安装小程序开发者工具
  - 创建和配置并开发小程项目
  - 在开发者工具中对代码进行上线

1.小程序注册流程

参考网址：微信公众平台

点击注册按钮

使用浏览器打开微信公众平台网址，点击右上角的 "立即注册" 即可进入到小程序开发账号的注册流程

选择注册的帐号类型

填写账号信息
- 邮箱不能被个人微信绑定

邮箱激活

点击链接激活账号

选择主体类型

主体登记信息

注册完毕

2.获取小程序 AppID

相当于小程序在微信中的“身份证”，有了 AppID ，微信客户端才能确定小程序“身份”，并使用微信提供的高级接口

用来创建小程序项目
- 调用一些高级的接口后端好识别身份 (例如：登录，支付 )

3.微信开发者工具

下载并安装微信开发者工具
- 推荐下载和安装最新的稳定版 Stable Build 的微信开发者工具
- 微信开发者工具下载地址
- 安装方式：下一步 --> 下一步
为什么要使用微信开发者工具
- 方便创建项目模板
- 方便调试与开发
- 方便后期项目的上线
扫码登录到微信开发者工具
设置外观和代理
1. 为什么需要代理设置 ?
  - 因为部分同学可能电脑安装了网络加速器或者翻墙工具，导致网络不稳定
  - 为了防止加速器造成网络的不稳定，所以推荐代理设置为 不使用任何代理
演示新建小程序的步骤
- 点击 + 号，新建项目
- 填写项目信息

4. 小程序项目的构成

4.1 小程序目录的构成

pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js 小程序项目的入口文件 --- main.js
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是够允许被微信索引 -- SEO -- 搜索引擎优化

1-21 小程序的目录构成

4.2 小程序页面的组成部分

小程序官方建议把所有的 小程序页面，都存放在 pages 目录中，每个页面以单独的文件夹存在

其中，每个页面 由 4 个基本文件 组成，他们分别是：

注意这四个基本文件只在当前的页面有效
1. .js 文件 -- 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等
2. .json 文件 -- 当前页面的配置文件，配置页面的外观、表现等
3. .wxml 文件 -- 页面的模板结构文件
4. .wxss 文件 -- 当前页面的样式表文件

4.3 认识小程序中的四种配置文件

JSON是一种数据格式，在实际开发过程中，JSON总是以配置文件的形式出现。小程序项目也不例外，通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。小程序项目中有 4 中 json 文件，分别是：

项目根目录中的 app.json 配置文件
项目根目录中的 project.config.json 配置文件
项目根目录中的 sitemap.json 配置文件
每个页面文件夹中的 .json 配置文件

4.3.1 app.json文件

app.json是当前小程序的全局配置，包括了小程序的所有页面路径，窗口外观，界面样式，底部tab等， Demo 项目里面的 app.json 配置内容如下：

全局配置文件就是指配置好以后，能够影响到每一个页面
所有页面路径

简单了解下这四个配置项的作用：

pages用来记录当前小程序所有页面的路径
window 全局定义小程序所有页面的背景，文件颜色
style 全局定义小程序组件所使用的样式版本
- 微信小程序是运行到微信内部的
- 样式风格和微信是一致的
- 微信主要样式风格会发生改变，小程序也会随之发生改变
- 这时候就产生了样式版本的概念
sitemapLocation：用来指明 sitemap.json 的位置
- sitemap.json的作用是配置页面能否被检索

4.3.2 project.config.json 文件

project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：

setting 中保存了编译相关的配置
projectname 中保存的是项目名称
appid 中保存的是小程序的账号 ID

注意 checkSiteMap 为 false 是关闭检索提示

4.3.3 sitemap.json 文件

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO （搜索引擎优化），sitemap.json 用来配置小程序页面是否允许微信搜索。

当开发者允许微信搜索时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

1-25 sitemap.json 文件

注意： sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false

4.3.4页面的 .json 配置文件

小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 中的 window 中的配置项

1-26 页面的 .json 配置文件

4.4 新建小程序页面

在 pages 文件中右键 新建文件夹 -- home，在 home 文件夹右键 新建 home -- 输入 hoome
- 官方推荐文件夹名称和页面的名称一致，方便后期的维护
- 新建页面组件的时候，不需要输入后缀名
在 app.json --> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件
对 pages 目录下页面的删除或者新增都需要在 app.json 文件的 pages 数组中进行新增或删除

1-27 新建页面

4.5 设置首页的两个方式

调整 app.json --> pages 数组中页面路径的前后顺序，即可修改项目的首页，小程序会把排在第一位的页面，当作项目首页进行渲染

1-28 设置首页的第一个方式

在 app.json 中 pages 同级，配置一个新的节点 entryPagePath 节点，传入需要设置为首页的路径即可
- 最终小程序项目的首页，以 entryPagePath 节点设置的为准

1-29 设置首页的第一个方式

4.6 小程序开发与网页开发有什么区别

4.6.1 WXML 的概念以及和 HTML 之间的区别

什么是 WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言（组件），用来构建小程序页面的结构，其作用类似于网页开发中的 HTML
WXML 和 HTML 的区别
- 标签名称不同
  - HTML --- div、p、span、img
  - WXML --- view、text、image、navigator
属性节点不同
- <a href="#">超链接</a>
- <navigator url="/pages/home/home"></navigator>
提供了类似于 Vue 中的模板语法
- 数据绑定 -- 插值表达式
- 列表渲染 -- wx:for -- v-for
- 条件渲染 -- wx:if -- v-if

4.6.2 wXSS 的概念以及和 CSS 之间的区别

什么是 WXSS
- WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
- 类似于网页开发中的 CSS
WXSS 和 CSS 之间的区别
- 新增了 rpx 自适应尺寸单位
  - CSS 中需要手动进行像素单位换算，例如 rem
  - WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
- 项目根目录中的 app.wxss 会作用于所有小程序页面
- 局部页面的 .wxss 样式仅对当前页面生效
WXSS 仅支持部分 CSS 选择器
- 重点使用 class 选择器 建议使用 .class 类选择器
- .class 和 #id
- element
- 并集选择器和后代选择器
- ::after 和 ::before 等伪类选择器

4.6.3 小程序中 JS 文件的三大分类

一个项目仅仅提供页面的展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作，例如：响应用户的点击、获取用户的位置等等

小程序中的 JS 文件分类三大类，分别是：

app.js

是整个小程序项目的入口文件，通过调用 App() 函数 来启动整个小程序

App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

页面的 .js 文件
- 是页面的入口文件，通过调用 Page() 函数来创建小程序页面，并运行小程序页面
普通的 .js 文件
- 是普通的功能模块文件，用来封装公共的函数或属性供页面使用

5 宿主环境

5.1 了解宿主环境的概念

宿主环境指的是 程序运行所必须的依赖环境，例如：

Android 系统和 IOS 系统是两个不同的宿主环境
安卓版的微信 App 是不能在 IOS 环境下运行的。所以 Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的

5.2 小程序的宿主环境

小程序的宿主环境

微信是小程序的宿主环境，如图所示：

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位等等

小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件 -- “标签”
- API -- “方法”

5.3 小程序的通信主体

小程序中通信的主体是 渲染层 和 逻辑层，其中：

WXML 模板和 WXSS 样式工作在渲染层
JS 脚本工作在逻辑层

5.4 小程序的通信模型

小程序中的通信模型分为两个部分

渲染层 和 逻辑层 之间的通信
- 由微信客户端进行转发
逻辑层 和 第三方服务器 之间的通信
- 由微信客户端进行转发

5.5 运行机制

小程序启动的过程
- 把小程序的代码包下载到本地
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染的过程
- 加载解析页面的 .json 配置文件
- 加载页面的 .wxml 模板和 .wxss 样式
- 执行页面的 .js 文件，调用 Page() 创建页面实例
- 页面渲染完成

6.小程序的组件

6.1 了解常用的组件

注意：在微信开放社区中可搜索小程序开发中的常见问题

类型是string值时文档提供了可选值

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构，官方把小程序的组件分为了 9 大类，分别是：

① 视图容器    ② 基础内容   ③ 表单组件   ④ 导航组件   ⑤ 媒体组件

⑥ map 地图组件  ⑦  canvas 画布组件   ⑧ 开发能力  ⑨ 无障碍访问

6.2 视图容器类组件(部分)

view 组件
- 普通视图区域
- 类似于 HTML 中的 div ，是一个块级元素
- 常用来实现页面的布局效果
scroll-view 组件
- 可滚动的视图区域
- 常用来实现滚动列表效果
- 添加 scroll-y 属性：允许纵向滚动
- 其他可属性可参考文档
swiper 和 swiper-item 组件
- 轮播图容器组件和轮播图 item 组件

6.3 基础容器类组件(部分)

text 组件
- 文本组件
- 类似于 HTML 中的 span 标签，是一个行内元素
rich-text 组件（v-html）
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
- 富文本编辑器，生成 HTML字符串然后保存到数据中，如果 HTML 字符串需要渲染到小程序中
- 小程序不支持 HTML，就使用 rich-text 将 HTML 字符串进行解析和渲染
```


<rich-text nodes="<h4 style='color: red'>rich-text组件</h4>"></rich-text>  
```

6.4 其他组件(部分)

button
- 按钮组件
- 功能比 HTML 中的 button 按钮丰富
- 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image 组件的 mode 属性
- image 组件的 mode 属性用来指定图片的裁剪和缩放模式。

常用的视图容器类组件
- view 组件
  - 普通视图区域
  - 类似于 HTML 中的 div ，是一个块级元素
  - 常用来实现页面的布局效果
- scroll-view 组件
  - 可滚动的视图区域
  - 常用来实现滚动列表效果
- swiper 和 swiper-item 组件
  - 轮播图容器组件和轮播图 item 组件

7.小程序API的3大分类

小程序中的 API 是宿主环境提供的，通过这些丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。小程序官方把 API 分为如下 3 大类：

事件监听 API
- 特点：以 on 开头的 API 用来监听某个事件是否触发
- 举例：wx.onWindowResize(function callback)
wx 为小程序的顶级对象，如同window
同步 API
- 特点1：以 Sync 结尾的 API 都是同步 API
- 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
- 举例：wx.setStorageSync('key', value) 向本地存储中写入内容
异步 API
- 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用结果
- 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据
- 小程序中，大多数的 API 都是异步 API

一般一个异步的API就会有一个对应的同步API

小程序中大多数都是异步API

8.总结

小程序与普通网页开发的区别？
- 环境不一样,网页-->浏览器中，小程序 -->微信内部
- API不同，网页-->DOM,BOM，小程序-->宿主环境微信提供组件,API(方法)
- 微信开发环境不，网页-->编辑器，浏览器，小程序-->账号 AppID, 微信开发者工具，组件, API开发。
什么是 AppID,以及 AppID的作用？
- AppID 类似与身份证，用来标识小程序的唯一性。
- 微信会根据AppID，对小程序进行识别，识别以后给小程序提供高级API
- AppID是项目的创建和发布阶段必须的一个标识
app.json 文件的作用
- 项目的全局配置文件，在里面配置的东西能影响到每个页面、
- window、pages、style
page.json 文件的作用
- 对小程序当前页面进行配置，如果page.json和app.json 配置字段同名，page.json会覆盖app.json 中的同名字段。
- 只能对 window 这一项进行配置
设置小程序首页的两个方式
- pages 数组的第一项
- entryPagePath
小程序的宿主环境是什么
- 微信
  - 组件 Api

常用组件

-   view ------div
-   scroll-view
-   swiper、swiper-item
-   text ------span
-   rich-text-------渲染html字符串
-   image ------ img 有默认宽高 320 240
-   button

入职就让开发微信小程序，首先应该了解什么？