微信小程序页面制作——个人信息

在这里插入图片描述

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序开发实战
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序页面制作——知识储备

在这里插入图片描述

文章目录

  • 一、知识储备
    • 1. WXML简介
    • 2. WXSS简介
    • 3. 常用组件
    • 4. 页面路径配置
    • 5. view组件
    • 6. image组件
    • 7. rpx单位
    • 8. 样式导入
  • 二、个人信息案例
    • 1. 准备工作
    • 2. 实现“个人信息”微信小程序的页面结构
    • 3. 实现“个人信息”微信小程序的页面样式
    • 4. 代码分享

一、知识储备

1. WXML简介

在这里插入图片描述
在制作微信小程序页面时，页面的结构可以用WXML来实现。WXML是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。

WXML与HTML的区别：

  • HTML和WXML使用的标签不同。例如，HTML经常使用
    标签搭建页面结构，而WXML则使用标签搭建页面结构；HTML经常使用 标签定义行内文本 ，而WXML则使用 标签定义行内文本 。
  • WXML提供了和Vue.js中模板语法类似的模板语法，例如数据绑定、列表渲染、条件渲染等，而HTML中没有。
  • HTML页面可以在浏览器中预览，而WXML页面仅能在微信客户端和微信开发者工具中预览。
  • WXML中的单标签必须在结尾“>”前面加上“/”，否则微信开发者工具会报语法错误，而HTML中允许省略单标签“>”前面的“/”。
  • WXML中所使用的标签是微信小程序定义的标签，应避免使用HTML标签，这样才能保证页面被正确转译。

2. WXSS简介

在这里插入图片描述
在网页制作中，使用HTML搭建页面结构以后，还需要使用CSS美化样式。同样，在微信小程序的页面制作中，使用WXML搭建页面结构以后，也需要设置样式来美化页面。微信小程序提供了一套类似CSS的语言WXSS，通过WXSS可以美化页面样式。

WXSS与CSS的区别：

  • 不同的手机屏幕分辨率不同，如果用CSS中的px单位，会遇到屏幕适配的问题，需要手动进行像素单位换算。而微信小程序提供了一个新的单位rpx，使用rpx单位可以很轻松地适配各种手机屏幕。
  • 在微信小程序中，项目根目录中的app.wxss文件作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的WXSS样式仅对当前页面生效，CSS则没有这样的功能。
  • 在WXSS中设置背景图片的时候，可以使用网络图片或者以Base64格式编码的图片，不能使用本地图片，例如，“ background-image:url(‘/images/1.png’); ”是无效的，而CSS可以使用本地图片来设置背景图片。

3. 常用组件

在这里插入图片描述
微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的UI样式和特定功能效果。微信小程序提供了丰富的组件，通过组合这些组件可以进行高效开发。

常用组件如下表：

在这里插入图片描述

4. 页面路径配置

在这里插入图片描述
开发一个功能完整的微信小程序时，一般需要制作多个页面。
在微信小程序中可以通过app.json全局配置文件中的pages配置项来配置微信小程序的页面路径。pages配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。

演示如何配置页面路径：

"pages": ["pages/index/index","pages/logs/logs"
],

上述代码中共配置了两个页面，分别是pages/index/index页面和pages/logs/logs页面。默认情况下，pages数组中的第一项为微信小程序的初始页面，即pages/index/index页面。如果想将其他页面设置为初始页面，读者可以手动调整数组中元素的顺序，将需要设为初始页面的页面路径设为第一项即可。

pages/index/index 中的pages表示存放页面的目录，index/index中第一个index表示 index目录，第二个index表示文件名。 同理，pages/logs/logs中的pages表示存放页面的目录，logs/logs中第一logs表示logs目录，第二个logs表示文件名。

注意：文件名不需要写后缀名，以pages/index/index页面为例，配置成功后，微信开发者工具会自动生成index.wxml文件、index.wxss文件、index.js文件和index.json文件。
创建新页面的方法
通过pages数组中新增一项来新增页面
通过项目资源管理器新增页面
  • 通过pages数组中新增一项来新增页面： 如果需要在微信小程序中创建一个新的页面，可以在app.json文件的pages数组中增加一项新页面的信息，微信开发者工具会创建对应的页面。
  • 通过项目资源管理器新增页面： 通过在微信开发者工具的项目资源管理器的pages目录下右键单击鼠标，选择“新建Page”来创建页面，微信开发者工具会自动在app.json文件中添加对应的路径。

注意：如果对页面文件直接进行删除操作，则不会触发代码的自动更新效果，需要手动修改app.json文件中的pages数组。

5. view组件

在这里插入图片描述
在HTML中，<div>标签可以定义文档中的分区或节，把文档分割为独立的、不同的部分，在WXML中，view组件起着类似的作用。view组件表示视图容器，常用于实现页面的布局效果。

