一、开始你的第一个小程序

来自小程序：知晓课堂|系列培训

前言

本系列教程开始于2018年3月30日，作者使用的小程序开发工具版本为v1.02.1803210，基础库版本为1.9.94，后续可能会出现开发工具界面不同的现象，请读者视实际情况使用开发工具。

小程序开发工具的安装请移步https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，下载与我们电脑系统相符的版本即可，作者使用的是Windows 64位版本。

开发准备

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

在开发者工具中新建项目

打开“微信web开发者工具”，新建一个小程序项目。

注意，我们需要在项目目录中选择一个完全空白的目录(最好直接在硬盘中新建)，并取消最后的[建立普通快速启动模板]勾选框。这样，我们就能新建空白的小程序项目。作者会在本文一步步带领大家一同完全从零开始创建小程序文件。

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

调整配置文件

在微信小程序中，app.json是用于记录小程序一些基础配置：

• 小程序的所有页面路径
• 小程序全局界面表现
• Tab标签页配置
• 网络超时
• 调试模式开启或关闭

我们可以新建一个app.json文件：在开发者工具的编辑器左侧目录树中，点击左上方的 [+] 号，选择JSON，并命名为app. json。

新建文件后，我们还得在app.json写入配置，才能让小程序正常工作。在此，我们直接在右侧编辑区域中输入以下代码，使用Ctrl+S进行保存。

{}

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

小程序页面路径配置

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

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

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

可以看到，开发者工具已经自动地将我们在pages文件夹中新建的welcome页面路径，放入到pages数组中。在app.json中，pages数组是必填的。它规定小程序中所有页面的地址，同时规定了小程序启动时的首页，就是pages数组的首位所指的页面。

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

修改小程序页面标题

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

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

{
  "pages": [
    "pages/welcome"
  ],
  "window": {
    "navigationBarTitleText": "我是标题"
  }
}

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

除了页面标题文字，类似标题栏颜色、Tab栏内容等信息，都可以直接在app.json进行配置。现在，我们的app.json已经配置完毕。接下来，我们就来为小程序增加几个视觉元素。

了解WXML

插入文字

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

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

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

第一行的<!--pages/welcome.wxml-->，是一行注释。计算机在编译代码的时候，会跳过注释，不会对注释代码进行编译。

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

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

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

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

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

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

插入图片

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

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

这时，电脑会打开我们的工程文件夹。我们在文件夹里，打开我们刚才新建的image文件夹，随意将一张图片放进文件夹里面。接着，开发者工具会自动探测到文件的变化，然后重新刷新工程目录。刷新之后，我们就可以在image文件夹下，看到我们刚才放进去的文件。

之后，我们回到welcome.wxml，插入刚才放入目录中的图片。假设我们放入image目录的图片文件名称叫lab.jpg，那么我们需要在welcome.wxml文件的底部插入这段代码：

<image src="/image/lab.jpg"></image>

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

<!--pages/welcome.wxml-->
<text>Hello World</text>
<image src="/image/lab.jpg"></image>

保存后，我们就可以在模拟器中，看到整体效果了。与<text>一样，<image>也是小程序的一个视觉组件，它代表在小程序里插入一张图有所不同的是，<image>组件内不应该插入任何内容。我们应该在<image>组件的src属性中，指定需要插入在小程序里的图片。将代码保存，开发者工具会自动刷新预览。在预览中，我们可以看到图片虽然已经成功插入，但是比例似乎不太正确。

这是因为<image>本身拥有几种缩放、裁剪模式和尺寸大小，而默认尺寸为300×225px，默认模式为 [完整填充] 。在<image>组件中，增加mode，定义值为widthFix，它可以让图片比例正常，并根据设定的宽度，自动按比例调整<image>元素的高度。

<image src="/image/lab.jpg" mode="widthFix"></image>

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

给元素加 [框]

在正式开发过程中，我们会将屏幕元素分隔成不同部分，每个部分可以套用相应样式，使用独立的样式代码，以提高编码效率。例如，在传统HTML开发中，我们会利用<div>框元素对不同部分进行区分。而在小程序中，我们可以利用<view>达成同样的效果。它的使用方法与〈div〉几乎没有什么不同。

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

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src="/image/lab.jpg" mode="widthFix"></image>
</view>

这样做，我们就可以统一处理文字和图片的样式和其他操作。

在下一篇文章中，我们将会对屏幕上的这些元素做一些美化操作，并将它们换成用户的资料。