小程序的宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：

Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

小程序的宿主环境

手机微信是小程序的宿主环境，如图所示：

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码，微信支付，微信登录，地里定位，etc等。

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

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. 页面渲染完成

小程序中的组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构，官方把小程序的组件分为了9大类，分别是：

视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。

常用的视图容器类组件

view

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 常用来实现页面的布局效果

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

swiper 和 swiper-item

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

view组件的基本使用

scroll-view组件的基本使用

swiper和swiper-item基本用法

<!-- 轮播图的结构 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray">
  <!-- 第一个轮播图 -->
  <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>

/* 轮播图样式 */
.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: lightpink;
}

swiper组件的常用属性

常用的基础内容组件

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

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

<view class="textsj">
  手机号（长按选中）：
  <text selectable>18888888888</text>
</view>

rich-text：富文本组件，支持把HTML字符串渲染为WXML结构。

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

其它常用组件

button：

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

image：

• 图片组件
• image组件默认宽度约为300px、高度约为240px

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

navigator：

• 页面导航组件
• 类似于HTML中的a链接

小程序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回调函数接收数据