0
点赞
收藏
分享

微信扫一扫

【微信小程序】宿主环境 通信模型 运行机制 组件


目录

​​🍓小程序的宿主环境 - 宿主环境简介​​

​​1. 什么是宿主环境​​

​​2. 小程序的宿主环境​​

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

​​🍍小程序的宿主环境 - 通信模型​​

​​1. 通信的主体​​

​​2. 小程序的通信模型​​

​​🥦小程序的宿主环境 - 运行机制​​

​​🍒小程序的宿主环境 - 组件​​

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

​​2. 常用的视图容器类组件​​

​​3. view 组件的基本使用​​

🍓小程序的宿主环境 - 宿主环境简介

1. 什么是宿主环境



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


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




【微信小程序】宿主环境 通信模型 运行机制 组件_android


【微信小程序】宿主环境 通信模型 运行机制 组件_webview_02

2. 小程序的宿主环境




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



【微信小程序】宿主环境 通信模型 运行机制 组件_webview_03


【微信小程序】宿主环境 通信模型 运行机制 组件_小程序_04



小程序 借助宿主环境提供的能力 ,可以完成许多普通网页无法完成的功能,例如:


微信扫码、微信支付、微信登录、地理定位、etc…




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



① 通信模型



② 运行机制



③ 组件



④ API


🍍小程序的宿主环境 - 通信模型



1. 通信的主体



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



① WXML 模板和 WXSS 样式工作在渲染层



② JS 脚本工作在逻辑层





【微信小程序】宿主环境 通信模型 运行机制 组件_webview_05


2. 小程序的通信模型


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


① 渲染层 和 逻辑层 之间的通信 :由微信客户端进行转发


② 逻辑层 和 第三方服务器 之间的通信 :由微信客户端进行转发



【微信小程序】宿主环境 通信模型 运行机制 组件_android_06


🥦小程序的宿主环境 - 运行机制


1. 小程序启动的过程


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


② 解析 app.json 全局配置文件


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


④ 渲染小程序首页


⑤ 小程序启动完成


2. 页面渲染的过程


① 加载解析页面的 .json 配置文件


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


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


④ 页面渲染完成


🍒小程序的宿主环境 - 组件

1. 小程序中组件的分类


小程序中的组件也是由宿主环境提供的 ,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组


件分为了 9 大类,分别是:


① 视图容器


② 基础内容


③ 表单组件


④ 导航组件


⑤ 媒体组件


⑥ map 地图组件


⑦ canvas 画布组件


⑧ 开放能力


⑨ 无障碍访问


2. 常用的视图容器类组件


① view


普通视图区域


  类似于 HTML 中的 div,是一个块级元素


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


② scroll-view


可滚动的视图区域


常用来实现滚动列表效果


③ swiper 和 swiper-item


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


3. view 组件的基本使用

实现如图的 flex 横向布局效果:

【微信小程序】宿主环境 通信模型 运行机制 组件_android_07

 WXML:

<view class="container_1">
<view>T</view>
<view>S</view>
<view>J</view>
</view>

微信小程序的view和HTML的div效果一样

WXSS:

.container_1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container_1 view:nth-child(1){
background-color: red;
}
.container_1 view:nth-child(2){
background-color: yellowgreen;
}
.container_1 view:nth-child(3){
background-color: blue;
}
.container_1{
display: flex;
justify-content: space-around
}


举报

相关推荐

0 条评论