微信小程序开发的宿主环境详解（微信小程序开发环境搭建流程）

本文提供了微信小程序的相关知识。 本文主要介绍与主机环境相关的问题。 手机微信是小程序的承载环境。 小程序可以使用主机环境提供的功能来实现。 有很多功能是使用常规网页无法完成的。 下面让我们来看看它们。 我希望这对你有帮助。

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

小程序承载环境

手机微信是小程序承载环境，小程序依赖于功能。在主机环境上提供，使它们能够完成许多常规网页无法完成的功能。 示例：小程序调用微信提供的API实现扫码、支付等功能。

小程序托管环境包括通信模型、运行机制、组件和API通信模型。

1.通信主体

小程序的通信主体是渲染层和逻辑层。

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

JS脚本在逻辑层运行。

2.小程序通信模型

小程序通信模型分为两部分。

渲染层与逻辑层通信

逻辑层与第三方服务器通信

运行机制

1、小程序启动流程

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

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

运行 app.js 小程序条目。 创建一个文件并调用 App() 创建一个小程序实例。

呈现小程序的主页。

小程序将启动。

2.页面渲染过程

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

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

运行.js。 加载页面文件并调用 Page() 创建页面实例。

页面渲染完成

组件

1.小程序组件分类：

小程序组件也是由Masu提供的。 开发者可以基于组件快速构建漂亮的页面结构。 按照官方的说法，小程序组件分为九类：

视图容器

基本内容

表单组件

导航组件

Body组件

Map地图组件

Canvas画布组件

开放功能

辅助功能

2.常用View容器组件

view

普通视图区域

HTML div 与块级元素类似。

常用于实现页面布局效果。

示例：使用flex实现水平布局。

wxml代码：

ABC

wxss代码:

.container1 view{ width:100px height:100px; text-align: center; }.container1 视图:nth-child(1){ 背景-颜色: 海蓝宝石;}.container1 视图 w:nth-child(2){ 背景-颜色: 天蓝色;}.container1 视图:nth[ k3 ]child(3){background-color: darkorange;}.container1 { 显示: justify-content; space-around;}

实现效果：

scroll-view

可滚动显示区域

常用于实现滚动列表效果

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

wxml代码：

AB C

xss 代码已更改：

.container1 { border:1px Solid red; /*scroll-view; 如果使用*/

成就效果：

Swiper 和 Swiper - Items

Carousel Container 组件和 Carousel Item 组件，请设置固定高度

要实现轮播效果，使用以下两个组件。

wxml代码：

A

视图> B C

wxss代码：

.swiper-container{ height:150px;}.item{ height:100%; line-height: 150px text[k3 ]align: center;}swiper-item:nth-child(1) .item{background-color: a海蓝宝石;}swiper-item:nth-child(2) .item{背景-颜色:天蓝色;}swiper-item:nth-child(3 ) .item{背景-颜色：darkorange；}

实现效果：

3.常用基本内容组件

文字

p>

文本组件

类似HTML span标签的内联元素

实现效果长按选择文本内容

长按选择文本内容: HelloWorld!

rich-text

富文本组件是 HTML 支持在 WXML 中渲染字符串 转换为结构

将 HTML 字符串渲染为相应的 UI 结构

Title">

4 . 其他常用组件

按钮

按钮组件

HTML 中的按钮 按钮比 Open - 按钮具有更丰富的功能。 ]类型 属性可以调用微信提供的各种功能（客服、转发、获取用户认证、获取用户信息等）

Image

图片组件

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

导航器

页面导航组件

实现页面跳转的HTML。 类似链接

5.小程序API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以轻松享受微信提供的功能。叫。例如支付、扫描二维码等实现其他功能。

小程序API主要三大类：

事件监控API

功能：以on开头，用于监控特定事件的触​​发。 p>

示例：wx.onWindowResize(functioncallback)监听窗口大小调整事件

同步API

特点一：以Sync结尾的API都是同步的 API

特点二：通过同步API函数的返回值可以直接获取执行结果。 如果执行发生错误，则会抛出异常。

示例：wx.setStorageSync('key', 'value') 将内容写入本地存储

异步API

功能：jQuery $ 类似于 . ajax(options) 函数中，我们需要通过成功、失败、完成来接收调用结果。

示例：wx. request() 发起网络数据请求，并通过成功回调函数接收数据。

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

下载微信小程序

微信是一款移动通讯软件。 支持手机网络发送语音消息、视频、照片和文本。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

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

• 微信小程序架构基本原理详解（微信小程序B/S或C/S架构）
• 来说说微信小程序中的事件绑定（微信小程序中的一个按钮可以绑定多个事件吗？）
• 增强微信小程序基本概述（微信小程序基础知识）
• 简介：实现小程序的授权登录功能
• 微信小程序列表渲染示例介绍（小程序渲染HTML代码）

本文由主机参考刊发，转载请注明：微信小程序开发的宿主环境详解（微信小程序开发环境搭建流程） https://zhujicankao.com/140566.html