view组件通过标签定义，示例代码如下：

<view>view组件</view>

view组件提供了一些属性，用于实现特殊的效果。

view组件的常用属性如下表：
在这里插入图片描述
点击态是指手指在屏幕上按下时的状态。

  • hover-class属性

使用hover-class属性实现手指按下后更改文字为加粗效果

在这里插入图片描述

手指按下前， view 组件中的文字未加粗；手指按下后， view 组件中的文字加粗了，说明view组件的hover-class属性生效了。

  • hover-start-time属性

使用hover-start-time属性实现手指按住1秒后更改文字为加粗效果

在这里插入图片描述

  • hover-stay-time属性

使用hover-stay-time属性实现手指松开之后3秒内更改文字为加粗效果
在这里插入图片描述
设置hover-stay-time属性实现手指松开后点击态保留时间

6. image组件

在这里插入图片描述
微信小程序提供了用于显示图片的image组件，并且image组件的功能比HTML中的标签更强大，支持对图片进行剪裁和缩放。image组件的默认宽度为300px，默认高度为240px。

image组件通过标签定义，支持单标签和双标签两种写法，单标签写法的示例代码如下。

<image src="图片资源地址" />

双标签写法的示例代码如下。

<image src="图片资源地址"></image>

image组件的常用属性如下表。

在这里插入图片描述
在这里插入图片描述
注意：图片资源地址src 可以是本地路径或URL地址。如果使用本地路径，可以在项目中创建一个目录，例如images目录，并在该目录中放入图片，例如test.jpg，然后通过本地路径/images/test.jpg即可引用图片。

image组件的mode属性用于指定图片的裁剪模式或缩放模式，常用的mode合法值如下表。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • aspectFit缩放模式： 使用aspectFit属性实现image组件在维持图片宽高比不变的情况下使图片完整显示出来
    在这里插入图片描述
  • top裁剪模式： 使用top属性实现image组件只显示图片的顶部区域
    在这里插入图片描述
    在这里插入图片描述

7. rpx单位

在这里插入图片描述
rpx（Responsive Pixel，自适应像素）。
rpx单位是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。

rpx单位的设计思想是把所有设备的屏幕在宽度上等分为750份，即屏幕的总宽度为750rpx。微信小程序在不同设备上运行的时候，会自动把rpx单位换算成对应的像素单位来渲染，从而实现屏幕适配。

不同屏幕宽度的rpx和px的换算如下表。

在这里插入图片描述

8. 样式导入

在微信小程序中，多个不同的页面可能需要编写相同的样式代码，这样会造成代码冗余。为了避免代码冗余，可以将相同的样式代码抽为公共样式，放到一个单独的文件中，通过只修改公共样式实现对所有相关页面样式的修改，从而节约时间、方便管理。

  • 步骤1：演示如何创建公共样式文件并进行公共样式文件导入

在微信小程序的目录下创建一个公共样式文件page.wxss，在该文件中编写公共样式代码。

/** page.wxss **/
.name {padding: 5px;
}
  • 步骤2：演示如何创建公共样式文件并进行公共样式文件导入

在pages/index/index.wxss文件中导入page.wxss文件。

/** index.wxss **/
@import “/page.wxss";

添加上述代码后，即可导入page.wxss文件中定义的样式。

二、个人信息案例

1. 准备工作

  • 创建项目
    在微信开发者工具中创建一个新的微信小程 序项目，项目名称为“个人信息”，模板选择“不使用模板”。
  • 复制素材
    从本书配套源代码中找到本案例，复制images文件夹到本项目中。

在这里插入图片描述

2. 实现“个人信息”微信小程序的页面结构

编写“个人信息”微信小程序的页面结构

在这里插入图片描述

3. 实现“个人信息”微信小程序的页面样式

实现步骤：在pages/index/index.wxss文件中编写页面样式，让页面更加美观。

  • 编写头像区域的样式；
  • 编写详细信息区域的样式。

4. 代码分享

index.wxml 代码

<view><!-- 头像区域 --><view class="top"><view class="user-img"><image src="/images/avatar.png"></image></view></view><!-- 详细信息区域 --><view class="menu"><view class="item">姓名：小丽</view><view class="item">年龄：20</view><view class="item">性别：女</view><view class="item">特长：绘画、书法</view><view class="item">爱好：编程</view></view>
</view>

index.wxss 代码

/**index.wxss**/
/* 头像区域的样式 */
.top {background: #3A4861;width: 100%;padding: 30rpx 0;
}
.top .user-img {width: 252rpx;margin: 0 auto;}
.top image {width: 252rpx;height: 252rpx;border-radius: 50%;border: 6rpx solid #777F92;
}
/* 详细信息区域的样式 */
.menu .item {height: 96rpx;line-height: 96rpx;border-bottom: 2rpx solid #ccc;padding: 0 40rpx;font-size: 34rpx;
}

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

