认识小程序

一、认识小程序

（一）小程序文件组成

1.pages用来存放所有小程序的页面；

2.utils用来存放工具性质的模块（例：格式化时间的自定义模块）；

3.app.js小程序项目的入口文件；

4.app.json小程序项目的全局配置文件；

5.app.wxss小程序项目的全局样式文件；

6.project.config.json项目的配置文件；——记录我们对小程序开发工具所做的个性化配置

 例如：setting中保存了编译相关的配置；

       projectname中保存的是项目名称；

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

7.sitemao.json用来配置小程序及其页面是否允许被微信索引

（二）每个页面的文件组成

每个页面由四个基本文件组成，分别是：

1. .js文件——页面的脚本文件，存放页面的数据、事件处理函数等；

2. .json文件——当前页面的配置文件，配置窗口的外观、表现等；

3. .wxml文件——页面的模板结构文件

4. .wxss文件——当前页面的样式文件

（三）小程序的四种json配置文件

1.项目根目录中的app.json配置文件；——app.json是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

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

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

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

 （四）文件中的配置项

1.pages——用来记录当前小程序所有页面的路径；

2.window——全局定义小程序所有页面的背景色、文字颜色等；

3.style——全局定义小程序所使用的样式版本；

4.sitemapLocation——用来指明sitemap.json的位置

（五）小程序中.js文件的分类

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

2.页面的.js文件——是页面的入口文件，通过调用Page()函数来创建并运行页面；

3.普通的.js文件——是普通的功能模块文件，用来封装公共的函数或属性供页面使用

二、小程序的语法

（一）WXML

1.什么是WXML？

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

2.WXML和HTML的区别？

①标签名称不同；

②属性节点不同；

③提供了类似Vue中的模板语法

（二）WXSS

1.什么是WXSS？

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

2.WXSS和CSS的区别？

①新增了rpx尺寸单位；

②提供了全局的样式和局部样式；

③WXSS仅支持部分CSS选择器

3.rpx尺寸单位的换算

 三、小程序的宿主环境

1.什么是宿主环境？

宿主环境指的是程序运行所必须的依赖环境，Android系统和ios系统是两个不同的宿主环境，脱离了宿主环境的软件是没有任何意义的！

手机微信就是小程序的宿主环境。

2.通信

小程序通信的主体

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

①WXML模板和WXSS样式工作在渲染层；

②JS脚本工作在逻辑层

小程序的通信模型

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

①渲染层和逻辑层之间的通信=>由微信客户端进行转发

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

 3.小程序启动的过程

①把小程序都得代码包下载到本地

②解析app.json全局配置文件

③执行app.js小程序入口文件，调用App()创建小程序实例

④渲染小程序首页

⑤小程序启动完成

四、小程序中的组件

1.组件的分类

小程序中的组件也是由宿主环境提供的，分为了九大类，分别是视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、 无障碍访问

2.常用的视图容器类组件

①view

普通视图区域；

类似于HTML中的div，是一个块级元素；

常用来实现页面的布局效果

②scroll-view

可滚动的视图区域；

常用来实现滚动列表效果 

③swiper和swiper-item

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

3.常用的基础内容组件

①text

文本组件；

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

②rich-text

富文本组件 ；

支持把HTML字符串渲染为WXML结构

4.其它常用组件

①button

按钮组件；

 功能比HTML中的button按钮丰富；

通过open-type属性可以调用微信提供放入各种功能（客服、转发、获取用户授权等）

②image

图片组件；

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

③navigator

页面导航组件；

类似于HTML中的a链接 

 五、小程序的API

分类：
1.事件监听API

特点:以 on 开头，用来监听某些事件的触发
举例:wx.onWindowResize(functioncallback)监听窗口尺寸变化的事件

2.同步API

特点1:以Sync结尾的API都是同步API
特点2:同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例:wx.setStorageSync(keyvalue)向本地存储中写入内容

 3.异步API

特点:类似于ouerv中的$aiax(options)函数，需要通过successfalcomplete接收调用的结果

举例:wxrequest()发起网络数据请求，通过success回调函数接收数据

六、数据绑定

小程序、Vue、React数据绑定的区别

1.小程序

①data中初始化数据；

②修改数据：this.setData()   修改数据的行为始终是同步的 

2.Vue

①data中初始化数据；

②修改数据：this.key = value;

③数据流：Vue是单项数据流=>Model---->View;Vue实现了双向数据绑定：v-model 

3.React

①state中初始化状态数据；

②修改数据：this.setState()  自身钩子函数中(componentDidMount)异步的；非自身的钩子函数中（定时器的回调）同步的

③数据流：单向=>Model--->View

 七、事件流的三个阶段

1.捕获：从外向内；

2.执行目标阶段；

3.冒泡：从内向外

八、前后端交互

1.语法：wx.request()

2.注意点

①协议必须是https协议；

②一个接口最多配置20个域名；

③并发限制上限是10个

④在我们的项目开发过程中设置不校验合法域名：开发工具=>右上角详情=>本地设置=>不校验