微信小程序-----宿主环境（组件介绍和代码编写）

 目录

前言

宿主环境简介

1. 什么是宿主环境

​编辑 2.小程序的宿主环境

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

一、通信模型

1. 通信的主体

2. 小程序的通信模型

二、运行机制

1.小程序启动的过程

2.页面渲染的过程

三、组件

常用的视图容器类组件

1.view 组件

2.scroll-view 组件

3. swiper 和 swiper-item 组件

4.text 组件与rich-text 组件

5.button 按钮组件

6.image图片组件

四、小程序 API

前言

        前面我们简单介绍了微信小程序以及怎么去注册创作者账号和编译环境的安装（上一期链接：微信小程序-----账号注册以及开发软件的下载与代码结构介绍-CSDN博客），那这一期我们先简单讲讲微信小程序的宿主环境，其就是微信小程序的运行原理以及代码编写，下面看正文。

宿主环境简介

1. 什么是宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：

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

 2.小程序的宿主环境

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

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：

微信扫码、微信支付、微信登录、地理定位、etc…

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

① 通信模型
② 运行机制
③ 组件
④ AP

一、通信模型

1. 通信的主体

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

① WXML 模板和 WXSS 样式工作在渲染层
② JS 脚本工作在逻辑层

2. 小程序的通信模型

小程序中的通信模型分为两部分：

① 渲染层 和 逻辑层 之间的通信
l 由微信客户端进行转发
② 逻辑层 和 第三方服务器 之间的通信
l 由微信客户端进行转发

二、运行机制

1.小程序启动的过程

① 把小程序的代码包下载到本地
② 解析 app.json 全局配置文件
③ 执行 app.js 小程序入口文件， 调用 App() 创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成

2.页面渲染的过程

① 加载解析页面的 .json 配置文件
② 加载页面的 .wxml 模板和 .wxss 样式
③ 执行页面的 .js 文件， 调用 Page() 创建页面实例
④ 页面渲染完成

三、组件

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

① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问

常用的视图容器类组件

① view
  • 普通视图区域
  • 类似于 HTML 中的 div，是一个块级元素
  • 常用来实现页面的布局效果
② scroll-view
  • 可滚动的视图区域
  • 常用来实现滚动列表效果
③ swiper 和 swiper-item
  • 轮播图容器组件 和 轮播图 item 组件

1.view 组件

这个组件等效于html的div标签，其性质是一模一样的，我可以当做div去使用就行了。下面看个示例：

<!--pages/end/end.wxml-->
<view class="container"><view>i</view><view>d</view><view>w</view></view>

wxss这里我是用一个简单的弹性布局的示例，实际上我们写wxss的时候可以跟写css一样去写。 

/* pages/end/end.wxss */
.container view{width: 100px;height: 100px;text-align: center;line-height: 100px;background-color:rebeccapurple;
}.container{display:flex;/* 按x轴为主轴，默认 */flex-direction: row;/* 设置为所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔。 */justify-content: space-around;/* 如果子元素宽度大于父元素宽度进行换行 */flex-wrap: wrap;
}

效果如下所示： 

 

2.scroll-view 组件

其作用是实现可滚动的视图区域，常用来实现滚动列表效果。下面看个示例：

wxml代码：

<scroll-view class="container" scroll-y><view>1</view><view>2</view><view>3</view>
</scroll-view>

wcss代码： 

/* pages/test/test.wxss */
.container{height: 120px;width: 100px;border: red 2px solid;
}
.container view:nth-child(1){background-color: red;
}
.container view:nth-child(2){background-color: blueviolet;
}
.container view:nth-child(3){background-color: chartreuse;
}
.container view{height: 100px;width: 100px;
}

 效果图：

3. swiper 和 swiper-item 组件

其功能是轮播图容器组件 和 轮播图 item 组件swiper 组件的常用属性

属性

类型

默认值

说明

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

color

#000000

当前选中的指示点颜色

autoplay

boolean

false

是否自动切换

interval

number

5000

自动切换时间间隔

circular

boolean

false

