学习目标：

小程序的简介

1.小程序和普通网页开发的区别

创建第一个小程序

1.点击注册 使用浏览器 打开https://mp.weixin.qq.com/网站，点击右上角的 立即注册 即可进入小程序开发账号的注册流程

2.下载开发者工具

微信开发者工具是微信官方推荐使用的小程序开发工具，它提供的主要功能如下：

a.快速创建小程序项目

b.代码查看和编辑

c.对小程序功能进行调试

d.小程序的预览和发布

3.扫码登录开发者工具

4.设置开发者工具的外观和代理

5.点击新建项目

小程序的项目结构

小程序的基本组成结构

小程序页面的组成部分

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

index 就是一个页，logs就是另一个页，每个页都有4个基本文件组成

Json配置文件的作用

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

小程序项目中有4中json配置文件，分别是：

1).项目根目录中的 app.json 配置文件

2).项目根目录中的 project.config.json 配置文件

3).项目根目录中的 sitemap.json 配置文件

4).每个页面文件夹中的  .json 配置文件

app.json文件

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、底部tab、等。

Demo项目里边的app.json 配置内容如下：

app.json文件配置详情

project.config.json文件

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

setting中保存了编译相关的配置

projectname 中保存的是项目名称

appid中保存的是小程序的账号ID

sitemap.json文件

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

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

大白话就是你在这里面写规则，匹配到你配置好的条件，就展示你的小程序。

举个栗子

页面的.json配置文件

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

新建小程序页面

只需要在 app.josn   >  pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件 如图所示：

我们只需要在pages新建一个list 路径  ctrl+s保存 左侧就自动生成了一个list文件夹

修改项目首页

只需要调整 app.json > pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把牌在第一位的页面，当做项目首页进行渲染，如图：

原先默认是index放在第一位置，现在把list放到第一位置以后 保存，自动渲染了list为首页展示

什么是WXML？

WXML（WeiXin Markup Language）是小程序框架设计的一套 标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

WXML和HTML之间的区别？

什么是WXSS?

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。

WXSS和CSS的区别？

小程序中的.js文件

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

小程序中.js文件的分类

小程序的宿主环境

什么是宿主环境？

小程序的宿主环境

小程序基于微信，手机微信就是小程序的宿主程序

小程序宿主环境包含的内容

1.通信模型

2.运行机制

3.组件

4.API

小程序的宿主环境-通信模型

1.通信的主体

2.小程序的通信模型

3.小程序的运行机制

小程序的启动过程：

小程序的页面渲染的过程：

4.小程序的组件

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

视图容器 ，基础内容，表单组件，导航组件， 媒体组件，map地图组件，canvas画布组件，开放能力，无障碍访问

其中前四个是比较常见的组件

视图容器组件有：

view 组件的基本使用示例：

scroll-view组件的基本使用：

这里值得注意的是使用该组件要给一个固定高度或宽度，并设置 属性 scroll-y 或scroll-x

swiper和swiper-item组件的基本使用：

这里需要注意的点是 父容器swiper 如果需要显示指示点 需要添加 indicator-dots 属性

轮播图组件swiper 常用的一些属性：

按自己的需求设置属性

常见的基础内容组件：

text组件的基本使用：

rich-text组件的基本使用：

rich-text组件通过 nodes属性渲染html

其他常用组件：

button按钮的基本使用：

通过 type属性指定按钮类型 size属性设置按钮大小 plain属性 按钮的镂空

值得注意的是，这些组件的默认样式是宿主环境提供的，之前的app.json篇讲述了，在app.json中可配置全局样式，其中一个配置项 "style":"v2"配置项，是当前全部组件样式的版本，版本的不同，会影响到全局组件的样式。

image组件的基本使用：

image组建中的mode属性：

5.小程序API的概述

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便调用微信提供的能力，例如：获取用户信息，本地存储，支付功能等。

小程序API三大分类：

协议同工作和发布

小程序的权限管理

1.小程序成员管理（可扫码登录微信公众号后台来查看这些权限配置）：

2.不同项目成员对应的权限：

3.开发者的权限说明：

4.添加项目成员和体验成员：

小程序的版本

1.软件开发过程中的不同版本

2.小程序的版本

3.小程序的发布上线

一个小程序的发布上线，一般经过 上传代码-提交审核-发布 这三个步骤。

4.小程序上传代码

5.在后台查看上传之后的小程序版本

6.小程序提交审核

7.小程序的发布

总结