宿主环境介绍

• 什么是宿主环境
  程序运行所必须依赖的环境，手机微信是小程序的宿主环境。
• 小程序宿主环境包含的内容
  （1）通信模型

（2）运行机制
（3）组件
（4）API

通信模型

• 描述
  小程序通信主体是渲染层和逻辑层，其中：WXML模板和WXSS样式是渲染层，JS脚本工作在逻辑层。
• 通信流程
  （1）渲染层和逻辑层之间通信由微信客户端进行转发

（2）逻辑层和第三方服务器之间通信由微信客户端进行转发

宿主环境运行机制

• 小程序启动过程
  （1）把小程序的代码包下载到本地

（2）解析app.json全局配置文件
（3）执行app.js小程序入口文件，调用App()创建小程序实例
（4）渲染小程序首页
（5）小程序启动完成

• 页面渲染过程
  （1）加载解析页面的.json配置文件

（2）加载页面的.wxml模板和.wxss样式
（3）执行页面的.js文件，调用Page()创建页面实例
（4）页面渲染完成

宿主环境中的组件

• 组件的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横向布局效果

//wxml
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
//wxss
.container1{
  display: flex;
  justify-content: space-around;
}
.container1 view{
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.container1 :nth-child(1){
  background-color: lightgreen;
}
.container1 :nth-child(2){
  background-color: lightskyblue;
}
.container1 :nth-child(3){
  background-color: red;
}

scroll-view 组件的基本使用

• 实现纵向滚动效果

//wxml
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>
//wxss
.container1{
  /* display: flex;
  justify-content: space-around; */
  border: 1px solid red;
  width: 100px;
  height: 120px;
}
.container1 view{
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.container1 :nth-child(1){
  background-color: lightgreen;
}
.container1 :nth-child(2){
  background-color: lightskyblue;
}
.container1 :nth-child(3){
  background-color: red;
}

swiper和swiper-item组件的使用

• 实现轮播图效果

//wxml
<swiper class="swiper-container" indicator-dots autoplay indicator-color="white">
  <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>
//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: lightblue;
}
swiper-item:nth-child(3) .item{
  background-color: red;
}

• swiper组件常用属性

常用的基础内容组件

• 概述
  （1）text：文本组件类似于HTML中的span标签，是一个行内元素

（2）rich-text：富文本组件支持HTML字符串渲染WXML结构

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

<view>
<text selectable>123456</text>
</view>

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

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

• button组件的使用

//通过type指定按钮类型
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
//size指定尺寸
<button size="mini">默认按钮</button>
//plain镂空按钮
<button plain>默认按钮</button>

• image组件的使用

<image src="/images/test.png"></image>

image组件的mode属性
mode属性用来指定图片的裁剪和缩放模式。

宿主环境API

小程序中API有三大类

• 事件监听API
  特点：以on开头，用来监听某些事件的触发，例如：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
• 同步API
  特点：以Sync结尾的API都是同步API，同步API的执行结果可以通过函数返回值直接获取如果执行出错会抛出异常，例如：

wx.setStorageSync('key','value')向本地存储中写入内容

• 异步API
  特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complate接收调用的结果，例如：wx.request()发起网络数据请求，通过success回调函数接收数据