【愚公系列】《微信小程序与云开发从入门到实践》010-基础视图组件与滚动视图组件

🚀前言

在微信小程序的开发中，组件的使用是构建用户界面的关键。基础视图组件和滚动视图组件作为小程序的重要组成部分，它们不仅帮助开发者快速创建美观的界面，还极大地提升了用户体验。基础视图组件提供了构建页面布局的基本元素，而滚动视图组件则为用户提供了流畅的滚动体验，适用于展示大量信息和内容的场景。

本篇文章将深入探讨微信小程序中的基础视图组件与滚动视图组件，详细介绍它们的特性、常用属性及用法示例。我们将通过实例来演示如何灵活运用这些组件，帮助你理解其在实际开发中的应用场景。

无论你是小程序开发的新手，还是希望提升界面设计能力的开发者，这篇文章都将为你提供实用的指导和灵感。让我们一起踏上探索基础视图组件与滚动视图组件的旅程，打造出更加出色的小程序应用！

🚀一、基础视图组件与滚动视图组件

基础视图组件可以用来承载文本的展示，也可以作为父视图来包装其他组件。小程序中最基础的视图组件是 view 组件，大部分时候，都会使用view 组件作为当前页面最下层的父组件。如果页面要渲染的内容过多，框架中也提供了scroll-view(滚动视图)组件，可以让我们在有限的设备屏幕中渲染更多的内容，用户可以通过滚动来查看内容中的一部分。

🔎1.测试工程搭建

🦋1.1 创建小程序项目

首先，创建一个名为 ContainerComponents 的小程序工程，用于编写测试代码。在创建时，您可以选择使用之前申请的账号，也可以使用测试账号。

🦋1.2 删除默认生成的冗余代码

在小程序的默认生成的工程中，logs 页面相关的代码通常是不必要的。为了简化项目，我们将删除 logs 页面及相关代码，只保留配置文件和 index 页面。

删除 logs 页面：

• 删除 logs 页面相关的文件和代码。这样，项目结构会变得更加简洁。

🦋1.3 修改 app.json 配置

在 app.json 文件中，修改页面列表，确保只有 index 页面作为入口页面。

修改后的 app.json 配置如下：

{
   
  "pages": [
    "pages/index/index"
  ]
}

🦋1.4 清理 index.js 文件

接下来，清理 index.js 文件中的冗余代码。默认生成的 index.js 文件可能包含一些额外的代码，您可以将其删除，只保留最基本的内容。

修改后的 index.js 文件如下：

// index.js
// 获取应用实例
const app = getApp()

Page({
   })

🦋1.5 清理 index.wxml 文件

同样，删除 index.wxml 文件中的冗余代码。index.wxml 文件是页面的结构文件，可以简化为最基本的内容。

修改后的 index.wxml 文件如下：

<!-- index.wxml -->
<view class="container"></view>

🔎2.view(视图)组件

🦋2.1 新建 viewDemo 页面

在工程的 pages 文件夹下，创建一个名为 viewDemo 的子文件夹，并在其中新建一个命名为 viewDemo 的页面。这样会生成以下文件：

• pages/viewDemo/viewDemo.wxml
• pages/viewDemo/viewDemo.wxss
• pages/viewDemo/viewDemo.js
• pages/viewDemo/viewDemo.json

🦋2.2 检查 app.json 文件

微信开发者工具会自动将新创建的页面注册到 app.json 中。可以打开 app.json 文件，确认页面列表中已包含新创建的 viewDemo 页面。

修改后的 app.json 文件应如下所示：

{
   
  "pages": [
    "pages/index/index",
    "pages/viewDemo/viewDemo"
  ]
}

🦋2.3 修改 index.wxml 页面

在 index.wxml 页面中，添加一个跳转到 viewDemo 页面的链接。通过 navigator 组件实现页面跳转。

修改后的 index.wxml 文件如下：

<!-- index.wxml -->
<view class="container">
  <navigator url="../viewDemo/viewDemo">view 视图</navigator>
</view>

🦋2.4 重新编译并运行工程

重新编译工程后，在模拟器中点击主页上的“view 视图”链接，应该可以跳转到新创建的 viewDemo 页面。

🦋2.5 编写 viewDemo.wxml 页面内容

在 viewDemo.wxml 文件中，编写如下测试代码，展示两个部分的布局。

<!-- pages/viewDemo