【愚公系列】《微信小程序开发解析》004-小程序框架（视图层）

举报
愚公搬代码 发表于 2024/09/30 09:05:06 2024/09/30
【摘要】 🏆 作者简介，愚公搬代码🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主...

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

在微信小程序中，视图的组成主要涉及三个部分：WXML、WXSS 和组件。这些组成部分共同构成了小程序页面的结构、样式和交互。

WXML 是微信小程序的视图层语言，类似于 HTML，用于描述小程序页面的结构。主要负责定义页面的组件结构和绑定数据。

WXSS 是微信小程序的样式语言，类似于 CSS，用于定义页面的样式和布局。

微信小程序的组件是可复用的视图元素，可以在多个页面或同一页面多次使用。组件可以由 WXML、JS 和 WXSS 三部分构成，具有独立的作用域和生命周期。

🚀一、视图层

🔎1.WXML

🦋1.1 数据绑定

假设我们有一个页面,需要展示一个用户的基本信息,包括头像、昵称、性别和年龄。

首先,在对应的JS文件中定义好需要的数据:

// index.js
Page({
  data: {
    nickname: 'Tom',
    gender: 'Male',
    age: 25
  }
})

然后,在对应的WXML文件中进行数据绑定:

<!-- index.wxml -->
<view class="user-info">
  <view class="nickname">{{nickname}}</view>
  <view class="gender">Gender: {{gender}}</view>
  <view class="age">Age: {{age}}</view>
</view>

在这个例子中:

  1. 使用{{avatarUrl}}将头像图片的URL绑定到<image>标签的src属性上。
  2. 使用{{nickname}}将昵称绑定到<view>标签的文本内容上。
  3. 使用{{gender}}和{{age}}将性别和年龄绑定到对应的<view>标签上。

当页面加载时,微信小程序会自动从data对象中获取对应的数据,并动态渲染到页面上。
在这里插入图片描述

🦋1.2 列表渲染

假设我们有一个页面,需要展示一个商品列表,列表中每个商品包含商品名称、价格和图片。我们还希望能够根据价格对商品列表进行排序。

首先,在对应的JS文件中定义好需要的数据和排序函数:

// index.js
Page({
  data: {
    productList: [
      { id: 1, name: 'Product 1', price: 19.99, imageUrl: 'https://example.com/product1.jpg' },
      { id: 2, name: 'Product 2', price: 29.99, imageUrl: 'https://example.com/product2.jpg' },
      { id: 3, name: 'Product 3', price: 39.99, imageUrl: 'https://example.com/product3.jpg' },
      { id: 4, name: 'Product 4', price: 49.99, imageUrl: 'https://example.com/product4.jpg' }
    ],
    sortOrder: 'asc' // 默认按价格升序排序
  },

  // 价格排序函数
  sortByPrice() {
    this.setData({
      sortOrder: this.data.sortOrder === 'asc' ? 'desc' : 'asc',
      productList: this.data.productList.sort((a, b) => {
        if (this.data.sortOrder === 'asc') {
          return a.price - b.price;
        } else {
          return b.price - a.price;
        }
      })
    });
  }
})

然后,在对应的WXML文件中进行列表渲染和排序功能的实现:

<!-- index.wxml -->
<view class="product-list">
  <view class="product-item" wx:for="{{productList}}" wx:key="id">
    <image class="product-image" src="{{item.imageUrl}}" mode="aspectFit"></image>
    <view class="product-name">{{item.name}}</view>
    <view class="product-price">￥{{item.price}}</view>
  </view>
</view>

<view class="sort-btn-wrapper">
  <button class="sort-btn" bindtap="sortByPrice">Sort by Price ({{sortOrder}})</button>
</view>

在这个例子中:

  1. 使用wx:for指令遍历productList数组,为每个商品渲染一个<view>元素。
  2. 使用wx:key指令指定唯一标识,这里使用了id字段。
  3. 使用{{item.imageUrl}}、{{item.name}}和{{item.price}}分别绑定商品的图片、名称和价格。
  4. 添加一个<button>元素,绑定bindtap事件到sortByPrice函数,用于触发排序操作。
  5. 在sortByPrice函数中,根据sortOrder的值来决定是升序还是降序对商品列表进行排序。
  6. 使用this.setData()更新productList和sortOrder数据,微信小程序会自动根据更新的数据重新渲染页面。

当用户点击"Sort by Price"按钮时,微信小程序会调用sortByPrice函数,切换排序顺序并重新渲染商品列表。
在这里插入图片描述

