小程序宿主环境
小程序宿主环境-宿主环境介绍
什么是宿主环境?
- 宿主环境指的是程序运行所必需的依赖环境。例如:
Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能再IOS环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
小程序的宿主环境
手机微信就是小程序的宿主环境
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登录、地理定位、etc...
小程序宿主环境包含哪些内容?(微信为小程序提供了哪些支持?)
-
通信模型
小程序中的主体是渲染层和逻辑层(都是通过微信客户端进行转发的),其中:
1.WXML模板和WXSS样式工作在渲染层
2.JS脚本工作在逻辑层
总结:小程序中的通信模型分为两部分
1.渲染层和逻辑层之间的通信(由微信客户端进行转发)
2.逻辑层和第三方服务器之间的通信(由微信客户端进行转发)
-
运行机制
分为两部分:-
小程序启动的过程
1.把小程序的代码包下载到本地
2.解析app.json全局配置文件(目的是将全局性配置加载)
3.执行app.js小程序入口文件,第哦啊用App()创建小程序实例
4.渲染小程序的首页
5.小程序启动完成 -
小程序页面渲染的过程
1.加载并解析页面的.json配置文件
2.加载页面的.wxml模板和.wxss样式
3.执行页面的.js文件,调用Page()创建页面实例
4.页面渲染完成
-
-
组件
小程序中的组件也是有宿主环境提供的,开发者可以基于组件快速搭建出偏凉的页面,官方把小程序组件分九大类:
1.视图容器;2.基础内容;3.表单组件;4.导航组件;5.媒体组件;6.map地图组件;7.canvas画布组件;8.开放能力;9.无障碍访问- 常用视图容器类组件:
1.view
普通的视图区域
类似于HTML中的div,是一个块级元素
常用来实现页面的布局效果
2.scroll-view
可滚动的视图区域
常用来实现滚动列表效果(页面动,这个列表可以滚动)
3.swiper和swiper-item
swiper轮播图容器组件、swiper-item7轮播图item组件(就是页面中某一个区域,图片自己或手划滚动的效果)
- 常用视图容器类组件:
-
API
组件的基本使用
view组件的基本使用(CSS中的div)
比如,需要在页面上实现如图的flex横向布局效果(wxml中写结构,wxss中写样式)
ui结构(wxml中),外面一个大容器view,里面又包含了三个viewA、B、C,而后再书写样式,进而实现渲染效果(wxss中)
scroll-view组件的基本使用
实现纵向滚动效果。在一个容器中,通过鼠标的划动或者手指的划动,可以让内部的内容滚动展示
- 1.将最外层包裹性质的容器由view组件修改为scroll-view组件
- 2.添加属性scroll-y(意为:允许纵向滚动;同理,横向滚动是scroll-x)
- 3.为scroll-view添加固定高度
swiper和swiper-item组件的使用
通过这两个组件的配合实现轮播图的效果。结构是,在包裹性容器swiper中放入与图片相同数量的swiper-item容器;而后每个swiper-item中放入view组件
- 1.创建swiper和swiper-item组件,给外部swiper设置轮播图高度
- 2.内部view组件高度与父类一致,用100%填充即可
- 3.再为每个view组件单独设置背景颜色
swiper组建的常用属性
实现
常用的基础内容组件
text
- 文本组件
- 类似于HTML中的span标签,是一个行内元素
text组件的基本使用:
通过text组建的selectable属性(属性添加在标签当中),实现长按选中文本内容的效果(只有text组件支持selectable属性,放到view中是无效果的)
rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
rich-text组件的基本使用:
通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构
应用场景:比如商品详情页,服务器返回的是一串HTML的标签,我们希望这样的标签能够渲染到我们的移动端
其它常用组件(组件版本,在app.json中可以设置;"style":"V2"是组件最新版本)
button
- 按钮组件
- 功能比HTML中的按钮丰富
- 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户权限、获取用户信息等等)
button组件的基本使用:
- 通过type属性指定按钮类型:1.默认;2.default字体主色调;3.primary主色调;4.warn警告
- size="mini"小尺寸按钮:就是将原有的尺寸变小
- plain镂空按钮
image
- 图片组件
- image组件默认宽度约300px、高度约240px
image组建的基本使用:
- 在不添加图片的情况下,图片组件也是有默认宽高的;当我们为它加上一个边框,就能看见组件所占据的区域
- image组件中的mode属性用来指定图片的裁剪与缩放模式,常用的mode属性值如下:
1.scaleToFill:(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素(宽度约300px、高度约240px)
2.aspectFit:缩放模式,保持纵横比缩放图片,使图片能完全显示出来。也就是说,可以完整的将图片展示出来
3.aspectFill:缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向会发生截取(一直按照比例放大,直到能把这个区域填满为止)
4.widthFix:缩放模式,宽度不变,高度自动变化(这里的高度,指的是image标签的高度,不是图片高度),保持原图宽高比不变
5.height:缩放模式,高度不变,宽度自动变化(这里的宽度,指的是image标签的宽度,不是图片宽度),保持原图宽高比不变
navigator
- 页面导航组件
- 类似于HTML中的a链接
小程序中的API
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的功能,例如:获取用户信息、本地存储、支付功能等等
API分为三大类:
-
1.事件监听API
- 特点:以on开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
- 特点:以on开头,用来监听某些事件的触发
-
2.同步API
- 特点1:以Sync结尾的API都是同步API
- 特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync('Key','value')向本地存储中写入内容
-
3.异步API
- 特点:类似于jOuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
举例:wx.request()发起网络数据请求,通过success回调函数接收数据
- 特点:类似于jOuery中的$.ajax(options)函数,需要通过success、fail、complete接收调用的结果
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异