电工自学小程序开发2:编写第一个小程序，测试文本显示组件的使用

摘要：我们一起通过创建第一个小程序，实现在微信小程序的页面上显示出“Hello Word”，学习微信小程序View组件和Text组件。并对显示的文本内容颜色、字体大小、居中类型进行设置。效果图如下图所示。

这是我分享的第2个微信小程序开发学习笔记！资深老电工自学小程序开发,每天记录自己的学习心得，免费分享。

我们一起通过创建第一个小程序，实现在微信小程序的页面上显示出“Hello Word”，学习微信小程序View组件和Text组件。并对显示的文本内容颜色、字体大小、居中类型进行设置。效果图如下图所示。

效果图

微信小程序开发官方文档显示，在视图容器中有11种，其中View就是其中的一种，用来显示视图；基础内容有五种，Text是其中的一种，作用是用来显示文本内容。View的属性如下图所示，由于是第一个测试的程序，本章不对View属性进行设置。

View和Text

上一章节(电工自学小程序开发1:小程序代码结构简介)，我们已经了解了小程序的基本框架及各部分的作用，小程序的创建过程也可以自行查看上一章节。通过上节的讲解，我们知道，在Pages文件夹中，后缀名为.js的代码用来编写业务逻辑的处理；在.wxml文件里进行数据的显示及绑定；在.wxss中进行页面的美化。接下来，一起来看一下如何实现“Hello Word”的输出。

首先，在index.js文件内对数据进行创建。创建方法如下方的代码块所示。其中，textinfo是一个字符串变量，变量内容是“Hello Word”。

Page({data:{textinfo:"Hello Word"}})

随后，在.wxml文件内编写如下方所示代码。其中column-name作为一个View视图容器，此容器用来显示text文本，文本内容是“电工自学微信小程序开发笔记，第二章节”。另外的一个textinfo用来显示我们在index.js中创建的textinfo变量，此处代码实现将变量绑定到text文本处。

电工自学微信小程序开发笔记第二节{{textinfo}}

实际上完成上述步骤后，我们就已经实现了对Hello Word的输出，接下来我们需要对上方显示的文字进行美化。在.wxss文件中，我们对textinfo视图容器和column-name视图容器的text文本进行属性设置。如下方的代码块所示，分别对文本的对齐方式、颜色、背景颜色、字体大小以及距离顶端的距离进行了设置。

/**index.wxss**/page {height: 100vh;display: flex;flex-direction: column;}.textinfo text{color: red;display: flex;justify-content: center;background-color: green;margin-top: 200px;font-size:50px;}.column-name text{color: red;display: flex;justify-content: center;background-color: rgb(223, 226, 36);font-size:25px; }

在编写这个小程序的过程中，我主要遇到了以下几个问题。第一个问题是编写代码时习惯性的用了大写字母，比如写view的时候输入的是View，这时开发工具会提示“Avoid uppercase letters”,即“避免使用大写字母”，所以，在以后的编程中尽量使用小写字母。第二个问题是，在编写完代码后，左侧的模拟器窗口内显示的内容没有变化，解决方法是点击编译按钮或者点击保存按钮。以上两个问题及解决方法如下图所示。