🔎2.条件渲染

在微信小程序开发中，条件渲染是一个常见的功能。可以通过 WXML 模板语言结合 JavaScript 来实现。以下是一个简单的条件渲染案例，展示如何根据不同的条件渲染不同的内容。

假设我们有一个小程序页面，根据用户是否登录来显示不同的内容。

index.wxml

<view class="container">
  <!-- 根据 isUserLoggedIn 变量决定显示什么内容 -->
  <block wx:if="{{isUserLoggedIn}}">
    <view class="logged-in">
      <text>欢迎回来, {{userName}}!</text>
    </view>
  </block>
  <block wx:else>
    <view class="not-logged-in">
      <text>请登录</text>
      <button bindtap="login">登录</button>
    </view>
  </block>
</view>

index.wxss

/* 简单的样式 */
.container {
  padding: 20px;
}

.logged-in {
  color: green;
}

.not-logged-in {
  color: red;
}

button {
  margin-top: 20px;
}

index.js

Page({
  data: {
    isUserLoggedIn: false,
    userName: ''
  },
  
  // 页面加载时调用
  onLoad: function() {
    // 假设我们从存储中获取用户登录状态
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        isUserLoggedIn: true,
        userName: userInfo.userName
      });
    }
  },

  // 模拟登录操作
  login: function() {
    // 在实际应用中，这里可能涉及到调用后端API进行登录认证
    wx.setStorageSync('userInfo', { userName: '张三' });
    this.setData({
      isUserLoggedIn: true,
      userName: '张三'
    });
  }
});

index.json

{
  "navigationBarTitleText": "条件渲染示例"
}

解释

  1. index.wxml 文件中使用了 wx:if 和 wx:else 进行条件渲染。根据 isUserLoggedIn 变量的值，显示不同的内容。
  2. index.wxss 文件中定义了一些简单的样式，用于区分登录和未登录状态。
  3. index.js 文件是页面的逻辑部分。onLoad 方法中尝试从本地存储中获取用户信息，并根据是否存在用户信息来设置 isUserLoggedIn 和 userName。login 方法模拟用户登录，并更新页面数据。
  4. index.json 文件设置了页面的导航栏标题。

在这里插入图片描述

🔎3.模板

微信小程序中的 template 模板是一种非常实用的工具，能够帮助开发者在代码中实现复用，提高开发效率和代码的可维护性。

🦋3.1 定义模板

首先，在 .wxml 文件中定义一个模板。使用 <template> 标签，并通过 name 属性给模板命名。

<!-- templates.wxml -->
<template name="itemTemplate">
  <view class="item">
    <text>{{name}}</text>
    <text>{{value}}</text>
  </view>
</template>

🦋3.2 引用模板

在需要使用模板的页面或组件 .wxml 文件中，通过 <import> 标签引入模板文件。

<!-- page.wxml -->
<import src="templates.wxml"/>

然后，使用 <template> 标签并通过 is 属性指定模板的名称，通过 data 属性传递数据。

<!-- page.wxml -->
<import src="templates.wxml"/>

<view>
  <template is="itemTemplate" data="{{name: 'Item 1', value: 10}}"/>
  <template is="itemTemplate" data="{{name: 'Item 2', value: 20}}"/>
  <template is="itemTemplate" data="{{name: 'Item 3', value: 30}}"/>
</view>

🦋3.3 使用 data 属性传递数据

data 属性用于将数据传递给模板。数据是一个对象，其中的属性名应与模板中使用的变量名匹配。

<template is="itemTemplate" data="{{name: 'Item 1', value: 10}}"/>

🦋3.4 使用 wx:for 循环模板

如果有一组数据需要重复使用模板，可以结合 wx:for 循环。

<!-- page.wxml -->
<import src="templates.wxml"/>

<view>
  <block wx:for="{{items}}" wx:key="name">
    <template is="itemTemplate" data="{{...item}}"/>
  </block>
</view>

在 JavaScript 文件中定义 items 数据：

// page.js
Page({
  data: {
    items: [
      { name: 'Item 1', value: 10 },
      { name: 'Item 2', value: 20 },
      { name: 'Item 3', value: 30 }
    ]
  }
});

🦋3.5 模板的样式

模板中的样式可以定义在对应的 .wxss 文件中。模板样式可以与页面样式共享。

/* templates.wxss */
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.text {
  font-size: 16px;
}

通过这种方式，模板的样式可以在不同页面和组件中复用。

在这里插入图片描述

🔎4.WXSS

