微信小程序开发 学习记录：（二）

一、宿主环境

1.宿主环境是指程序运行所必须的依赖环境

例如：安卓系统和苹果系统是两个不同的宿主环境。

2.小程序的宿主环境：

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

借助宿主环境提供的能力，完成网页无法完成的功能

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

1.通信模型：

（1）通信的主体：渲染层和逻辑层

①wxml和wxss工作在渲染层

②js脚本工作在逻辑层

（2）通信模型：

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

（js的数据渲染到页面）

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

（逻辑层的数据来自于第三方服务器）

2.运行机制：

（1）小程序的启动过程：代码包的下载、解析app.jason文件、执行js文件，调用app（）函数创建实例、渲染首页等

（2）页面的渲染过程：加载页面的.jason文件、wxml以及wxss样式、执行页面的.js文件，调用page（）函数创建实例等

3.组件：由宿主环境提供，用于搭建页面结构主要有9大类组件：

（1）视图容器类组件：

①view：普通视图区域，类似于html的div元素，常用来实现页面的布局效果

view组件的基本使用：

实现flex横向布局的效果：

1.wxml中的文本元素

2.wxss美化文本样式

子类文本设置长宽高以及横向居中以及纵向居中的效果

利用后代选择器以及nth-child(n) ：为文本设置背景颜色

为父元素加一个横向布局和分散对齐：

②scroll-view：可滚动的视图区域，常用来实现滚动列表的效果

实现纵向滚动效果：

<scroll-y> 属性：实现纵向滚动

<scroll-x> 属性：实现横向滚动

1.将view改成scroll-view同时注意在后面加一个属性scroll-y实现纵向滚动

2.改变强制性的高度以及边框的设置

③swiper和swiper-item：轮播图容器组件和轮播图item组件

实现轮播图效果：

1.wxss的实现：

2.对结构进行美化以及设置：

swiper组件的常用属性：

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

（2）基础内容

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

text组件的基本使用：通过text组件的selectable属性，实现长按选中文本内容的结果：

演示结果如下：

②rich-text：富文本组件，支持把html字符串渲染为wxml结构

通过rich-text组件的nodes属性节点，把html字符串渲染为对应的ui结构：

演示结果如下：

常用的基础内容组件

（3）表单组件

（4）导航组件

（5）媒体组件

（6）map地图组件

（7）canvas画布组件

（8）开放能力

（9）无障碍访问

其他常用的组件：

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

button按钮的基本使用：

演示效果如下：

通过size属性来设置小尺寸按钮：

演示效果如下：

通过plain设置镂空按钮：

演示效果如下：

②image：图片组件

1.图片组件的基本使用：

并在wxss中添加边框：

最后演示效果如下：

2.image组件的mode属性：进行图片的裁剪缩放模式常见的mode属性如下：

mode值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能够完全显示出来
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能够完全显示出来
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

③navifator：页面导航组件类似于html中的a链接

4.API：小程序中的API是由宿主环境提供的，通过这些丰富的小程序API可以调用微信提供的能力

例如：获取用户信息、本地存储、支付功能

API的分类：

①事件监听API：以on开头，用来监听某些事情的出发

②同步API：以Sync结尾，同步API的执行结果，可以通过函数返回值直接获取，如果执行错误会抛出异常

③异步API：需要通过success、fail、complete接收调用的结果

举例：wx.request（）发起网络数据请求，通过success回调函数接收数据