第二章：手把手，动手编写一个简单小程序（上）_写一个小程序 里面清单内容供别人查看

作者：知晓云 - 小程序开发快人一步

了解小程序开发必备的基础知识之后，我们就要开始自己动手，制作我们自己的第一个小程序。

这个小程序与开发者工具?默认新建的初始工程类似，会显示用户的头像和名字，同时会向用户显示问候语。

准备开发

在开始开发之前，我们需要完成一系列准备工作。

在开发者工具中新建工程

在昨天的文章中，我们已经谈到如何在开发者工具中新建工程。我们只需按照实际情况，在开发者工具中新建项目即可。

注意，我们需要在项目目录中选择一个完全空白的目录（最好直接新建），并取消最后的「建立普通快速启动模板」勾选框。这样，我们就能新建空白的小程序项目。

我们会在本章中，一步步带领大家一同完全从零开始创建小程序文件。

接下来，我们就进入开发者工具中，新建几个小程序必要的文件。

调整配置文件

熟悉 iOS 或 Android 开发的?开发者都知道，App 开发会有?名叫「清单文件」的东西，它记录了 App 的图标、名称、兼容性等 App 的元信息，帮助系统更好地运行这个 App。

而在微信小程序中，也有功能类似的文件，就是 app.json。它记录小程序一些基础配置：

l 小程序的所有页面路径

l 小程序全局界面表现

l Tab 标签页配置

l 网络超时

l 调试模式开启或关闭

我们可以这样新建一个 app.json 文件：在开发者工具的编辑器（通常在右上角）中，点击左上方的「+」号，选择 JSON，并命名为 app.json。

新建文件后，我们还得在 app.json 写入配置，才能让小程序正常工作。在此，我们可以直接输入以下代码直接保存。

{}
1

保存后，我们可以看到编辑器依然在报错。这是因为 app.json 目前是空的。

小程序页面路径配置

接下来，在编辑器中新建「pages」文件夹，并对着文件夹点击右键，新建「Page」起名为 welcome。

保存后，pages 文件夹会多出几个文件，而 app.json 也有相应变化：

{
  "pages": [
    "pages/welcome"
  ]
}
1
2
3
4
5

可以看到，开发者工具已经自动地将我们在 pages 文件夹中新建的 welcome 页面路径，放入到 pages 数组中。

在 app.json 中，pages 数组是必填的。它规定小程序中所有页面的地址，同时规定了小程序启动时的首页，就是 pages 数组的首位所指的页面。

当 pages 成功配置后，小程序就可以正常运行了（新建页面文件后，小程序已经正常运行无报错了）。但如果想要一些个性化配置，我们依然可以继续修改 app.json。

修改小程序页面标题

我们以修改小程序页面的全局页面标题为例，了解 app.json 更多个性化设置。

在 app.json 中，全局页面标题项目被分配在 window 大项中，名为 navigationBarTitleText。修改后的 app.json 形如这样：

{
  "pages": [
    "pages/welcome"
  ],
  "window": {
    "navigationBarTitleText": "我是标题"
  }
}
1
2
3
4
5
6
7
8

保存后，我们就可以实时看到小程序已经应用修改。

除了页面标题文字，类似标题栏颜色、Tab 栏内容等信息，都可以直接在 app.json 进行配置。

现在，我们的 app.json 已经配置完毕。接下来，我们就来为小程序增加几个视觉元素。

了解 WXML

插入文字

我们打开 index 文件夹下的 index.wxml 文件，可以看到开发者工具在自动生成页面的时候，默认生成的代码。

<!--pages/welcome.wxml-->
<text>pages/welcome.wxml</text>
1
2

没错，我们在预览区看到的「welcome.wxml」语句，便是由它进行控制的。

第一行的 ，是一行注释。计算机在编译代码的时候，会跳过注释，不会对注释代码进行编译。

使用注释，我们可以对代码的功能，进行一些说明，以便未来对代码进行维护。

我们看一下第二行的代码。我们看到，这句代码的前后都是由尖括号包裹起来的部分，中间则是 index.wxml。

我们试图将中间的 index.wxml 修改成 Hello World（当然，也可以改成你自己喜欢的短语）。修改后的代码变成了这样：

<!--pages/welcome.wxml-->
<text>Hello World</text>
1
2

当我们保存、编译后，我们可以看到，预览区域中原先写着「index.wxml」的地方，已经变成了「Hello World」。

在小程序中， 代表文字视觉组件。在它们中间插入的内容，将会直接显示在小程序的相应位置中。

插入图片

接下来，我们试图在我们的小程序里插入一张图片。

首先，我们在根目录下创建一个 image 的文件夹。然后，我们点击我们刚才新建的 image 文件夹，点击右边的「…」按钮，选择「硬盘打开」。

这时，电脑会打开我们的工程文件夹。我们在文件夹里，打开我们刚才新建的 image 文件夹，随意将一张图片放进文件夹里面。

接着，开发者工具会自动探测到文件的变化，然后重新刷新工程目录。刷新之后，我们就可以在 image 文件夹下，看到我们刚才放进去的文件。

之后，我们回到 index.wxml，插入刚才放入目录中的图片。

假设我们放入 image 目录的图片文件名称叫 avatar.jpg，那么我们需要在文件的底部插入这段代码：

<image src='/image/avatar.jpg'></image>
1

插入这段代码之后，index.wxml 文件看上去应该是这样的：

<!--pages/welcome.wxml-->
<text>Hello World</text>
<image src='/image/image.jpg'></image>
1
2
3

保存后，我们就可以在模拟器中，看到整体效果了。

与 一样， 也是小程序的一个视觉组件，它代表在小程序里插入一张图片。

有所不同的是， 组件内不应该插入任何内容。我们应该在 组件的 src 属性中，指定需要插入在小程序里的图片。

将代码保存，开发者工具会自动刷新预览。在预览中，我们可以看到图片虽然已经成功插入，但是比例似乎不太正确。

这是因为 本身拥有几种缩放、裁剪模式和尺寸大小，而默认尺寸为 300×225 px，默认模式为「完整填充」。

在 组件中，增加 mode，定义值为 widthFix，它可以让图片比例正常，并根据设定的宽度，自动按比例调整 元素的高度。

<image src='/image/avatar.jpg' mode='widthFix'></image>
1

保存后，可以看到小程序的图片显示就正常了。

插给元素加「框」

在正式开发过程中，我们会将屏幕元素分隔成不同部分，每个部分可以套用相应样式，使用独立的样式代码，以提高编码效率。

例如，在传统 HTML 开发中，我们会利用

在这里，我们会将其中的文字、图片元素「绑定」起来，作为屏幕的组成部分。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src='/image/avatar.jpg' mode='widthFix'></image>
</view>
1
2
3
4
5

这样做，我们就可以统一处理文字和图片的样式和其他操作。明天，我们将会对屏幕上的这些元素做一些「美化」操作，并将它们换成用户的资料。

相关阅读：第一章：一文了解小程序

访问「知晓云」（cloud.minapp.com），学习更多小程序开发课程