「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」
引子
如果在2021年,你想开发一个微信小程序,需要准备什么样的开发环境呢?开门见山,答案就是——你只需要一个官方的开发者工具即可,下载链接在 这里
只需要这一个就够了吗?没错,接下来我们来看一下如何使用这个一个工具完成小程序开发的所有流程。
小程序注册
让我们打开下好的微信开发者工具,然后来到创建项目的界面,这里可以创建新的小程序项目。当然,如果已经有小程序项目,可以直接导入(比如你可以从github上随便下载一个别人开发好的小程序项目)
每个小程序都需要有一个唯一标识,叫做AppID,你可以理解为它是小程序的身份证号。这个AppID是和邮箱绑定的,一个邮箱只能关联一个小程序。如果没有的话,可以点击上图的注册按钮,来到下图所示的地方进行注册。
AppID就像我们的身份证号一样,可以唯一标识我们每个人,属于比较重要的隐私信息,所以不要轻易泄露这个东西。
小程序管理后台
当你拥有一个小程序后,微信会提供一个网页后台用来管理你的小程序相关信息,地址是 这里
这是一个功能强大的后台管理系统,基本涵盖了所有你对于小程序的管理功能,每个功能的使用也比较易懂,所以这里会是你日后管理自己小程序的大本营。
另外,在最下方的设置项有一些很重要的信息,比如小程序AppID和绑定的邮箱,还有原始ID。原始ID是另外一个比较重要的信息,某些特殊场景下会用到。如果你不记得自己小程序的相关信息,可以登录后台来查看这些信息。
微信开发者工具
那么介绍完管理后台,我们回到微信开发者工具,填入正确的AppID,就可以打开我们的小程序项目了
这是一个功能强大的开发工具,拥有几乎所有你开发小程序所需要的功能,比如写代码、调试、文件编辑、查找、发布等等。后续我们会一一介绍这些功能的使用,现在可以先对它建立一个整体的认识。
不要看到它觉得复杂就退缩,页面上的菜单多是因为功能丰富,它就像PS软件一样,是一个专业的软件,为你提供做某件事的全部功能,使用它你可以开发出一款属于自己的微信小程序,这是不是很有趣呢。
小程序文件目录
接下来,我们首先介绍一个最重要的部分——文件目录,这里存放着小程序相关的所有文件。
它就和你电脑上的任何一个文件夹一样,只不过你的文件夹里可能存放的是一些word文档、ppt或者照片,而它则存放着微信开发者工具可以认识的小程序文件,比如代码、样式文件、数据文件、配置文件等等。
这些文件大多是我们平常所见到的普通文件,只不过因为某些特定文件的存在,它们组合起来可以被小程序开发工具认为是小程序的一部分。
甚至你可以不用微信开发者工具浏览它们,而去到你电脑的文件夹里查看这些文件长什么样,位置就在一开始我们创建小程序所指定的目录。如果你不记得,可以点击右上角的详情菜单,然后展开项目的详情面板,这里有小程序存放的具体位置,点击它就可以打开小程序项目在你电脑本地的文件夹。
这就是所谓的微信小程序开发者工具能够认识的文件结构,这是我们在创建小程序项目时,工具为我们创建好的。如果你自己一一创建这些文件,工具也是能认识的。
小程序文件介绍
了解完整体的文件目录结构以后,我们回到开发工具深入到一些重要的文件里面看看。
项目配置文件
其中关于小程序项目配置信息,都存储在project.config.json这个文件中。
这个文件是以.json作为后缀名的,这种文件我们称为JSON,读音同英文名(Jason)。它的作用是存储程序数据,它的基本格式就是左侧一个带双引号的名称,然后跟着一个冒号,在右侧存放着这个名称所对应的内容。然后整个文件内容的最外层是一对英文的大括号或者中括号(记住,当进入程序的世界,符号都要使用英文符号,用中文符号会无法解析)
看解释比较复杂,我们来举一个简单的例子,比如下方就是一个正确的JSON格式
{
"name": "小程序"
}
然后回到project.config.json,这里面长长的那部分都是"setting"的内容,这里其实就是存储着你当前小程序开发工具的配置信息,其对应关系如下图
你可以随意勾选右侧的配置项,看看project.config.json中是不是产生的相应的变化,这个动作是微信开发者工具自己完成的。
小程序配置信息
注意,小程序和小程序项目是两个词。小程序指的是我们平常所使用的小程序背后的程序功能内容,而小程序项目则是包括小程序功能在内,及其他所有有关小程序开发的内容。
我们上面介绍的是小程序项目的配置文件,所以里面包含开发者工具配置、AppId在内的有关小程序项目的内容。
而接下来要介绍的是小程序相关的文件,其中文件面板可以看到的app.js、app.json、app.wxss和pages这些都属于小程序的程序代码。
我们先点看app.json来看
这个JSON文件存储了小程序最终展示给用户的一些基本信息,比如小程序包含的页面,就是pages里所存储的内容,而其中第一项则会是小程序的首页。
另外还有window里存储了一些有关小程序整体样式的信息,比如navigationBarTitleText的内容则是小程序顶部的名称,如下图
我们可以试着修改一下它的内容,然后点击上方的编译,即可看到修改后的效果
小结
好了,截止目前,我们已经了解了开发小程序所需要的一切环境准备。后面的内容则是写代码的环节了,我会在下一篇进行讲解。
我们回顾一下开发小程序所需要的环境准备
这就是你开始开发一款小程序所需要的全部准备工作了,如果你想继续了解如果从零开发一款属于自己的小程序,就请继续关注后续的篇章吧。