Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序的宿主环境

小程序的宿主环境

作者头像
岳泽以
发布于 2023-03-16 01:17:33
发布于 2023-03-16 01:17:33
94700
代码可运行
举报
文章被收录于专栏:岳泽以博客岳泽以博客
运行总次数:0
代码可运行

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

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

小程序的宿主环境

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

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

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

  1. 通信模型
  2. 运行机制
  3. 组件
  4. API

通信主体

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

  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. 页面渲染完成

小程序中的组件

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

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

常用的视图容器类组件

view

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

scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图item组件
view组件的基本使用
scroll-view组件的基本使用
swiper和swiper-item基本用法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 轮播图的结构 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray">
  <!-- 第一个轮播图 -->
  <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>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* 轮播图样式 */
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
 background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
 background-color: lightblue;
}
swiper-item:nth-child(3) .item{
 background-color: lightpink;
}

swiper组件的常用属性

常用的基础内容组件

text:文本组件,类似于HTML中的span标签,是一个行内元素。

通过text组件的selecttable属性,实现长按选中文本内容的效果:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class="textsj">
  手机号(长按选中):
  <text selectable>18888888888</text>
</view>

rich-text:富文本组件,支持把HTML字符串渲染为WXML结构。

通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构:

其它常用组件

button

  • 按钮组件
  • 功能比HTML中的button按钮丰富
  • 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

image:

  • 图片组件
  • image组件默认宽度约为300px、高度约为240px

image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性如下:

navigator:

  • 页面导航组件
  • 类似于HTML中的a链接

小程序API

官方把API分为如下3大类:

事件监听API
  • 特点:以on开头,用来监听某些事件的触发
  • 举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
同步API
  • 特点1:以Sync结尾的API都是同步API
  • 特点2:同步API的执行结构,可以通过函数返回值直接获取,如果执行出错会抛出异常
  • 举例:wx.setStorageSync('key','value')向本地存储中写入内容
异步API
  • 类似于Jquery中的$.ajax(options)函数,需要通过successfailcomplete接收调用的结果
  • 举例:wx.request()发起网络数据请求,通过success回调函数接收数据
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023 年 03 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
宿主环境(host environment)指的是程序运行所必须的依赖环境。例如: Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
小白的大数据之旅
2025/05/16
1540
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
小程序项目结构与组件基础
小程序官方建议把所有小程序的页面,都存放在 pages 目录 中,以单独的文件夹存在,如图所示:
timerring
2023/06/09
4890
小程序项目结构与组件基础
【小程序】view视图,swiper轮播图,scroll-view滑动列表 (在线详细手册)
书接上文 【小程序 – 启航篇】一文打通任督二脉 小程序宿主环境构成,上文已介绍了关于宿主环境的通信模式和运行机制,本文着重介绍关于宿主环境的视图容器和基础内容组件
计算机魔术师
2022/08/23
1.4K0
【小程序】view视图,swiper轮播图,scroll-view滑动列表 (在线详细手册)
【微信小程序】swiper和swiper-item组件的基本使用
✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:微信小程序 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待💖💖💖 swiper和swiper-item 实现轮播图效果 swiper组件的常用属性 结束语 实现轮播图效果 list.wxml <!--轮播图的结构--> <swiper class="sw
hacker707
2022/10/31
2.7K0
【微信小程序】swiper和swiper-item组件的基本使用
【小程序】组件
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把
陶然同学
2023/02/24
4850
【小程序】组件
【微信小程序】view和scroll-view组件的基本使用
小程序中的组件也是由宿主环境提供的,开发者可以使用组件快速搭建出页面结构,官方把小程序里的组件分为了9大类,分别是 ①视图容器 ②基础内容 ③表单组件 ④导航组件 ⑤媒体组件 ⑥map地图组件 ⑦canvas画布组件 ⑧开放能力 ⑨无障碍访问
hacker707
2022/10/31
1.2K0
【微信小程序】view和scroll-view组件的基本使用
【黄啊码】怎么零基础学微信小程序
微信小程序众多行业案例.rar_小程序搜索功能-Javascript文档类资源-CSDN下载微信小程序各个行业的案例小程序搜索功能更多下载资源、学习资料请访问CSDN下载频道.
黄啊码
2022/06/15
7800
【黄啊码】怎么零基础学微信小程序
微信小程序开发学习笔记(二)——小程序框架、组件、WXML
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
张果
2023/04/28
2.3K0
微信小程序开发学习笔记(二)——小程序框架、组件、WXML
微信小程序之组件(一)
组件是视图层的组成单元,具有UI风格样式及特定的功能效果。当打开某款小程序后,界面中的图片,文字等多需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果,一个组件开始包括标签和结束标签,属性用来装饰这个组件的样式。
淼学派对
2022/11/20
3.1K0
微信小程序之组件(一)
微信小程序开发(常用标签用法-第一篇)
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/text.html
全栈开发日记
2022/05/13
2.9K0
微信小程序开发(常用标签用法-第一篇)
微信小程序 开发笔记
参考:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
yiyun
2022/04/01
5540
微信小程序 开发笔记
微信小程序——轮播图、组件传值、下拉刷新、导航 实战开发
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 属性表如下
wsuo
2020/09/22
1.7K0
【微信小程序】动态API+swiper组件实现轮播图+es6的promise
1. 获取轮播图数据 接口:https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
软件小生活
2021/08/16
1.8K0
如何使用小程序视图容器组件
在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细使用每个组件及API的使用。
宮園薰
2018/11/05
9.9K0
如何使用小程序视图容器组件
微信小程序【常用组件及自定义组件】
微信小程序入门的文章,其实暂时就更新到这里了,还有一个生命周期的内容,感觉当初整理的不是很好就不更新了,学完了 WXML、WXSS、一些常用组件,还有事件绑定,其实一个较为不错的页面已经能自己搭建出来了,如果你还想继续往后面研究,我给一下方向就是,可以开始看 与后台交互的内容了,发送异步请求,对数据进行回显等,回显内容时,你就又可以开始考虑用什么别的组件,可以让页面的数据加载或者观看更加顺滑,美观,当然有很多小伙伴都是后端,所以,可以自己搭个后台,试着弄用户登录授权这块,这块算是小程序一个重要的点,要好好研究一下,以后要做的事情,就和传统的后端基本一样了。我的文章都是根据官网写的原生写法,当然你也可以看一下一些小程序框架,或者看一看 ES6 的内容,毕竟我也是个后端,也没细细研究前端的内容,有什么想法或者意见,可以在公众号菜单页面直接给后台发文字,或者发送邮件:ideal_bwh@163.com
BWH_Steven
2020/09/18
2K0
2019-面向小白的微信小程序-视频教学-基础
微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用
万少
2025/02/08
2810
2019-面向小白的微信小程序-视频教学-基础
【愚公系列】2022年10月 微信小程序-优购电商项目-小程序常见组件
mode 有效值: mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。
愚公搬代码
2022/11/07
1K0
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》
3、与data同级 并且可以将input中输入的值与data中定义的属性绑定,使用this.setData({属性:e.detail.value})。
苏州程序大白
2021/09/29
9880
微信小程序入门之常用组件(04)
重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等
海拥
2021/08/23
7880
微信小程序常用视图容器组件
  组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果。当打开某款小程序之后,界面中的图片、文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式。
别团等shy哥发育
2023/02/25
1.4K0
微信小程序常用视图容器组件
推荐阅读
相关推荐
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
更多 >
LV.1
这个人很懒,什么都没有留下~
交个朋友
加入HAI高性能应用服务器交流群
探索HAI应用新境界 共享实践心得
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验