第二章:手把手,动手编写一个简单小程序(上)

avatar
@爱范儿

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

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

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

准备开发

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

在开发者工具中新建工程

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

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

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

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

调整配置文件

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

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

l 小程序的所有页面路径

l 小程序全局界面表现

l Tab 标签页配置

l 网络超时

l 调试模式开启或关闭

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

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

{}

保存后,我们可以看到编辑器依然在报错。这是因为 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

插入文字

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

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

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

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

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

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

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

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

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

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

插入图片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

插给元素加「框」

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

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

框元素对不同部分进行区分。而在小程序中,我们可以利用 达成同样的效果。它的使用方法与
几乎没有什么不同

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

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

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

相关阅读:

第一章:一文了解小程序

访问「知晓云」,学习更对小程序开发课程