【微信小程序】真正零基础入门学习笔记系列之二：基础架构的搭建1：wxml

---

前言

学习html基本的用法，学会使用两种基本组件和掌握其他功能组件。学会使用微信小程序官方文档。

---

一、概念

此前，我们一直都认为编写小程序界面使用的是html语言，但实际上，编写小程序界面的语言与html有些许出入。我们即将学习的正是与html很类似的wxml（WeiXin html），这是一种专属于微信小程序的超文本标记语言。

无论你是否熟悉html，都无妨你接下来的学习。但是想要更好的理解wxml，我认为理解html很重要。在这里推荐一个非常棒的网址供大家学习html，网址

二、创建第一个程序

下载微信开发者工具，登陆账号，创建小程序，进入到如下界面。

此中，需要填写appid，如果没有请点击右方注册一个小程序，获取appid；后端服务选择不使用云服务；模板选择中的全部类型选择不使用模板。

点击确定。这样，就创建了一个清爽的基础小程序了。

三、wxml组件

在介绍组件之前，还需要介绍微信小程序的工程文件之间的关系。

在微信开发者工具中间你可以找到资源管理器，其中罗列着众多工程文件。其中有一个pages文件夹，在这个文件夹里面的每个文件夹都是一个页面，例如index文件夹就是一个index页面。而index文件夹中的四个文件则又是构成页面的关键因素。所以，目前我们需要关注的是pages文件夹里的index文件夹里的三个文件，分别是index.js，index.wxml和index.wxss，而我们今天的重点是学习如何编写index.wxml这个文件。

双击打开index.wxml文件。

基本组件

1.view组件

view组件官方文档
view组件就是一个存放其他组件或内容的组件。

<view></view>

在打开的index.wxml文件中，我们可以看到以下代码段：

<view class="container">
  Weixin
</view>

其中的表达意思就是：view组件中包含了一段叫作"Weixin"的文段。所以在左侧的模拟器中就会看见Weixin字样。

删除已有的view组件代码，键入以下代码（请务必手打以熟悉）：

<view>
    Weixin
    <view>
        Weixin
        <view>
            Weixin
        </view>
    </view>
</view>

保存，编译，通过wxml调试器可以看到:

最外层的view包含了所有的Weixin字段，中间一层view就包含了两个，最里面一层view就只包含一个。这就证明view具有包含关系、嵌套关系、区分关系的作用。之所以称view组件为视图容器，是因为它就像一个个容器装着不一样的内容，相互独立而又有包含的关系。

view组件是最最基本的构成元素。

2.text组件

text组件官方文档
text组件，顾名思义就是一个文本组件。

<text></text>

删除已有代码，键入以下代码（请务必手打）：

<text>Weixin Applets</text>

保存，编译，模拟器就会出现Weixin Applets字样。

既然是文本组件，换行等操作需要使用换行符或与之对应的符号进行操作，例如：

<text>Weixin \nApplets</text>

就会将两个单词通过换行分隔开。

另外也有\t输入空格的操作这里就不再赘述。

应用组件

1.input组件

input组件官方文档
input组件的作用就是提供一个输入框，以便用户输入数据。

<input/>

input组件跟之前的组件不太一样，input组件不需要两个标签共同实现。因为input组件不属于一种容器，它更像是一个接口，旨在接收用户输入的数据。

删除已有代码，键入以下代码（请务必手打）：

<input/>

在模拟器就会生成一个输入框，可以在框内接收任意内容。

2.button组件

button组件官方文档
button组件就是一个按钮，它也是一种接口，用于接收用户按键操作。

<button></button>

删除已有代码，键入以下代码（请务必手打）：

<button>按钮</button>

这样就会生成一个名为“按钮”的按钮了。

3.switch组件

switch组件
switch组件就是一个开关，用于接收用户的开关操作。

<switch></switch>

删除已有代码，键入以下代码（请务必手打）：

<switch>开关</switch>

这样就会生成一个可互动的开关。

4.checkbox组件和checkbox-group

checkbox组件官方文档
checkbox-group官方文档
checkbox组件是多选框，用于提供多个可选项来进行多选操作。
checkbox-group的作用就是用来装载checkbox组件，checkbox-group里的所有checkbox组件都隶属于同一个组。两者必须配合使用。

<checkbox-group>
<checkbox></checkbox>
<checkbox></checkbox>
<checkbox></checkbox>
</checkbox-group>

例如：

<text>选择你的菜品：</text>
<checkbox-group>
<checkbox>中餐</checkbox>
<checkbox>西餐</checkbox>
<checkbox>日式料理</checkbox>
<checkbox>法餐</checkbox>
</checkbox-group>