是否采用衔接滑动

下面看个示例：

<!--pages/test/test.wxml-->
<swiper class="container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="2000" circular>
<!-- 1 --><swiper-item><view>1</view></swiper-item><!-- 2 --><swiper-item><view>2</view></swiper-item><!-- 3 --><swiper-item><view>3</view></swiper-item>
</swiper>
.container{height: 150px;
}swiper-item view{height: 100%;line-height: 150px;text-align: center;
}swiper-item:nth-child(1){background-color: chartreuse;
}
swiper-item:nth-child(2){background-color: chocolate;
}
swiper-item:nth-child(3){background-color: darkblue;
}

效果如下所示： 

4.text 组件与rich-text 组件

① text
  • 文本组件
  • 类似于 HTML 中的 span 标签，是一个行内元素
② rich-text
  • 富文本组件
  • 支持把 HTML 字符串渲染为 WXML 结构

 通过 text 组件的 selectable 属性，实现长按选中文本内容的效果，示例如下：

<view>蔡徐坤<text selectable>ikun</text>
</view>

 

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

<rich-text nodes="<h1 style='color: red;'>title</h1>"/>

 

5.button 按钮组件

功能如下：

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

示例如下：

 wxml代码

<view> ----------type-------- </view>
<button >普通</button>
<button type="primary">主色调</button>
<button type="warn">警告</button><view>--------size="min"缩小------ </view>
<button size="mini">普通</button>
<button type="primary" size="mini">主色调</button>
<button type="warn" size="mini">警告</button><view>--------plain镂空------------</view>
<button plain>普通</button>
<button type="primary" plain>主色调</button>
<button type="warn" plain>警告</button>

6.image图片组件

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

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

mode 值

说明

scaleToFill

（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

下面看个示例：

<image src="/image/ATRI -My Dear Moments- 2024_1_3 19_23_50.png" mode="heightFix" style="border: 2px red solid;"/>

四、小程序 API

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

小程序官方把 API 分为了如下 3 大类：

① 事件监听 API
l 特点：以 on 开头，用来 监听某些事件的触发
l 举例： wx. onWindowResize (function callback) 监听窗口尺寸变化的事件
② 同步 API
l 特点 1 ：以 Sync 结尾的 API 都是同步 API
l 特点 2 ：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
l 举例： wx. setStorageSync ('key', 'value') 向本地存储中写入内容
③ 异步 API
l 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success 、 fail 、 complete 接收调用的结果
l 举例： wx. request () 发起网络数据请求，通过 success 回调函数接收数据

想要获取更多的学习资源，可以点击以下链接查看。 黑马程序员web前端视频教程从入门到精通Web前端视频教程完整版_Web前端视频教程从入门到精通_黑马程序员 (itheima.com)

 以上就是本期的全部内容了，我们下次见！

分享一张壁纸：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.tpcf.cn/news/613968.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

RK3399平台入门到精通系列讲解（驱动篇）eventpoll结构体详解

RK3399平台入门到精通系列讲解（驱动篇）eventpoll结构体详解

🚀返回总目录 文章目录 一、eventpoll 结构体二 、epitem 结构体三、eppoll_entry 结构体eventpoll 结构体：eventpoll 结构体是 epoll 在内核中的核心结构epitem 结构体：epitem 结构体用于表示 epoll 实例中的事件项eppoll_entry 结构体：它的作用就是关联Socket等待队列中…
阅读更多...
OpenXP（Windows Server 2003 RTM，NT 5.2.3790.0）构建指南

OpenXP（Windows Server 2003 RTM，NT 5.2.3790.0）构建指南

OpenXP&#xff08;Windows Server 2003 RTM&#xff0c;NT 5.2.3790.0&#xff09;构建指南 版本 11&#xff0c;最后更新于 2023 年 10 月 1 日 Discord |信使极客 注意 OpenXP&#xff08;Windows Server 2003 RTM&#xff0c;NT 5.2.3790.0&#xff09;构建指南 (rentry…
阅读更多...
Leetcode16-有多少小于当前数字的数字（1365）