微信小程序中的WXSS（WeiXin Style Sheets）是专门为微信小程序设计的样式语言，它与CSS非常相似，但也有其特有的单位和特性。常用的尺寸单位之一是 rpx，它是根据屏幕宽度自适应的单位。

WXSS是微信小程序使用的样式语言，具有以下特点：

  1. 与CSS相似：语法和CSS基本一致。
  2. 新单位 rpx：用于实现自适应布局。
  3. 全局样式与页面样式：可以在项目根目录下的 app.wxss 中定义全局样式，也可以在各页面的 .wxss 文件中定义页面样式。

🦋4.1 尺寸单位

rpx（responsive pixel）是微信小程序中用于自适应布局的单位。其特点是可以根据不同屏幕宽度进行自适应缩放。

  • 在一个微信小程序的界面设计中，规定屏幕宽度为750rpx。
  • 也就是说，无论设备屏幕宽度是多少，750rpx 总是等于设备屏幕的宽度。
  • 例如，如果设备屏幕宽度是375px，那么1rpx等于0.5px；如果设备屏幕宽度是750px，那么1rpx等于1px。

rpx 与 px 的换算公式

假设设备屏幕宽度为 Wpx，那么 rpx 与 px 的换算公式为：

  • 1rpx = (W / 750) px

例如，对于iPhone 6（屏幕宽度为375px）：

  • 1rpx = 375 / 750 = 0.5px

使用实例

/* app.wxss */
.container {
  width: 750rpx; /* 占满整个屏幕宽度 */
  height: 400rpx; /* 高度为400rpx */
}

.text {
  font-size: 36rpx; /* 字体大小为36rpx */
}

在 .wxml 文件中应用样式

<!-- app.wxml -->
<view class="container">
  <text class="text">微信小程序</text>
</view>

计算示例

假设你需要设计一个宽度为 100px 的元素，如何转换为 rpx？

  • 如果设备屏幕宽度为375px，那么：

    • 100px = 100 * (750 / 375) rpx = 200rpx

  • 如果设备屏幕宽度为750px，那么：

    • 100px = 100 * (750 / 750) rpx = 100rpx

🦋4.2 样式导入

在微信小程序中，WXSS（WeiXin Style Sheets）用于定义小程序的样式，与CSS非常相似。为了提高代码的复用性和维护性，可以将公共样式集中在一个或多个WXSS文件中，并在需要使用的页面中进行导入。

微信小程序中可以使用 @import 规则来导入外部的WXSS文件。

  1. 创建公共样式文件

首先，在项目中创建一个公共样式文件，例如 common.wxss，用于存放全局使用的样式。

/* common.wxss */
.container {
  margin: 10rpx;
  padding: 20rpx;
  border: 1px solid #ddd;
}

.text-center {
  text-align: center;
}

.primary-button {
  background-color: #1aad19;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
}
  1. 在页面样式文件中导入公共样式

然后，在需要使用公共样式的页面或组件的 .wxss 文件中，使用 @import 规则导入公共样式文件。

/* page.wxss */
@import "common.wxss";

.page {
  background-color: #f8f8f8;
  padding: 30rpx;
}
  1. 使用导入的样式

在对应的 .wxml 文件中使用导入的样式类。

<!-- page.wxml -->
<view class="container">
  <text class="text-center">Welcome to WeChat Mini Program</text>
  <button class="primary-button">Click Me</button>
</view>

示例项目结构

以下是一个示例项目结构，展示如何组织和导入WXSS样式文件：

project-root/
├── pages/
│   ├── index/
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
├── styles/
│   ├── common.wxss
├── app.js
├── app.json
└── app.wxss

通过 @import 规则导入公共样式文件，可以实现样式的模块化管理，提高代码的复用性和维护性。将常用的样式集中在公共样式文件中，在需要的页面或组件中进行导入，可以让项目的样式管理更加清晰和高效。

这样做不仅能减少重复代码，还能让样式更新变得更加方便，只需修改公共样式文件即可同步更新所有引用的页面或组件的样式。

🔎5.内联样式

