小程序开发入门

学习技术不要光看视频,一定要动手实践。开发小程序相对来说比较容易,而且用代码来实现一些功能是一件非常有趣和让人有成就感的事情。

开始前的准备

小程序的开发有两样东西必不可少,一个是小程序开发的技术文档;还有一个就是小程序的开发者工具。

开发者工具小程序开发者工具下载地址

大家可以根据自己电脑的操作系统来下载对应的安装包进行安装。就和我们写Word、PPT文档要用Office的软件一样,我们要在开发者工具上多多动手,技术才能掌握的更加真切。

技术文档官方小程序技术文档

技术文档大家先只需要花五分钟左右的时间了解大致的结构即可,先按照我们的教学步骤学完之后再来看也不迟。官方的小程序技术文档过于全面而且详细,对于初学者或者零基础的朋友来说,我们会引导大家如何循序渐进的学习文档里的技术知识。

多看技术文档多用开发工具也是我们学习其他编程语言或技术最为重要的两点,凡是脱离技术文档和开发工具看视频、看文章以及搜集再多的资料都是舍本求末的错误做法,而这也是很多初学者的一个通病。

值得注意的是小程序的开发功能更新非常频繁,很多网上的教程内容都比较过时,而只有技术文档才是同步最新的。无论你是初学者还是高手,这个文档是我们技术开发的基础与落脚点,常读常新。

注册微信小程序

小程序的注册非常方便,打开小程序注册页面,按照要求填入个人的信息,验证邮箱和手机号,扫描二维码绑定你的微信号即可,3分钟左右的时间即可搞定。

注册页面:小程序注册页面

当我们注册成功后,就可以自动登入到小程序的后台管理页面啦,如果你不小心关掉了后台页面,也可以点击小程序后台管理登录页进行登录。

后台管理页:小程序后台管理登录页

小程序和微信公众号的登录页都是同一个页面,他们会根据你的不同的注册邮箱来进行跳转,这也意味着公众号和小程序不能同时登录哦~

当我们进入到小程序的后台管理页后,点击左侧菜单的设置进入设置页,然后再点击开发设置,在开发者ID里就可以看到AppID(小程序ID),这个待会我们有用。

注意小程序的ID(AppID)不是你注册的邮箱和用户名,你需要到后台查看才行哦~

体验模板小程序

安装完开发者工具之后,我们使用微信扫码登录开发者工具,然后使用开发者工具新建一个小程序的项目,

  • 项目名称:这个可以根据自己的需要任意填写;
  • 目录:大家可以先在电脑上新建一个空文件夹,然后选择它;
  • AppID:就是之前我们找到的AppID(小程序ID)(也可以下拉选择AppID)
  • 开发模式为小程序
  • 后端服务选择不使用云服务,
  • 语言为JavaScript

点击新建确认之后就能在开发者工具的模拟器里看到模板小程序,在编辑器里看到这个小程序的源代码。

接下来,我们点击开发者工具的工具栏里的预览图标,就会弹出一个二维码,使用微信扫描这个二维码就能在手机里看到这个小程序啦。

小程序的文件结构

这个模板小程序非常简单,但是它的文件结构却是完整的,这个文件结构也是所有小程序文件结构的基础。关于文件结构的介绍大家可以参考一下官方文档(不要超过五分钟)。

官方文档小程序文件结构

在我们新学一门技术时,会遇到很多我们之前没有接触过的新名词,这个时候切忌死记硬背,在你没有动手实践的时候,你是很难理解这些知识的,建立在没有理解的基础之上去记忆只会加重你的学习负担。

体验开发者工具

关于开发者工具的详细介绍,大家也可以花几分钟的时间在动手体验开发者工具的同时,参阅一下官方文档,了解一下开发者工具的界面方面的知识,理解多少是多少。

官方文档开发者工具界面

大家只需要熟悉一下开发者工具的界面即可,对于不理解的地方,以后随着你开发经验的累积,你再来查看文档,你的理解就会加深啦。

小程序的公共设置

在开发文档的小程序文件结构里有提到,小程序有三个主体文件,分别是app.js、app.json和app.wxss,而其中app.json的作用是控制小程序的公共设置。这一节我们来详细了解一下小程序的公共设置,怎么了解呢,当然还是看技术文档。

技术文档小程序的公共设置文档

然后我们在开发者工具里打开示例小程序,通过结合示例小程序的源代码来加深这个对小程序公共设置的理解。对于初学者而言,我们要了解app.json的三个配置项:

pages配置项

它的功能是设置页面的路径,也就是我们在小程序里写的每一个页面都需要填写在这里。

那什么是路径呢?比如我们点击这个示例小程序组件视图容器-view页面的源代码在”page/component/pages/view/view”这个页面里,我们通过开发者工具在小程序的文件结构去找到这个页面,你就对路径这个概念有所理解啦~

同时你也会发现page文件夹下面的每一个页面都写在app.json的pages配置项里面。

我们希望大家通过pages配置项能够了解小程序的前端页面(就是模拟器或在微信里面我们看到的页面)和小程序的文件结构以及源代码之间的密切关系,这样你对一个完整的小程序是如何做出来的就会有一个宏观的理解啦~

在pages配置项的技术文档里有这样一句:“数组的第一项代表小程序的初始页面”,是什么意思呢,大家可以把”page/component/pages/view/view”或”page/API/index”这个页面路径剪切粘贴到”page/component/index”的前面也就是放到数组的第一项,再来模拟器里看一下小程序的变化。哦,原来pages配置项的第一项就是小程序的首页啦。

