微信小程序开发简介（三）

出身背景

在上一篇文章中，我们主要介绍了微信小程序的几种配置。其中，app。json是微信小程序的全球配置，页面。json是applet页面和project.config的配置。json是小程序开发工具的配置，sitemap json用于配置微信是否可以检索小程序和页面。本文主要用于介绍微信小程序的页面组成。

页面组成

从事网页编程的人都知道网页编程使用HTML+CSS+JS的组合。HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于处理页面和用户之间的交互。事实上，微信小程序的页面也相当于一个网页，其组成与之类似。下图显示了页面索引的内容。指数json在上一篇文章中提到，这是页面的配置。例如，索引。wxml类似于HTML，用于确定微信小程序的页面结构。指数wxss类似于CSS，用于描述页面的示例，而索引。js用于与微信小程序交互。

微信IMG131.png

WXML语言

下面的代码显示了我们创建的测试项目的索引。可以看出，wxml的内容与HTML非常相似。WXML由标签、属性等组成，但也有很多不同，主要是两种。

<；/打开数据>

<；/打开数据>

获取您的头像昵称</button>

获取您的头像昵称</button>

请使用1.4.4及以上版本的基本库</view>

<块wx:else>

<；/图像>

｛｛userinfo.nickname｝｝

{{座右铭}}

标签名称不同，封装了更多组件

在编写HTML时，常用的标记是div、p、span。开发人员在编写页面时可以根据这些基本标签来组合不同的组件，例如日历、弹出窗口等。换句话说，既然我们都需要这些组件，为什么我们不能打包这些常用的组件来大大提高我们的开发效率。

从上面的示例中，我们可以看到小程序的WXML标签是视图、按钮、文本等。这些标签是小程序为开发人员打包的基本功能。微信小程序还提供地图、视频、音频等组件功能。中提供了许多打包组件，但这还不够。未来，我们将专门撰写一篇文章，以实例详细介绍微信小程序提供的组件。

我忍不住解释为什么这里没有更多的细节。这涉及到本文的主题是宿主环境和页面结构，而不是具体的实现。此外，微信小程序提供了丰富的组件。如果它们都被详细描述，它们会有点不合适，会让人失去注意力。这也让我想起了之前关于陶渊明在初中语文学习中的阅读方法的争论，无论是从“不求理解”的角度来看，还是追根究底。就我个人而言，我认为这两种方法都是正确的，但时机不同。当我们完全接触到一个新事物时，我们应该对它有一个广泛的看法，并有一个总体的认识。此时，我们不应该过多地详细讨论，否则，他们会陷入困境。当我们对一个新事物有了大致的了解时，我们需要选择一个方面来继续研究，并对其进行细致的研究，以便我们能够深入理解和应用它。本系列的前几篇文章都是关于全局的，不会涉及大部分细节。我希望你能对微信小程序有一个全面的了解。现在，废话到此为止。

添加了wx:if等属性和{{}}等表达式

在网页的一般开发过程中，我们通常使用JS来操作DOM（由相应的HTML描述生成的树），以引起界面中的一些变化，以响应用户的行为。例如，当用户单击一个按钮时，JS会将一些状态记录到JS变量中，并在其中操纵DOM属性或行为