004小程序的宿主环境

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

程序的宿主环境

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

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

（1）通信模型
（2）运行机制
（3）组件
（4）API

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

通信的主题

小程序中通信的主题是渲染层和逻辑层，其中：
（1）WXML模板和WXSS样式工作在渲染层
（2）JS脚本工作在逻辑层

小程序的通信模型

小程序中的通信模型分为两部分：
（1）渲染层和逻辑层间的通信
		由微信客户端进行转发
（2）逻辑层和第三方服务器之间的通信
		由微信客户端进行转发

小程序的宿主环境—运行机制

小程序启动的过程

（1）把小程序的代码包下载到本地
（2）解析app.json全局配置文件
（3）执行app.js小程序入口文件，调用App（）创建小程序实例
（4）渲染小程序首页
（5）小程序启动完成

页面渲染过程

（1）加载解析页面的.json配置文件
（2）加载页面的.WXML模板和.WXSS样式
（3）执行页面的.js文件，调用Page()创建页面实例
（4）页面渲染完成

组件—view和scroll-view组件的基本用法

小程序的宿主环境—组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。
官方把小程序的组件分为了9大类，分别是：
前四个常用：
（1）视图容器
（2）基础内容
（3）表单组件
（4）导航组件
（5）媒体组件
（6）map地图组件
（7）canvas画布组件
（8）开放能力
（9）无障碍访问

常用的视图容器类组件

1.view
	普通视图区域
	类似于HTML中的div,是一个块级元素
	常用来实现页面的布局效果
2.scroll—view
	可滚动的视图区域
	常用来实现页面的布局效果
3. swiper和swiper-item
	轮播图容器组件和轮播图item组件

view 组件的基本使用

实现如图的flex横向布局效果：

<!--pages/list/list.wxml-->
<!-- 
  scroll-y属性：允许纵向滚动
  scroll-x属性：允许横向滚动
  注意：使用竖向滚动时，必须给scroll-wiew一个固定高度
 -->
<!-- <view class="container1">
    <view>A</view>
    <view>C</view>
    <view>B</view>
</view> -->
<scroll-view class="container2" scroll-y>
    <view>A</view>
    <view>C</view>
    <view>B</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  /* 横向剧中 */
  text-align: center;
  /* 纵向居中 设置个行高 */
  line-height: 100px;
}

.container1 view:nth-child(1){
    background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  /* flex布局 */
  display: flex;
  /* 横向分散布局 */
  justify-content: space-around;
}


/* pages/list/list.wxss */
.container2 view{
  width: 100px;
  height: 100px;
  /* 横向剧中 */
  text-align: center;
  /* 纵向居中 设置个行高 */
  line-height: 100px;
}

.container2 view:nth-child(1){
    background-color: lightgreen;
}
.container2 view:nth-child(2){
  background-color: lightskyblue;
}
.container2 view:nth-child(3){
  background-color: lightpink;
}
.container2{
border: 1px solid red;
width: 100px;
height: 120px;
}

组件- swiper和swiper-item的基本用法

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

实现如图的轮播图效果：

<!--pages/rotation/rotation.wxml-->
<!-- 轮播图 -->
<!-- indicator-dots轮播图小圆点 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay interval="300" circular>
  <!-- 第一个轮播图 -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!-- 第二个轮播图 -->
  <swiper-item>
    <view class="item">B</view>

  </swiper-item>
  <!-- 第三个轮播图 -->
  <swiper-item>
    <view class="item">C</view>

  </swiper-item>
</swiper>

/* pages/rotation/rotation.wxss */
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightpink;
}
swiper-item:nth-child(3) .item{
  background-color: lightblue;
}

swiper组件的常用属性

常用的基础内容组件

1.text
	文本组件
	类似于html中的span标签，是一个行内元素
2.rich-text
	富文本组件
	支持把HTML字符串渲染为WXML结构

text组件的基本使用

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

<view>
  手机号支持长按选中效果
  <text selectable>19654966547</text>
</view>

rich-text组件的基本使用

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

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

其他常用组件

（1）buttom
	按钮组件
	功能比HTML中的button按钮丰富
	通过open-type属性可以调用微信提供的各种功能
	（客服、转发、获取用户授权、获取用户信息等）
（2）image
	图片组件
	image组件默认宽度约300px、高度240px
（3）navigator(后面课程会专门讲解)
	页面导航组件
	类似于HTML中的a链接

button按钮的基本使用

<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

image组件的基本使用

wxml
<image></image>
<image src="/images/af400c0f413b195807a99984883ad14.jpg"></image>

wxss
image{
  border: 1px solid red;
}

image组件的mode属性

image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

<image></image>
<image src="/images/af400c0f413b195807a99984883ad14.jpg" mode="aspectFill"></image>

小程序宿主环境-API

小程序API概述

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

小程序API的3大分类

小程序官方把API分为了如下3大类：
（1）事件监听API
	特点：以on开头，用来监听某些事件的触发
	举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
（2）同步API
	特点1：以Sync结尾的API都是同步API
	特点2：同步API的执行结果，
			可以通过函数返回值直接获取，
			如果执行出错会抛出异常
	举例：wx.setStorageSync(‘key’, ‘value’)向本地存储中写入内容
（3）异步API
	特点：类似于jQuery中的$.ajax(option)函数，
		需要通过success、fail、complete接收调用的结果
	举例：wx.request()发起网络数据请求，
		通过success回调函数接收数据