来自小程序:知晓课堂|系列培训
前言
本系列教程开始于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>