【微信小程序开发 - 4】：小程序的宿主环境介绍（含源码）

小程序的宿主环境介绍

宿主环境简介

宿主环境 (host environment) 指的是程序运行所必须的依赖环境。

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

小程序的宿主环境

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

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

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

通信模型

1. 通讯的主体
   小程序中通信的主体是渲染层和逻辑层，其中:
   • WXML模板和 WXSS 样式工作在渲染层
   • JS 脚本工作在逻辑层
     

运行机制

1. 小程序启动的过程
   • 把小程序的代码包下载到本地
   • 解析 app.json 全局配置文件
   • 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
   • 渲染小程序首页
   • 小程序启动完成
2. 页面渲染的过程
   • 加载解析页面的 .json 配置文件
   • 加载页面的.wxml模板和 .wxss 样式
   • 执行页面的 .js 文件，调用 Page()创建页面实例
   • 页面渲染完成

组件

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

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

常用的视图容器类组件

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

demo.wxml

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

demo.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: lightcoral;
}

.container1{