1.浏览器点开网址：https://mp.weixin.qq.com/ 2. 小程序官网右上角点击注册。 3.选择账号类型小程序 4.填写相关信息邮箱激活 5.点击激活激活账号 6.选择主体类型为个人 7、主体信息登记 8、获取小程序的APPID（在学习阶段可以使用测试号） {注册流程我就不放截图了比较简单}

微信开发者工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下： ① 快速创建小程序项目 ② 代码的查看和编辑 ③ 对小程序功能进行调试 ④ 小程序的预览和发布 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 这个是下载地址，下载流程和安装流程都比较简单我就不写了

登录建立项目

1、扫码登录， 2、手机登录 3、这是登录后的页面

4、创建项目需要更改的是项目名称，目录，语言。

三、小程序代码的构成

项目结构

1、

具体含义：

① pages 用来存放所有小程序的页面 ② utils 用来存放工具性质的模块（例如：格式化时间的自定义模块） ③ app.js 小程序项目的入口文件 ④ app.json 小程序项目的全局配置文件 ⑤ app.wxss 小程序项目的全局样式文件 ⑥ project.config.json 项目的配置文件 ⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引/

2、pages里面的一个文件夹就是一个页面，正常我们写一个小程序的页面就单独放一个文件夹

其中，每个页面由 4 个基本文件组成，它们分别是： ① .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等） ② .json 文件（当前页面的配置文件，配置窗口的外观、表现等） ③ .wxml 文件（页面的模板结构文件） ④ .wxss 文件（当前页面的样式表文件）

json配置文件的作用

json是一种数据格式，在实际开发中json时配置文件的形式出现小程序项目中有 4 种 json 配置文件，分别是： ① 项目根目录中的 app.json 配置文件 ② 项目根目录中的 project.config.json 配置文件 ③ 项目根目录中的 sitemap.json 配置文件 ④ 每个页面文件夹中的 .json 配置文件注：由于本文要讲的内容太多，每个json的配置文件我在后期单独写一篇文章来解释，再次就不过多复述了

wxml模板

定义：

wxml是小程序的一套标签语言，用来构建小程序页面结构的，相当于网页开发中的html

区别：

① 标签名称不同 HTML （div, span, img, a） WXML（view, text, image, navigator）

② 属性节点不同

wxss样式、

定义：同理，wxss是一套样式语言，用于描述wxml的组件样式，类似于网页开发中的css

区别：

① 新增了 rpx 尺寸单位 CSS 中需要手动进行像素单位换算，例如 rem WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算 ② 区分全局的样式和局部样式项目根目录中的 app.wxss 会作用于所有小程序页面局部页面的 .wxss 样式仅对当前页面生效 ③ WXSS 仅支持部分 CSS 选择器 .class 和 #id 类选择器和id选择器 element 并集选择器、后代选择器 ::after 和 ::before 等伪类选择器

小程序的js

我在看小程序的js的时候把它分为三类：

① app.js 是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序 ② 页面的 .js 文件是页面的入口文件，通过调用 Page() 函数来创建并运行页面 ③ 普通的 .js 文件是普通的功能模块文件，用来封装公共的函数或属性供页面使用。和之前学的js作用一样。

## 四、小程序运行环境知识点：

通信模型运行机制组件 API定义运行环境又叫宿主环境之前我们学的js运行环境就是浏览器，所以可以使用DOM，和BOM进行操作，按照这种理解，小程序的运行环境就是微信。那么小程序也就不能再使用原来的DOM和BOM操作元素了，取而代之的是微信提供的各种接口。同时也出现了一些浏览器没有的API 如微信扫码，微信支付微信登录，地理定位等微信有ios和安卓两种环境也是不一样的。

这里重点讲手机微信的环境，浏览器环境不懂的同学自行去回去补知识点

小程序的通信模型

通信主体：

小程序中通信的主体是渲染层和逻辑层，其中： ① WXML 模板和 WXSS 样式工作在渲染层 ② JS 脚本工作在逻辑层

通信模型：

小程序中的通信模型分为两部分： ① 渲染层和逻辑层之间的通信 |由微信客户端进行转发 ② 逻辑层和第三方服务器之间的通信 |由微信客户端进行转发微信客户端在拿到数据请求后在和第三方服务器进行数据交互和响应，相当于起到一个中介的作用

小程序启动的过程：

① 把小程序的代码包下载到本地 ② 解析 app.json 全局配置文件 ③ 执行 app.js 小程序入口文件，调用 App() 创建小程序实例 ④ 渲染小程序首页 ⑤ 小程序启动完成

页面渲染过程

① 加载解析页面的 .json 配置文件 ② 加载页面的 .wxml 模板和 .wxss 样式 ③ 执行页面的 .js 文件，调用 Page() 创建页面实例 ④ 页面渲染完成总结：json 》 wxml 》 wxss 》 js

五、小程序组件

组件的分类

小程序中的组件由微信官方提供主要分为九类 ① 视图容器 ② 基础内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ map 地图组件 ⑦ canvas 画布组件 ⑧ 开放能力 ⑨ 无障碍访问

常用视图容器组件

1、view

普通视图区域类似于 HTML 中的 div，是一个块级元素 常用来实现页面的布局效果

2、scroll-view

可滚动的视图区域常用来实现滚动列表效果

3、swiper和swiper-item

轮播图容器组件和轮播图 item 组件

4、swiper 组件的常用属性

属性：类型；默认值；说明 indicator-dots ： boolean ； false ；是否显示面板指示点 indicator-color: color; rgba(0, 0, 0, .3) ;指示点颜色 indicator-active-color: color #000000 ;当前选中的指示点颜色 autoplay :boolean ;false ;是否自动切换 interval :number; 5000; 自动切换时间间隔 circular :boolean ;false ;是否采用衔接滑动

常用基础内容组件

text：

文本组件类似于 HTML 中的 span 标签，是一个行内元素

rich-text：

富文本组件支持把 HTML 字符串渲染为 WXML 结构

其他常用组件

button：

按钮组件功能比 HTML 中的 button 按钮丰富通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

image：

图片组件 image 组件默认宽度约 300px、高度约 240px

navigator: 1

页面导航组件类似于 HTML 中的 a 链接

image 组件的 mode 属性:

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下： mode: 值 ; 说明 scaleToFill （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变