就会生成出以下多选框，多种类型的餐隶属于同个组，它们就会排列在一起。

5.radio组件和radio-group

radio组件官方文档
radio-group官方文档
radio组件就是单选框，用于进行单选操作。
与checkbox组件与checkbox-group的关系一样，radio组件和radio-group也是包含与被包含的关系。

<radio-group>
<radio></radio>
<radio></radio>
<radio></radio>
</radio-group>

例如：

<text>选择你的菜品：</text>
<radio-group>
<radio>中餐</radio>
<radio>西餐</radio>
<radio>日式料理</radio>
<radio>法餐</radio>
</radio-group>

如下图所示，现在的框格只能进行单选。

6.picker组件

picker组件官方文档
picker组件就是一个滚动选择器组件。

<picker></picker>

删除已有代码，键入以下代码（请务必手打）：

<picker mode="time">时间</picker>

点击picker组件所在的视图框。

就会唤出滚动选择器。

这里我并没有解释代码中mode="time"的意思，在本节后面的篇幅就会介绍到。

<picker mode="time">时间</picker>

7.slider组件

slider组件官方文档
slider组件就是一个滑动条。

<slider></slider>

删除已有代码，键入以下代码（请务必手打）：

<slider>滑动条</slider>

滑动条可以随意滑动放置。

而输入以下代码，就可以显示出滑动条当前的值。暂时对show-value不做解释，之后会解释到。

<slider show-value>滑动条</slider>

四、组件的属性

在日常使用中，组件的功能、样式和逻辑都不尽相同，例如：输入用户名的输入框可以接收所有类型的文字，但是输入密码的输入框只能接收数字、字母和某些符号，而输入金额的输入框就只能接收数字。这就是由组件的属性所决定的。

就用上面的例子来演示：

<input type="nickname"/>
<input type="password"/>
<input type="number"/>

三个不同属性的input输入框中都分别限制了不同的输入的属性，在电脑的模拟器上可能不够直观。

点击编译旁的预览，再点击编译并预览，在登陆了你的微信账号的手机上，微信就会出现预览页面，这时组件属性的区别便一目了然。

在手机上不同的输入框就会做出严格的限制，昵称输入框会提示你的微信昵称，密码输入框会限制输入类型和禁止截图，数字输入框就会弹出只能输入数字的键盘。

这就是组件属性的体现，每一个组件还有许多的属性，想要更深入的了解，就必须查看微信小程序官方文档。在每个组件介绍前我都添加了其官方文档的超链接，在里面有详细的属性说明，例如刚才的input组件，我操作的是type属性。
input组件官方文档

所示type属性有许多合法值，将属性名和合法值组合，得出type="number"这种形式，将其填入input标签内。

<input type="number"/>

这样就赋予了这个input组件，输入数字的属性了。其他属性也是同理，每个属性是并列关系，而且每个属性只能在一个组件内出现一次，例如：

<input value="123" type="number" maxlength="8"/>

这就是一个初始值为"123"，数字输入类型，而且长度限制为8的input组件。

五、学会使用开发文档

我敢保证，在学习开发小程序过程中，陪伴你最多的一定是这个微信小程序官方开发文档。所以很有必要说明一下如何去高效使用这一份文档，它的作用有哪一些，什么才是这份文档的重点。

1.如何高效使用

想要使用好这一份文档，必须用好搜索。在初学者只知道要做什么，而不清楚能做什么的时候，我建议你先去搜索相关的基本需求。例如：“微信小程序如何实现输入捕获”、“微信小程序如何获取时间戳”或者是“微信小程序如何实现数据库的增删改查”诸如此类。

先知道了能这样做，才能去学习这样做。之后就是去开发文档搜索自己不会的语法，先理解，再实践。这样会免得很多不必要的麻烦，不需要东找西找、浪费时间，有的放矢才能称之为高效率。

2.作用有哪些

除了有查询指导作用，在开发文档也有一些很不错的demo，可以起到引导学习的作用。

例如在button组件开发文档中，你可以找到关于butoon组件的demo。

demo中有各式各样的演示，不仅可以互动去预览不同的效果，还可以查看demo的代码。

阅读这些代码，结合demo演示，可以让你更好更快的理解。每当你看到有demo演示，就意味着你可以轻松快乐的学习啦。不仅如此，demo还支持导入到微信开发者工具进行预览，如果看到有需要的内容，也可以方便的移花接木，多是一件美事儿啊。

下一节：【微信小程序】真正零基础入门学习笔记系列之二：基础架构的搭建2：wxss