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

简介: 🍓小程序的宿主环境 - 宿主环境简介1. 什么是宿主环境2. 小程序的宿主环境3. 小程序宿主环境包含的内容🍍小程序的宿主环境 - 通信模型1. 通信的主体2. 小程序的通信模型🥦小程序的宿主环境 - 运行机制🍒小程序的宿主环境 - 组件1. 小程序中组件的分类2. 常用的视图容器类组件3. view 组件的基本使用

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


1. 什么是宿主环境


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


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


2. 小程序的宿主环境


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


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

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


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


① 通信模型


② 运行机制


③ 组件


④ 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,是一个块级元素


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


② scroll-view


可滚动的视图区域


常用来实现滚动列表效果


③ swiper 和 swiper-item


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


3. view 组件的基本使用


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




WXML:

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

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
}
相关文章
|
15天前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
14 0
|
15天前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
17 0
|
15天前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
12 0
|
15天前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
11 0
|
15天前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
13 0
|
15天前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
16 0
|
2月前
|
小程序
微信小程序-其他常用组件
该内容是关于微信小程序组件的介绍,主要包括`button`、`image`和`navigator`。`button`组件比HTML的按钮功能更丰富,通过`open-type`可调用微信功能,如客服、转发等。组件属性包括类型(如`primary`、`warn`)和尺寸(`size`)。`image`组件默认宽300px,高240px,支持设置属性来调整显示效果。`navigator`组件用于页面导航,类似HTML的a标签,常用于页面间的跳转。
27 0
|
2月前
|
小程序
微信小程序-常用的基础内容组件
以下是内容的摘要: 本文介绍了微信小程序中几个重要的组件:text、rich-text和progress。text组件类似于HTML的span标签,用于显示文本,通过selectable属性可实现长按选中文本。rich-text组件能够将HTML字符串渲染成WXML结构,展示富文本内容。progress组件则用于展示进度条,支持不同状态(如成功、警告、等待等)以及自定义颜色和宽度。icon组件则提供了一组预定义的图标,可用于表示各种操作状态或提示信息。
24 0
|
2月前
|
小程序 前端开发 定位技术
微信小程序-常用的视图容器类组件
该内容是关于微信小程序组件的分类和部分具体组件的介绍。主要分为9大类:视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件、画布组件、开放能力和无障碍访问。其中详细讲解了`view`、`scroll-view`、`swiper`及`swiper-item`等组件的用途和示例。`view`用于构建页面布局,`scroll-view`支持滚动效果,`swiper`则用于创建轮播图。此外,还提到了`root-portal`、`page-container`等其他特殊用途的组件。
27 0
|
8天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
19 7