在这里插入图片描述

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

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

相关文章

在Unity环境中使用UTF-8编码

在Unity环境中使用UTF-8编码

为什么要讨论这个问题 为了避免乱码和更好的跨平台 我刚开始开发时是使用VS开发,Unity自身默认使用UTF-8 without BOM格式,但是在Unity中创建一个脚本,使用VS打开,VS自身默认使用GB2312(它应该是对应了你电脑的window版本默认选取了国标编码,或者是因为一些其他的原因)读取脚本…
阅读更多...
代码执行漏洞-Log4j2漏洞 vulhub CVE-2021-44228

代码执行漏洞-Log4j2漏洞 vulhub CVE-2021-44228

步骤一:执行以下命令启动靶场环境并在浏览器访问!!! 查看端口 浏览器访问 可以发现 /solr/admin/cores?action 这⾥有个参数可以传&#xff0c;可以按照上⾯的原理 先构造⼀个请求传过去存在JNDI注⼊那么ldap服务端会执⾏我们传上去的payload JDNI项⽬地址 https://github.com…
阅读更多...
git的使用和gdb工具

git的使用和gdb工具

1.git的使用 首先现在gitee上新建一个仓库 然后复制克隆链接到本地仓库 在本地仓库中&#xff0c;我们可以用git status查看仓库状态 我们要提交代码就是要三步 git add 文件名 git commit -m "写提交的日志" git push 将代码上传到远端仓库 然后你就完成一次提…
阅读更多...
uuid.js 使用

uuid.js 使用

