小程序启动与页面渲染过程及组件分类详解

2024-08-04
来源:网络整理

(5) 小程序上线

2. 页面渲染的过程

(1)加载解析页面的.json配置文件

(2) 加载页面的 .wxml 模板和 .wxss 样式

(3) 执行页面的 .js 文件,调用 ( ) 创建页面实例

(4) 页面被呈现

小程序的主机环境 -- 组件 1,小程序中组件的分类

小程序中的组件也是由主机环境提供的,开发者可以基于组件快速构建出美观的页面结构。官方将小程序的组件分为9大类,分别是:

(1) 查看容器

(二)基本内容

(3) 表单组件

(4) 导航组件

(5) 介质组件

(6) 地图组件

(7) 帆布组件

(八)开放性

(9) 可访问性

2. 常用的视图容器组件

(1) 查看

(2) -视图

(3) 和 -item

3.查看组件的基本使用情况

实现 Flex 横向布局效果,如图所示:

4. -view 组件的基本使用

实现垂直滚动效果,如图所示:

5. -item 组件的基本用法

实现旋转木马效果,如图所示:

6.组件的共同性能

属性类型 默认说明

-dots 是否显示面板指示器点

- rgba(0,0,0,3) 表示点的颜色

-- # 当前选择的指标点的颜色

是否自动切换

5000个自动切换时间间隔

是否使用关节滑梯

7. 常用的基本内容组件

(1) 文本

(2) 富文本

8. 文本组件的基本用法

通过文本组件的属性(不写值),实现了长按选择中文内容的效果:

9. 富文本组件的基本用法

富文本组件的属性节点将 HTML 字符串呈现为相应的 UI 结构

标题”。

例如,一个商品详情页:服务器返回一串HTML标签,我们需要将这些HTML标签渲染到页面上,以显示一个商品详情页。

10.其他常用组件

(一)

(二)

(三)

11. 按钮的基本用法

12.组件的基本使用

13. 组件的 mode 属性

组件的 mode 属性用于指定图像的裁剪和缩放模式,常用的 mode 属性值如下:

:(默认)缩放模式,不保持纵横比来缩放图像,使图片的宽度和高度完全拉伸以填充元素。

:缩放模式,保持纵横比缩放图像,使图片的长边可以完全显示,即图片可以完整显示。

:缩放模式,保持纵横比缩放图像,只保证图像的短边可以完全显示,即图像通常只在水平或垂直方向上完整,其他方向都会被截获。

:在缩放模式下,宽度保持不变,高度自动变化,保持原始图像的纵横比不变。

:在缩放模式下,高度保持不变,宽度自动改变,原始图像的纵横比保持不变。

小程序开发模式_开发类小程序在那设置_程序开发模式

小程序主机环境 -- API 1、小程序 API 概述

小程序 API 由主机环境提供,通过这些丰富的小程序 API,开发者可以轻松调用微信提供的能力,如:获取用户信息、本地存储、支付功能等。

2. 小程序 API 有 3 大类

(1) 事件监听器 API

(2) 同步 API

(3) 异步 API

一起工作和发布——一起工作 1.了解权限管理需求

在中型和大型公司中,分工非常谨慎,不同职位和角色的员工通常会同时参与同一个小程序项目的设计和开发。

这个时候,我们迫切需要对不同岗位和角色的员工进行权限划分,让他们能够高效地协同工作。

2、了解项目成员的组织结构

三、小程序的开发过程

协同工作与发布 -- 小程序成员管理 1.会员管理的两个方面

小程序成员的管理体现在管理员对小程序项目成员和体验成员的管理上

(一)项目成员:

(2) 经验会员:

2. 不同项目成员对应的权限

3. 开发者权限说明

(1)开发者权限:您可以使用小程序开发者工具和代码开发进行小程序的功能

(2)体验者权限:可以使用小程序试用版

(3)登录权限:无需管理员确认,即可登录小程序管理后台

(4)开发设置:设置小程序服务器域名,推送消息,扫描普通链接二维码打开小程序

(5) 腾讯云管理:云开发相关设置

WXML模板语法--数据绑定1、数据绑定的基本原理

(1)在数据中定义数据

(2) 使用WXML中的数据

2. 在定义页面的数据中

在页面对应的.js文件中,可以将数据定义到数据对象中。

3. 语法格式

将数据中的数据绑定到页面,并使用语法(双大括号)包装变量。语法格式为:

4. 语法的应用场景 5.动态绑定内容

页面数据如下:

该页面的结构如下:

6. 动态绑定属性

7.三元运算

您需要查看当前页面的所有数据,这些数据可以在调试器中查看

8. 算术运算

WXML模板语法 -- 事件绑定 1、什么是事件

事件是渲染层和逻辑层之间的通信模式,通过这种模式,用户可以将用户在渲染层中的行为反馈到逻辑层进行业务处理。

2. 小程序中常用的事件

类型: 绑定方式: 事件描述

点击或绑定:点击离开在手指触摸后立即离开,类似于 HTML 中的事件

或 bind:文本框的输入事件

或 bind:当状态发生变化时触发

3. 事件对象的属性列表

当触发事件回调时,会收到一个事件对象,该对象具有以下详细属性:

属性类型的说明

类型 事件类型

从打开页面到触发事件所经过的毫秒数

当前事件的组件的一些属性值的集合

当前组件的一些属性值的集合

其他信息:

触摸事件,当前保留在屏幕上的触摸点信息数组

触摸事件,有关当前正在更改的触摸点的信息数组

分享