小程序学习第1天总结
文章目录
1 小程序的构成
pages——存放所有小程序的页面
utils——用来存放工具性质的模块
app.js——小程序项目的入口文件
app.json——小程序项目的全局配置文件
app.wxss——小程序项目的全局样式文件
project.config.json——项目的配置文件
stiemap.json——小程序及其页面是否允许被微信索引
每个页面由 4 个基本文件组成，它们分别是：
1 .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
2 .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
3 .wxml 文件（页面的模板结构文件）
4 .wxss 文件（当前页面的样式表文件）
小程序项目中有 4 种 json 配置文件，分别是：
1 项目根目录中的 app.json 配置文件
小程序的全局配置，包括了小程序的所有页面路径（pages）、窗口外观(window)、界面表现、底部 tab 等
2 项目根目录中的 project.config.json 配置文件
项目配置文件，用来记录我们对小程序开发工具所做的个性化配置
setting 中保存了编译相关的配置
projectname 中保存的是项目名称
appid 中保存的是小程序的账号 ID
3 项目根目录中的 sitemap.json 配置文件
配置小程序页面是否允许微信索引(sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提
示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false)
4 每个页面文件夹中的 .json 配置文件
对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项
2 小程序的通信模型
小程序中的通信模型分为两部分：
渲染层和逻辑层之间的通信：由微信客户端进行转发
逻辑层和第三方服务器之间的通信：由微信客户端进行转发
3 小程序中组件的分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为了 9 大类，分别是：
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map 地图组件
- canvas 画布组件
- 开放能力
- 无障碍访问
3.1 常用的视图容器类组件
- view
普通视图区域
类似于 HTML 中的 div，是一个块级元素
常用来实现页面的布局效果
- scroll-view
可滚动的视图区域
常用来实现滚动列表效果
需要添加属性：scroll-y允许纵向滚动
scroll-x允许纵向滚动
- swiper 和 swiper-item
轮播图容器组件 和 轮播图 item 组件
3.2 常用的基础内容组件
text
文本组件
类似于 HTML 中的 span 标签，是一个行内元素
通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：
rich-text
富文本组件
支持把 HTML 字符串渲染为 WXML 结构
通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结构：
3.3 其它常用组件
button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
type=“primary” / “warn” / 默认不写——按钮类型
size=“mini” ——小尺寸按钮
plain ——镂空按钮
image
图片组件
image 组件默认宽度约 300px、高度约 240px
image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：
navigator（后面课程会专门讲解）
页面导航组件
类似于 HTML 中的 a 链接
4 小程序的宿主环境——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 回调函数接收数据
**
备注：初学者学习总结！侵删！感谢！
**
