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

news2024/11/13 9:35:07

在这里插入图片描述

✅作者简介: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.coloradmin.cn/o/2114373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker | 虚拟机 是一个东西吗

文章目录 虚拟机与Docker如果要在linux环境下运行程序&#xff0c;那么docker会给我下载整个linux操作系统吗&#xff1f;Docker的一些名词 虚拟机与Docker 虚拟机就相当于买了一台新电脑&#xff0c;有了完整的独立的一个操作系统Docker 不需要创建完整的虚拟操作系统&#xf…

el-table行编辑

需求&#xff1a;单点行编辑并且请求接口更新数据&#xff0c;表格中某几个字段是下拉框取值的&#xff0c;剩下的是文本域&#xff1b;展示的时候 需要区分下拉框编码还是中文 故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意 <el-tablere…

【H2O2|全栈】关于Photoshop | PS(4)

PS的一些杂谈&#xff08;亖&#xff09; 目录 PS的一些杂谈&#xff08;亖&#xff09; 前言 准备工作 图形工具 基本属性 混合选项 形状图层 文字工具 基本属性 进一步变化文字 组和图层 UI设计案例 预告和回顾 后话 前言 这一篇博客我将会写一下图形工具和…

数据链路层以太网技术与DNS、ICMP协议

我们前面学习到的传输层、网络层。传输层是保证数据可靠传输。而网络层是实现在复杂的网络环境中确定一个合适的路径。我们接下来所说的数据链路层其实就是用于两个设备(同一种数据链路节点)之间进行传递。其实也就是如数次的局域网中设备之间的转发过程。 认识以太网 "…

大数据-124 - Flink State 01篇 状态原理和原理剖析:状态类型 执行分析

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Pr:首选项 - 音频硬件

Pr菜单&#xff1a;编辑/首选项 Edit/Preferences Premiere Pro 首选项中的“音频硬件” Audio Hardware选项卡可以指定计算机的音频设备和设置&#xff0c;还可以指定 Pr 用于音频回放和录制的 ASIO 和 MME 设置&#xff08;仅限 Windows&#xff09;或 CoreAudio 设置&#x…

C#使用GDI+实现生成验证码

目录 下面是代码的详细解释&#xff1a; 类声明和成员变量 构造函数 窗体加载事件 生成验证码方法 pictureBox1 点击事件 按钮点击事件 完整代码&#xff1a; 总结 这段代码是一个C# Windows Forms应用程序的一部分&#xff0c;用于生成和验证验证码。 下面是代码的详细解…

C# Windows Forms实现绘制画板

目录 C# Windows Forms上绘制画板&#xff1a; 详细解释&#xff1a; TempData临时数据&#xff0c;用来保存画笔相关的信息&#xff0c;如&#xff1a;颜色&#xff0c;大小&#xff0c;坐标等 类声明和成员变量 构造函数 文件菜单项点击事件 保存菜单项点击事件 画笔大…

浙大数据结构:03-树2 List Leaves

这道题我借用了一点上一题的代码思路&#xff0c;这题考察的主要是层序遍历&#xff0c;即用队列来实现&#xff0c;当然此处我依然采用数组模拟队列来实现。 机翻 1、条件准备 map的键存下标&#xff0c;后面值分别存左右子树的下标&#xff0c;没有子树就存-1. head数组只…

python脚本源码如何使用PyOxidizer编译Windows可执行文件

使用 PyOxidizer 将上述代码编译为 Windows 可执行文件&#xff0c;可以按照以下步骤进行&#xff1a; 一、准备工作 确保已经安装了 PyOxidizer 和 Rust 开发环境&#xff0c;如前文所述。 二、创建 PyOxidizer 配置文件 创建一个名为pyoxidizer.toml的配置文件&#xff0c;内…

go急速入门API开发

go急速入门 1、安装Go和对应编辑器2、编写helloWord3、项目目录开发4、编写一个http服务器5、 使用Gin框架基本使用使用部分中间件自定义中间件 6、部署 1、安装Go和对应编辑器 go官网&#xff0c;下载自己电脑对应版本即可。安装完成之后打开cmd输入go即可弹出对应提示。 对…

ffmpeg(各个系统版本安装- Windows11-Mac-Linux)

各个系统上的安装不建议使用编译安装&#xff0c;大佬的话可以 编译安装会各种环境问题&#xff0c;直接使用别人安装好的就行 1.Windows11上安装ffmpeg 1.官网下载ffmpeg 进入Download FFmpeg网址&#xff0c;点击下载windows版ffmpeg&#xff0c;使用别人编译好的版本即可 …

文法的例题

答案&#xff1a;B 知识点&#xff1a; 文法 一个形式文法是一个有序四元组G{V,T,S,P}&#xff0c;其中&#xff1a; V&#xff1a;非终结符。不是语言组成部分&#xff0c;不是最终结果&#xff0c;可理解为占位符 T&#xff1a;终结符。是语言的组成部分&#xff0c;是最…

自用NAS系列1-设备

拾光坞 拾光坞多账号绑定青龙面板SMBWebdav小雅alist下载到NASDocker安装迅雷功能利用qBittorrentEEJackett打造一站式下载工具安装jackett插件 外网访问内网拾光客户端拾光穿透公网ipv6路由器配置ipv6拾光坞公网验证拾光坞域名验证 拾光坞 多账号绑定 手机注册拾光坞账号&am…

Web Bluetooth 与点对点连接

前言 需求需要实现手持终端设备与 web 网页的点对点数据传输&#xff0c;不希望有服务器参与&#xff0c;想到了 web 的 USB 与 Bluetooth API&#xff0c;对 Web Bluetooth API 进行了研究。 蓝牙 GATT 基础知识 GATT&#xff08;通用属性配置文件&#xff0c;蓝牙低功耗&a…

K8S 发布应用

前言 昨儿个用 unbuntu20.04 又装了一次K8S 用的 kubeadm containerd Cilium (CNI) 又重新撸了一遍 这里只记录 应用发布的笔记 正文 #创建deployment kubectl create deployment nginx --imagenginx #我这边大约30秒后显示为 ready kubectl get deployments kubectl desc…

4.7 Sensors -- useScroll

4.7 Sensors – useScroll https://vueuse.org/core/useScroll/ 作用 响应式的监听滚动位置和状态。 官方示例 <script setup lang"ts"> import { useScroll } from vueuse/coreconst el ref<HTMLElement | null>(null) const { x, y, isScrolling…

【Python系列】只更新非空的字段

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

数字电路专题:verilog 阻塞赋值和非阻塞赋值

verilog 阻塞赋值 和 非阻塞赋值 “”阻塞赋值&#xff0c; ”<”非阻塞赋值。阻塞赋值为执行完一条赋值语句&#xff0c;再执行下一条&#xff0c;可理解为顺序执行&#xff0c;而且赋值是立即执行&#xff1b; 非阻塞赋值可理解为并行执行&#xff0c;不考虑顺序&#x…

【python计算机视觉编程——7.图像搜索】

python计算机视觉编程——7.图像搜索 7.图像搜索7.1 基于内容的图像检索&#xff08;CBIR&#xff09;从文本挖掘中获取灵感——矢量空间模型&#xff08;BOW表示模型&#xff09;7.2 视觉单词**思想****特征提取**&#xff1a; 创建词汇7.3 图像索引7.3.1 建立数据库7.3.2 添加…