在微信小程序开发中，使用内联样式是一种直接在元素的属性中定义样式的方法。内联样式通常用于快速调整某些组件的样式，而不需要在单独的样式表（如 .wxss 文件）中定义。

  1. 基本使用：

    <view style="color: red; font-size: 20px;">这是一个内联样式的示例</view>

  2. 动态内联样式：
    在微信小程序中，你可以使用数据绑定来动态设置内联样式。首先在对应的 .js 文件中定义数据：

    Page({
  data: {
    color: 'blue',
    fontSize: '18px'
  }
})

    然后在 .wxml 文件中使用数据绑定：

    <view style="color: {{color}}; font-size: {{fontSize}};">这是一个动态内联样式的示例</view>

  3. 使用三元运算符动态设置样式：
    你还可以基于条件来动态改变样式：

    Page({
  data: {
    isActive: true
  }
})

    <view style="{{isActive ? 'background-color: green;' : 'background-color: red;'}}">这是一个条件样式的示例</view>

  4. 多种样式组合：
    有时你可能需要根据多个条件来设置样式，可以使用模板字符串来组合样式：

    Page({
  data: {
    width: '100px',
    height: '50px',
    color: 'blue'
  }
})

    <view style="width: {{width}}; height: {{height}}; color: {{color}};">这是一个组合样式的示例</view>

  5. 使用 JavaScript 对象来生成样式：
    在一些复杂情况下，可能需要在 JavaScript 中生成样式字符串：

    Page({
  data: {
    styleString: ''
  },
  onLoad() {
    const styleObj = {
      width: '100px',
      height: '50px',
      color: 'blue'
    };
    const styleString = Object.entries(styleObj).map(([key, value]) => `${key}: ${value};`).join(' ');
    this.setData({ styleString });
  }
})

    <view style="{{styleString}}">这是一个通过 JavaScript 对象生成样式的示例</view>

🔎6.选择器

在微信小程序中，样式选择器的使用与传统的 CSS 类似，但有一些特定的规则和注意事项。微信小程序使用 .wxss 文件来定义样式，可以使用类选择器、ID 选择器、标签选择器等。以下是一些常见的样式选择器及其使用方法：

  1. 类选择器：

    <!-- 在 .wxml 文件中 -->
<view class="container">
    <text class="title">标题</text>
    <text class="content">内容</text>
</view>

    /* 在 .wxss 文件中 */
.container {
    padding: 20px;
    background-color: #f0f0f0;
}
.title {
    font-size: 24px;
    font-weight: bold;
}
.content {
    font-size: 16px;
    color: #333;
}

  2. ID 选择器：

    <!-- 在 .wxml 文件中 -->
<view id="header">
    <text id="header-title">这是一个标题</text>
</view>

    /* 在 .wxss 文件中 */
#header {
    background-color: #ff5722;
    padding: 10px;
}
#header-title {
    color: #ffffff;
    font-size: 20px;
}

  3. 标签选择器：

    <!-- 在 .wxml 文件中 -->
<view>
    <text>这是一个文本</text>
    <button>按钮</button>
</view>

    /* 在 .wxss 文件中 */
text {
    color: #ff0000;
    font-size: 14px;
}
button {
    background-color: #008CBA;
    color: white;
    padding: 10px;
    border: none;
}

  4. 组合选择器：

    <!-- 在 .wxml 文件中 -->
<view class="container">
    <text class="highlight">高亮文本</text>
    <text>普通文本</text>
</view>

    /* 在 .wxss 文件中 */
.container .highlight {
    color: #ff5722;
    font-weight: bold;
}
.container text {
    font-size: 16px;
}

  5. 属性选择器（仅支持部分）：
    在微信小程序中，属性选择器的支持有限，但可以使用一些基本的属性选择器。

    <!-- 在 .wxml 文件中 -->
<view class="box" data-status="active">Active Box</view>
<view class="box" data-status="inactive">Inactive Box</view>

    /* 在 .wxss 文件中 */
.box[data-status="active"] {
    background-color: green;
    color: white;
}
.box[data-status="inactive"] {
    background-color: gray;
    color: white;
}

  6. 后代选择器：

    <!-- 在 .wxml 文件中 -->
<view class="parent">
    <view class="child">Child Element</view>
</view>

    /* 在 .wxss 文件中 */
.parent .child {
    color: blue;
}

  7. 伪类选择器：
    微信小程序支持部分伪类选择器，例如 :active、:hover 等。

    <!-- 在 .wxml 文件中 -->
<button class="btn">按钮</button>

    /* 在 .wxss 文件中 */
.btn {
    background-color: #008CBA;
    color: white;
    padding: 10px;
    border: none;
}
.btn:active {
    background-color: #005f6b;
}

使用这些选择器，你可以在微信小程序中有效地控制和管理样式，创建出丰富的用户界面效果。需要注意的是，微信小程序对一些复杂的 CSS 选择器和样式支持有限，建议多使用简单且兼容性好的选择器和样式。

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入