微信小程序开发的主机环境详解（微信小程序系统架构）

这篇文章给大家带来了一些关于微信小程序的知识，主要是关于主机环境的知识。手机微信是小程序的宿主环境，小程序可以借助宿主环境提供的能力实现许多普通网页无法完成的功能。下面就一起来看看吧，希望能帮到你。

【相关学习推荐:小程序学习教程】

小程序的宿主环境微信是小程序的宿主环境。借助主机环境提供的功能，小程序可以实现许多普通网页无法实现的功能。比如小程序调用微信提供的API实现扫码支付等功能。

沟通模式1。交流的主题

applet中的通信主体是渲染层和逻辑层，其中:

WXML模板和WXSS样式在呈现层中工作。

JS脚本在逻辑层工作。

2.applet的通信模型

applet的通信模型分为两部分:

渲染层和逻辑层之间的通信

逻辑层和第三方服务器之间的通信

运行机制1。applet的启动过程

将小程序的代码包下载到本地。

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

执行App.js Applet条目文件并调用app（）创建一个applet实例。

呈现小程序主页

小程序完全启动。

2.页面呈现的过程

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

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

执行。js文件并调用Page（）来创建页面实例。

页面呈现完成

构成部分1。小程序中组件的分类:

小程序中的组件也由主机环境提供，开发人员可以基于这些组件快速构建漂亮的页面结构。官方将小程序的组件分为9类，即:

查看容器

基本内容

表单组件

导航组件

车身总成

地图地图组件

画布画布组件

开放能力

易接近

2.公共视图容器类组件

视角

正常视图区域

类似于HTML中的div，它是一个块级元素。

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

例如，使用flex实现水平布局。

Wxml代码:

ABCwxss代码:

。container1视图{ width:100px；高度:100pxtext-align:居中；line -高度:100px}。container 1视图:nth -child（1）{ background -color:海蓝宝石；}。container 1视图:nth -child（2）{ background -color:azure；}。container 1视图:nth -child（3）{ background -color:dark orange；}。container 1 { display:flex；justify -内容:space -环绕；}实现效果:

滚动-视图

可滚动视图区域

常用来实现滚动列表效果。

使用scroll-view实现上下滚动的效果。

Wxml代码:

ABC修改的Wxss代码:

。container1 { border:1px纯红色；身高:110px/*使用scroll-view时设置固定高度*/达到效果:

Swiper和swiper -项目

轮播容器组件和轮播项目组件

使用这两个组件，可以实现轮播效果:

Wxml代码:

A B Cwxss代码:

。swiper -容器{高度:150px}.item{高度:100%；line -高度:150pxtext-align:居中；} swiper -item:nth -child（1）。单品{ background -颜色:海蓝宝石；} swiper -item:nth -child（2）。item{ background-color:天蓝色；} swiper -item:nth -child（3）。item { background -颜色:深橙色；}实现效果:

3.通用基本内容组件

文本

文本组件

类似于HTML中的span标记，它是一个内联元素。

达到长按选择文字内容的效果。

长按选择文字内容:HelloWorld！

rich -文本

富文本组件支持将HTML字符串呈现为WXML结构。

将HTML字符串呈现到相应的UI结构中。

4.其他常用组件

按钮

按钮组件

功能比HTML中的button按钮更丰富。

open -类型属性可用于调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等。).

图像

图片组件

图像组件的默认宽度约为300像素，高度约为240像素。

领航员

页面导航组件

类似于HTML中的A链接，实现页面跳转。

5.应用程序接口

applet中的API由主机环境提供。通过这些丰富的小程序API，开发者可以方便地调用微信提供的能力，比如实现支付、扫码等功能。

三类小程序API:

事件监控API

特点:从on开始，用于监控某些事件的触发。

例如:wx。onwindowresize（函数回调）监听窗口大小变化的事件。

同步API

特点1:以Sync结尾的API都是同步API。

特点二:同步API的执行结果可以通过函数的返回值直接得到，如果执行中出现错误会抛出异常。

示例:wx . setstoragesync（‘key‘，value）写入本地存储。

异步API

特点:类似于$。jQuery中的Ajax（options）函数需要通过成功、失败和完成来接收调用结果。

示例:wx.request（）通过成功回调函数发起网络数据请求并接收数据。

【相关学习推荐:小程序学习教程】

以上是微信小程序开发的主机环境详解。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序中如何实现子对父的参数传递（页面沟通）（小程序父对子的价值传递）
• 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）

本文由主机参考刊发，转载请注明：微信小程序开发的主机环境详解（微信小程序系统架构） https://zhujicankao.com/103120.html