Leetcode16-有多少小于当前数字的数字（1365）

1、题目 给你一个数组 nums&#xff0c;对于其中每个元素 nums[i]&#xff0c;请你统计数组中比它小的所有数字的数目。 换而言之&#xff0c;对于每个 nums[i] 你必须计算出有效的 j 的数量&#xff0c;其中 j 满足 j ! i 且 nums[j] < nums[i] 。 以数组形式返回答案。…
阅读更多...
MES数据采集在制造业的应用

MES数据采集在制造业的应用

MES设备数据采集的流程包括以下几个步骤&#xff1a; 1. 设备接入&#xff1a;将设备接入MES系统&#xff0c;建立设备与MES系统之间的连接。 2. 数据采集&#xff1a;通过传感器和采集器等设备&#xff0c;采集设备运行数据和状态信息。 3. 数据存储&#xff1a;将采集到的设…
阅读更多...
【JaveWeb教程】（19） MySQL数据库开发之 MySQL数据库操作-DML 详细代码示例讲解

【JaveWeb教程】（19） MySQL数据库开发之 MySQL数据库操作-DML 详细代码示例讲解

目录 3. 数据库操作-DML3.1 增加(insert)3.2 修改(update)3.3 删除(delete)3.4 总结 3. 数据库操作-DML DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增、删、改操作。 添加数据&#xff08;INSERT&#xff09;修改数据…
阅读更多...
中央处理器CPU（1）----指令周期和微程序

中央处理器CPU（1）----指令周期和微程序

前言&#xff1a;由于期末复习计算机组成效率太慢所以抽时间写一下文章总结一下思路&#xff0c;理解不是很深&#xff0c;欢迎各位不吝赐教。 由于时间不是很充分&#xff0c;所以有些考点由于我们不考试&#xff0c;一笔带过了。 我这是期末复习总结&#xff0c;不是考研知识…
阅读更多...
vue.js环境在window和linux安装

vue.js环境在window和linux安装

nodei官网&#xff1a;https://nodejs.org/en/download/ 一.windows环境下安装vue 1&#xff1a;node安装 在node.js的官网上下载node的安装包&#xff0c;下载下来之间安装即可&#xff0c;在命令行输入 npm -vnode -v 如下表示安装成功 2&#xff1a;cnpm安装 npm inst…
阅读更多...
Java并发(二十二)----wait notify的正确姿势

Java并发(二十二)----wait notify的正确姿势

开始之前先看看&#xff0c;sleep(long n) 和 wait(long n) 的区别&#xff1a; 1) sleep 是 Thread 的静态方法&#xff0c;而 wait 是 Object 的方法 2) sleep 不需要强制和 synchronized 配合使用&#xff0c;但 wait 需要和 synchronized 一起用 3) sleep 在睡眠的同时&…
阅读更多...
第十二章Session

第十二章Session

第十二章Session 1.什么是Session2.Session的创建与获取3.session域中数据的存取4.Session超时的控制5.浏览器和session之间关联的技术内幕 1.什么是Session 注意&#xff1a;前面的Cookie是保存在客户端&#xff0c;而session是在服务端的 2.Session的创建与获取 这里Session…
阅读更多...
让企业的招投标文件、生产工艺、流程配方、研发成果、公司计划、员工信息、客户信息等核心数据更安全。

让企业的招投标文件、生产工艺、流程配方、研发成果、公司计划、员工信息、客户信息等核心数据更安全。

PC端访问地址1&#xff1a;www.drhchina.com PC端访问地址2&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 全方位立体式防护　　让数据泄密无处遁形 信息防泄漏是一项系统的整体部署工程&#xff0c;加密监控已成为多数企事业单…
阅读更多...
微信小程序Burp抓包

微信小程序Burp抓包

方法有很多&#xff0c;工具也各有差异&#xff0c;主要是学代理流量的思路 Burp流量代理工具小程序 一、Burp证书导入 1、开启代理 开启浏览器的代理&#xff0c;火狐推荐FoxyProxy&#xff0c;Google推荐SwitchyOmega&#xff0c;设置代理为127.0.0.1:8080。 2、下载证书…
阅读更多...
LDD学习笔记 -- Linux字符设备驱动

