小程序的宿主环境

---

1. 宿主环境简介

(1)什么是宿主环境

宿舍环境指的是程序运行所必须的依赖环境。例如：

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

(2)小程序的宿主环境

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

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

(3)小程序环境包含的内容

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

2. 通信模型

(1)通信的主题

小程序中通信的主体是渲染层和逻辑层，其中：

1. WXML模板和WXSS样式工作在渲染层
2. JS脚本工作在逻辑层

(2)小程序的通信模型

小程序中的通信模型分为两部分：

1. 渲染层和逻辑层之间的通信
   • 由微信客户端进行转发
2. 逻辑层和第三方服务器之间的通信
   • 由微信客户端进行转发

3. 运行机制

(1)小程序启动的过程

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

(2)页面渲染过程

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

4. 组件

(1)小程序中组件的分类

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

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

(2)常用的视图容器类组件

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

(3)view组件的基本使用

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

代码：

• list.wxml

  <!--pages/list/list.wxml-->
  <view class="container1">
      <view>A</view>
      <view>B</view>
      <view>C</view>
  </view>
  

• list.wxss

  /* 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: lightblue;
  }
  .container1 view:nth-child(3){
      background-color: lightpink;
  }
  .container1{
      display: flex;
      justify-content: space-around;
  }
  

(4)scroll-view组件的基本使用

实现如图所示的纵向滚动效果：

代码：

• list.wxml

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

• list.wxss

  /* 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: lightblue;
  }
  .container1 view:nth-child(3){
      background-color: lightpink;
  }
  /* 给scroll-view固定高度 */
  .container1{
      border: 1px solid red;
      width: 100px;
      height: 120px;
  }
  

(5)swiper和swiper-item组件的基本使用

实现如下图所示的轮播图效果：

代码：

• list.wxml

  <!-- 轮播图区域 -->
  <!-- indicator-dots 属性：显示面板指示点 -->
  <swiper class="swiper-container" indicator-dots>
      <!-- 第1项 -->
      <swiper-item>
          <view class="item">A</view>
      </swiper-item>
      <!-- 第2项 -->
      <swiper-item>
          <view class="item">B</view>
      </swiper-item>
      <!-- 第3项 -->
      <swiper-item>
          <view class="item">C</view>
      </swiper-item>
  </swiper>
  

• list.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: lightskyblue;
  }
  swiper-item:nth-child(3) .item{
      background-color: lightcoral;
  }
  

(6)swiper组件的常用属性

(7)常用的基础内容组件

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

(8)text组件的基本使用

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

代码：

• list.wxml

  <!-- 常用的基础内容组件text和rich-text的用法 -->
  <view>
      手机号支持长按选中效果
      <text selectable>13800005056</text>
  </view>
  

(9)rich-text组件的基本使用

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

代码：

• text.html

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

(10)其他常用组件

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

(11)button组件的基本使用

代码：

• list.wxml

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

注意：

我们可以通过app.json文件中的style标签对按钮样式进行修改，默认为v2样式。

(12)image组件的基本使用

代码：

• list.wxml

  <!-- image图片组件 -->
  <image></image>
  <image src="/images/Snipaste_2022-01-09_11-55-19.png"></image>
  

• list.wxss

  image{
      border: 1px solid red;
  }
  

image组件的mode属性：

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

5. API

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

(1)小程序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(options)函数，需要通过success、fail、complete接收调用的结果
   • 举例：wx.request()发起网络数据请求，通过success回调函数接收数据

---

参考视频：https://www.bilibili.com/video/BV1834y1676P?p=7