本文带给您微信小程序相关知识，主要介绍宿主环境，手机微信是小程序宿主环境，小程序借助宿主环境提供能力，可以实现许多普通网页无法完成功能，让我们看看，希望对您有所帮助。

【相关学习推荐:小程序学习教程】

手机微信是小程序的宿主环境。借助宿主环境提供的能力，小程序可以实现许多普通网页无法完成的功能。例如，小程序呼叫微信提供的API来扫描代码和支付。

宿主环境中包含的小程序：通信模型运行机制组件API

1.通信的主体

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

WXML 模板和 WXSS 风格工作在渲染层

JS 脚本在逻辑层工作

2.小程序的通信模型

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

渲染层与逻辑层之间的通信

逻辑层与第三方服务器之间的通信

两者都是通过微信客户端转发的

1.小程序的启动过程

将小程序的代码包下载到本地

解析 app.json 全局配置文件

执行 app.js 调用小程序入口文件 App() 创建小程序的例子

渲染小程序主页

完成小程序启动

2.页面渲染过程

加载分析页面 .json 配置文件

加载页面的 .wxml 模板和 .wxss 样式

执行页面的 .js 文件，调用 Page() 创建页面实例

完成页面渲染

1.小程序中组件的分类:

小程序中的组件也由宿主环境提供，开发人员可以根据组件快速构建美丽的页面结构。官员们将小程序的组件分为 9 大类，分别是:

• 视图容器

• 基础内容

• 表单组件

• 导航组件

• 体组件

• map 地图组件

• canvas 画布组件

• 开放能力

• 无障碍访问

2. 常用的视图容器组件

view

普通视图区域

类似于 HTML 中的 div，是块级元素

常用于实现页面的布局效果

例如：使用flex实现横向布局。

wxml代码：

<view class="container">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

wxss代码：

.container view{
  width:100px;
  height:100px;
  text-align: center;
  line-height: 100px;
}
.container view:nth-child(1){
  background-color: aquamarine;
}
.container view:nth-child(2){
  background-color: azure;
}
.container view:nth-child(3){
  background-color: darkorange;
}
.container {
  display: flex;
  justify-content: space-around;
}

实现效果：

scroll-view

• 可滚动视图区域

• 常用于实现滚动列表的效果

利用scroll-view实现上下滚动的效果

wxml代码：

<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

修改的wxss代码：

.container {
  border:1px solid red;
  height:110px;
  /*使用scroll-view时设置固定高度*/

实现效果：

swiper 和 swiper-item

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

使用这两个组件可以实现轮播图效果：

wxml代码：

<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" 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>

wxss代码：

.swiper-container{
  height:150px;
}
.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: aquamarine;
}
swiper-item:nth-child(2) .item{
  background-color: azure;
}
swiper-item:nth-child(3) .item{
  background-color: darkorange;
}

实现效果：

3.常用的基本内容组件

text

文本组件

类似于 HTML 中的 span 标签是一个行业元素

实现长按选中文本内容的效果

<view>
长按可选择中文内容：
<text user-select>HelloWorld!</text>
</view>

rich-text

支持富文本组件 HTML 字符串渲染为 WXML 结构

把 HTML 对应于字符串渲染 UI 结构

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

4.其它常用组件

button

按钮组件

功能比 HTML 中的 button 按钮丰富

通过 open-type 属性可调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等。)

image

图片组件

image 默认组件宽度约 300px、高度约 240px

navigator

页面导航组件

类似于 HTML 中的 a 链接，实现页面跳转

5.API

小程序中的 API 通过这些丰富的小程序，由宿主环境提供 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 回调函数接收数据

【相关学习推荐:小程序学习教程】

以上是微信小程序开发之宿主环境的详细说明。请关注其他相关文章！