相关代码 import { NIL } from "uuid";/** 验证UUID* 为空 则返回 false* param uuid* returns {boolean}*/ export function MyUUIDValidate(uuid: any): boolean {if (typeof uuid "string" && uuid ! NIL) { //uuid ! NIL 判断是否是默认值00…
阅读更多...
小白建立个人网站初步尝试

小白建立个人网站初步尝试

一、VScode 代码是在VScode上运行的&#xff0c;可以看作者另一篇文章&#xff1a;http://t.csdnimg.cn/mOmdF 二、代码基本框架 代码解释<!DOCTYPE html>声明为HTML5文档<html><head>头部元素&#xff0c;不显示在页面<meta charset"utf-8"…
阅读更多...
直击智博会，supOS加快发展新质生产力，赋能全球工厂数字化转型

直击智博会，supOS加快发展新质生产力，赋能全球工厂数字化转型

9月6日&#xff0c;第十四届智慧城市与智能经济博览会&#xff08;以下简称智博会&#xff09;开幕主题活动在宁波举办。本届智博会着重围绕“数字赋能新型工业化”主题&#xff0c;设置开幕活动、展览展示和前瞻研讨、产数合作、赛事赋能、开放活动等4大板块活动&#xff0c;旨…
阅读更多...
windows 环境下搭建mysql cluster 集群详细步骤

windows 环境下搭建mysql cluster 集群详细步骤

1、环境准备 下载mysql集群版本&#xff0c;我这里下载的是mysql-cluster-8.0.39-winx64 https://dev.mysql.com/downloads/cluster/ 2、创建配置文件 mysql集群版本下载以后解压后目录如下&#xff0c;创建配置文件 config.ini(集群配置文件&#xff0c;my.ini mysql配置…
阅读更多...
如何把自动获取的ip地址固定

如何把自动获取的ip地址固定

在大多数网络环境中&#xff0c;‌设备通常会自动从DHCP服务器获取IP地址。‌这种动态分配IP的方式虽然灵活方便&#xff0c;‌但在某些特定场景下&#xff0c;‌我们可能需要将设备的IP地址固定下来&#xff0c;‌以确保网络连接的稳定性和可访问性。‌本文将详细介绍如何把自…
阅读更多...
单GPU一分钟生成16K高清图像！新加坡国立发布LinFusion:无缝兼容Stable Diffusion插件

单GPU一分钟生成16K高清图像！新加坡国立发布LinFusion:无缝兼容Stable Diffusion插件

论文链接&#xff1a;https://arxiv.org/pdf/2409.02097 Git链接&#xff1a;https://lv-linfusion.github.io/ 亮点直击 本文研究了Mamba的非因果和归一化感知版本&#xff0c;并提出了一种新颖的线性注意力机制&#xff0c;解决了扩散模型在高分辨率视觉生成中的挑战。 本文…
阅读更多...
oracle数据库安装和配置

oracle数据库安装和配置

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; Oracle 数据库的安装和配置是一个较为复杂的过程&#xff0c;涉及多个步骤和配置项。以下将详细介绍如何在 Linux 和 Windows 系统中安装 Oracle 数据库并进行基础配置。 一、Oracle 数据库安装前的准备 …
阅读更多...
如何使用微软的Copilot AI工具将Word文档转换为PowerPoint

如何使用微软的Copilot AI工具将Word文档转换为PowerPoint

Copilot 让你可以将 Word 文档转换为 PowerPoint 演示文稿&#xff0c;使你能够以最小的努力制作出有针对性的演示文稿。这个功能是微软AI工具包的一部分&#xff0c;对于那些曾经盯着空白幻灯片不知道从何开始的人来说&#xff0c;这是一个颠覆性的改变。要充分利用这个工具&a…
阅读更多...
【web网页制作】html+css旅游家乡河南主题网页制作（5页面）【附源码】

【web网页制作】html+css旅游家乡河南主题网页制作（5页面）【附源码】

一、&#x1f468;‍&#x1f393;网站题目 旅游&#xff0c;当地特色&#xff0c;历史文化&#xff0c;特色小吃等网站的设计与制作。 二、✍️网站描述 &#x1f468;‍&#x1f393;静态网站的编写主要是用HTML DIVCSS 等来完成页面的排版设计&#x1f469;‍&#x1f393;…
阅读更多...
Elasticsearch：无状态世界中的数据安全

Elasticsearch：无状态世界中的数据安全

作者&#xff1a;来自 Elastic Henning Andersen 在最近的博客文章中&#xff0c;我们宣布了支持 Elastic Cloud Serverless 产品的无状态架构。通过将持久性保证和复制卸载到对象存储&#xff08;例如 Amazon S3&#xff09;&#xff0c;我们获得了许多优势和简化。 从历史上…
阅读更多...
QT6聊天室项目 网络通信实现逻辑分析

QT6聊天室项目 网络通信实现逻辑分析

实现逻辑 模块话网络通信设计分析 NetClient类 功能&#xff1a;负责与服务器进行通信httpClient:处理HTTP请求websocketClient&#xff1a;处理WebSocket通信 HTTP请求封装 设计请求和服务器响应的接口设计函数测试网络连接性设计处理的函数处理HTTP请求&#xff08;后期实现…
阅读更多...
【Linux】System V通信

【Linux】System V通信

目录 System V共享内存 共享内存数据结构 共享内存函数 共享内存的关联 共享内存的去关联 用共享内存实现serve&client通信 共享内存与管道进行对比 System V共享内存 管道通信本质是基于文件的&#xff0c;也就是说操作系统并没有为此做过多的设计工作&#xff0c;…
阅读更多...
【网络安全】服务基础第二阶段——第二节：Linux系统管理基础----Linux统计，高阶命令

【网络安全】服务基础第二阶段——第二节：Linux系统管理基础----Linux统计，高阶命令

目录 一、Linux高阶命令 1.1 管道符的基本原理 1.2 重定向 1.2.1 输出重定向 1.2.2 输入重定向 1.2.3 wc命令基本用法 1.3 别名 1.3.1 which命令基本语法 1.3.2 alias命令基本语法 1.4 压缩归档tar 1.4.1 第一种&#xff1a;gzip压缩 1.4.2 第二种&#xff1a;bzip…
阅读更多...
SpringBoot3 简单集成 Mybatis plus

SpringBoot3 简单集成 Mybatis plus

SpringBoot3 集成 Mybatis plus 1、引入Mybatisplus的starter <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-starter</artifactId><version>3.5.7</version></dependency>2、引入数据…
阅读更多...
前端HTML基础笔记

前端HTML基础笔记

HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是一种用于创建网页的标准标记语言。它通过一系列的元素&#xff08;或称为标签&#xff09;来定义网页的结构和内容。HTML文档由一系列的元素组成&#xff0c;这些元素可以包含文本、图片、链…
阅读更多...
LEAP模型在能源环境发展、碳排放建模预测及分析中实践应用

LEAP模型在能源环境发展、碳排放建模预测及分析中实践应用

在国家“3060”碳达峰碳中和的政策背景下&#xff0c;如何寻求经济-能源-环境的平衡有效发展是国家、省份、城市及园区等不同级别经济体的重要课题。根据国家政策、当地能源结构、能源技术发展水平以及相关碳排放指标制定合理有效的低碳能源发展规划需要以科学准确的能源环境发…
阅读更多...
培训第九周（部署k8s基础环境）

培训第九周（部署k8s基础环境）

一、前期系统环境准备 1、关闭防火墙与selinux [rootk8s-master ~]# systemctl stop firewalld[rootk8s-master ~]# systemctl disable firewalldRemoved symlink /etc/systemd/system/multi-user.target.wants/firewalld.service.Removed symlink /etc/systemd/system/dbus-o…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发