json语法

和在办公领域的docx、pdf这些文件一样,json文件在计算机领域的应用非常广泛。json的语法非常简单,大家只需要对照app.json的写法来了解即可。json文件的功能有点类似于办公领域的excel,它是用来存储和传输数据信息的。

大家可以对比app.json文件来了解json的语法。

  • 大括号{}保存对象,我们来看一下,哪些地方用到了大括号{},{}里面就是对象;
  • 中括号[]保存数组,我们可以看到中括号[]里有每个页面的路径,那这些页面路径就是数组啦;数组里的值都是平级的关系
  • 各个数据之间由逗号,隔开;
  • 字段名称与值之间用冒号:隔开,名称在前,取值在后;
  • 字段名称用双引号””给包着;

注意,这里所有的标点符号都需要是英文状态下的,也就是我们经常听说的全角半角里的半角状态,不然会报错哦

新建一个小程序页面

大家用开发者工具打开模板小程序,现在我们来通过pages配置项来新建一个小程序的页面,比如首页home,也就是把pages配置项改成如下代码:

我们看一下开发者工具的模拟器就能看到我们新建的这个首页了,大家再来看看小程序的文件结构,是不是在pages下面多了一个home的文件夹?而且这个文件夹还自动新建了四个页面文件。

大家要注意json语法,每个页面后都记得要用逗号,隔开,如果你的文件代码写错了,开发者工具会报错。

我们删掉文件目录下的index和logs文件夹,然后把app.json的pages配置项修改为

也就是我们删掉了index和logs页面配置项的同时,又新增了三个页面,list、partner、more,这三个文件夹名大家可以根据自己需要来命名。

设置状态栏、导航条、标题、窗口背景色

window配置项可用于设置小程序的状态栏、导航条、标题、窗口背景色。大家可以在官方文档里面看到window配置项有很多个属性,每个属性都对应着类型、默认值以及相关的描述,

这个技术文档这里可能有一些技术名词你不是很懂,但你可以先不用深究,以后这些技术概念会在日后学习的过程中不断遇到,你也会慢慢理解的~

我们打开模板小程序的window配置项,这里我们看到它的 navigationBarBackgroundColor值是 #F8F8F8,通过技术文档我们了解到这个是设置导航栏背景颜色。还有其他属性,它所代表的意思大家都可以参考这个技术文档来理解,但是不要死记硬背哦,写代码可不是我们以前的闭卷考试,没记住没理解的地方都可以随时查阅技术文档。

这里有一个计算机名词,十六进制颜色值,这是一个非常基础而且用途范围极广的计算机概念,大家可以自己搜索了解一下。除了十六进制颜色值,还有RGB颜色值,也需要大家一并了解。

大家把下面这些window配置项写到模板小程序以及示例小程序里,大家看看是什么效果。

如果大家发现为什么示例小程序的导航栏标题文字内容没有变化,这是为什么呢?大家可以看一下小程序的公共设置文档里关于 page.json的说明。原来每一个小程序页面也可以使用 .json文件来对本页面的窗口表现进行配置。大家找到路径page/component/index.json里的内容就能明白为什么啦~

了解tabBar配置项

tabBar就是我们小程序底部的这个带有图标的切换tab了,关于tabBar大家可以阅读小程序的公共设置文档 里关于tabBar的内容。

通过tabBar配置项,我们可以配置tabBar的默认字体颜色、选中过的字体颜色、背景色以及边框颜色(注意关于边框颜色的技术文档说明)以及tabBar的位置。

还有一个比较重要的属性就是list,它是一个数组,决定了tabBar上面的文字,图片,以及点击之后的跳转链接。

我们在示例小程序的开源代码里看到这个iconPath和selectedIconPath都是一个路径,那大家根据这个路径在文件结构和电脑的文件夹里找一下图片的位置吧~

右键点击文件结构,选择“在硬盘打开”也可以看到该文件在我们电脑的文件夹里的位置啦

icon资源

底部的tabBar都是一个小小的icon,在官方技术文档里我们了解到icon 大小限制为40kb,建议尺寸为 81px * 81px ,不懂设计icon的可以看设计界比较常用的矢量图标库。

icon资源:iconfont阿里巴巴矢量图标库

大家可以找一些icon图标,并下载下来,然后在模板小程序的根目录下新建一个image的目录,我们然后模板小程序的app.json的{}里添加tabBar配置项,这个写法可以参考示例小程序的app.json。

注意,这里tabBar的图片是有4组8张,大家可以在iconfont阿里巴巴矢量图标库除了选择图标还可以选择不同的颜色来下载,如果image文件夹里没有图片,开发者工具会报错的哦

小程序还有两个主体文件app.js和app.wxss,我们之后会继续学习~

小程序的页面组成

在开发文档的小程序文件结构里提到,一个小程序页面由四个文件组成,分别是:js、wxml、wxss以及json,大家可以根据示例小程序pages配置项所展示的page路径来展开文件夹,每个页面的文件夹下都有这四个文件,而且文件名称都是一样的。

大家在学习技术文档的时候,通过一些具体的实际案例可以加深你对一些概念的理解。如果只是光看文档,不自己动手在源代码下查看和体验一下,这些知识点是很难在你脑海里有什么印象的。

关于这四个文件,其中json我们前面已经提过,其他三个文件我们之后会来学习。

共有 0 条评论

可以使用微信、微博等 登录发表评论