LDD学习笔记 -- Linux字符设备驱动

LDD学习笔记 -- Linux字符设备驱动 虚拟文件系统 VFS设备号相关Kernel APIs动态申请设备号动态创建设备文件内核空间和用户空间的数据交换系统调用方法readwritelseek 写一个伪字符设备驱动在主机上测试pcd(HOST)在目标板上测试pcd(TARGET) 字符驱动程序用于与Linux内核中的设备…
阅读更多...
Docker入门介绍

Docker入门介绍

【一】从 dotCloud 到 Docker——低调奢华有内涵 1、追根溯源:dotCloud 时间倒回到两年前&#xff0c;有一个名不见经传的小公司&#xff0c;他的名字叫做:dotCloud。 dotCloud 公司主要提供的是基于 PaaS(Platform as a Service&#xff0c;平台及服务) 平台为开发者或开发商…
阅读更多...
职场晋升101读书笔记

职场晋升101读书笔记

1.如果你把生活想象为一场游戏&#xff0c;把面临的每一个问题都当作一个需要破解的谜&#xff0c;每解开一个谜都能获得一个宝石。如果你这样想&#xff0c;这个过程&#xff0c;就有意思多了。 2.最后结束面谈时&#xff0c;别寒暄两句就撤了&#xff0c;记得做一个总结&…
阅读更多...
Electron中调用dll

Electron中调用dll

截止目前Electron的官方稳定版本已经更新到了28.1.1。我在创建Electron项目时用的28.0.0版本&#xff0c;后面在项目中有用到调用dll方法的需求&#xff0c;大致的实现就是将后端给的dll文件引入到项目中&#xff0c;安装ffi-napi依赖&#xff0c;然后进行使用。但是在Electron…
阅读更多...
Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题

Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题

前期回顾 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式&#xff0c;纵横合并-CSDN博客https://blog.csdn.net/m0_57904695/article/details/135537511?spm1001.2014.3001.5501 目录 一、&#x1f6e0;️ newTable.vue 封装Table 二、&#x1f6a9; newForm.vue …
阅读更多...
pandas笔记：找出在一个dataframe但不在另一个中的index

pandas笔记：找出在一个dataframe但不在另一个中的index

1 问题描述 假设我们有两个dataframe&#xff08;这一段代码&#xff09;来自transbigdata 笔记&#xff1a;官方文档案例1&#xff08;出租车GPS数据处理&#xff09;-CSDN博客 data tbd.clean_outofshape(data, sz, col[Lng, Lat], accuracy500) data data2 tbd.clean_ta…
阅读更多...
【Vue3】2-3 : 选项式API的编程风格与优势

【Vue3】2-3 : 选项式API的编程风格与优势

本书目录&#xff1a;点击进入 一、选项式API - 三大优势 ▶ 只有一个参数&#xff0c;不会出现参数顺序的问题&#xff0c;随意调整配置的位置 传入的是一个对象&#xff0c;没有参数顺序问题 对比反面教材&#xff1a; ▶ 非常清晰&#xff0c;语法化特别强 ▶ 非常…
阅读更多...
P1032 [NOIP2002 提高组] 字串变换

P1032 [NOIP2002 提高组] 字串变换

题目描述 已知有两个字串 A,B 及一组字串变换的规则&#xff08;至多 66 个规则&#xff09;&#xff0c;形如&#xff1a; 1A1​→B1​。A2​→B2​。 规则的含义为&#xff1a;在 A 中的子串 A1​ 可以变换为 B1​&#xff0c;A2​ 可以变换为 B2​⋯。 例如&#xff1a;…
阅读更多...
大数据导出Excel

大数据导出Excel

1、针对大数据导出到excel&#xff0c;动态生成datatable数据集 DataTable dt new DataTable(); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("Age", typeof(string)); for (int i 0; i &…
阅读更多...
最新文章

Copyright @ 2022~2023