小程序开发入门

学习技术不要光看视频、教材，一定要动手实践。只有实战，技术才会变得简单。小程序相比其他编程语言来说，可以让我们更快做出一些技术产品。

开始前的准备

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

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

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

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

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

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

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

注册微信小程序

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

注册页面：小程序注册页面

注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦，也就是需要你使用一个其他邮箱才行。

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

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

小程序和微信公众号的登录页都是同一个页面，他们会根据你的不同的注册邮箱来进行跳转。

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

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

新建一个模板小程序

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

• **项目名称：**这个可以根据自己的需要任意填写，可以是中文；
• **目录：**大家需要先在电脑上新建一个空文件夹，然后选择这个空文件夹；
• AppID：就是之前我们找到的AppID(小程序 ID)（也可以点击右边的下拉框，下拉选择 AppID）
• 开发模式为小程序
• 后端服务选择不使用云服务，注意为了教学的需要，先选择不使用云服务
• 语言为 JavaScript

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

小任务： 分别点击开发者工具工具栏上的模拟器、编辑器、调试器，以及下面的手机下拉框、显示百分比，看看有什么效果。找到开发者工具的菜单栏，在项目菜单栏里找到查看所有项目，在设置菜单栏里找到外观设置，切换一下主题、调试器主题（深色、浅色）。

接下来，我们点击开发者工具的工具栏里的预览图标，就会弹出一个二维码，使用你的手机微信扫描这个二维码就能在微信里看到这个小程序啦。以后我们要自己开发一个小程序都可以按照上面的操作新建一个模板小程序，然后在这个的基础上修改开发。

如果你没有使用微信登录开发者工具，以及你的微信不是该小程序的开发者是没法预览的哦。这个Hello World 模板小程序非常简单，但是它的文件结构却是完整的。

开通云开发服务

点击微信开发者工具的“云开发”图标，在弹出框里点击“开通”，同意协议后，会弹出创建环境的对话框。这时会要求你输入环境名称和环境 ID，以及当前云开发的基础环境配额（基础配额免费，而且足够你使用哦）。

建议你环境名称可以使用 xly、环境 ID自动生成即可，当你的云开发环境出现问题的时候，你可以提供你的环境 ID，云开发团队会有专人为你解答。

按照对话框提示的要求填写完之后，点击创建，会初始化环境，环境初始化成功后会自动弹出云开发控制台，这样我们的云开发服务就开通啦。大家可以花两分钟左右的时间熟悉一下云开发控制台的界面。

文件结构与页面组成

在了解以下知识时，大家只需要结合开发者工具的编辑器对照着介绍，一一展开文件夹、用编辑器查看文件的源代码，大致浏览一下即可。这就是实战学习的方法（和看书、看视频的学习方法不同），千万不要死记硬背哦，你以后用多了自然就记住啦~

小程序的文件结构

在开发者工具的编辑器里可以看到小程序源文件的根目录下有 app.js、app.json 和 app.wxss，这是小程序必不可少的三个主体文件，下面我们来大致了解一下小程序文件结构（只需要大致了解就可以啦~不理解也没有关系）。

• app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等；
• app.wxss：小程序的公共样式表，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等样式；
• app.js：小程序的逻辑（这个可以先放着，不用管）
• pages 文件夹：这里存放着小程序的所有页面，展开 pages 文件夹就可以看到有 index 和 logs 两个页面文件夹；

小任务：在结合开发者工具实战了解了上面的知识之后，你明白了哪个文件夹是小程序的根目录吗？

小程序的页面组成

在每一个页面文件夹里都有四个文件，这四个文件的名称都是一样的，它们分别为：

• json 文件，和上面的 app.json 作用基本相同，只是 app.json 控制的是整个小程序的设置，而页面的 json 文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；
• wxml 文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；
• wxss 文件，小程序的页面样式，和 app.wxss 一样是控制样式，而页面的 wxss 文件是控制单个页面的样式；
• js 文件，这个是控制小程序页面的逻辑（这个可以先放着，不用管）

小程序的全局配置

在前面我们已经提到，app.json可以对整个小程序进行全局配置，而配置的依据就需要我们参考技术文档了。

技术文档：小程序全局配置

打开上面的小程序全局配置技术文档，里面会有很多你看不懂的名称，这是非常正常的，大家也不需要记，只需要花两三分钟时间快速浏览一下即可，后面我们会教大家如何结合技术文档来实战学习。

json 语法

在对小程序进行配置之前，可以使用开发者工具打开 app.json 文件，对照着下面的 json 语法来进行理解：

• 大括号**{}保存对象**，我们来看一下 app.json，哪些地方用到了大括号{}，{}里面就是对象；
• 中括号**[]保存数组**，我们可以看到中括号[]里有“pages/index/index”等（这是小程序页面的路径），那这些页面路径就是数组啦；数组里的值都是平级的关系；
• 各个数据之间由英文字符逗号,隔开，注意这里的数据包括对象、数据、单条属性与值，大家可以结合 app.json仔细比对逗号,出现的位置，平级数据的最后一条数据不要加逗号,，也就是只有数据之间才有逗号。
• 字段名称（属性名）与值之间用**冒号:**隔开，字段名称在前，字段的取值在后；
• 字段名称用**双引号””**给包着；

注意，这里所有的标点符号都需要是英文状态下的，也就是我们经常听说的全角半角里的半角状态，不然会报错哦。**很多之前没有接触过编程的童鞋经常会犯这样的错误，一定要多多注意！**当我们要输入编程里的标点符号时，一定要先确认一下，你的输入法是汉语形态，还是字母形态，如果输的是汉字形态，一定要切换哦~

设置小程序窗口表现

使用开发者工具打开 app.json 文件，可以看到如下代码里有一个window的字段名（如前面所说，字段名要用双引号””包着），它的值是一个对象（如前面所说，{}大括号里的就是对象），可见对象可以是一组数据的集合，这个集合里包含着几条数据。

"window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle": "black"

  },

这些就是window 配置项，可用于设置小程序的状态栏、导航条、标题、窗口背景色。

小任务：打开小程序全局配置查看 backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle 的配置描述（大致了解即可）。

使用开发者工具的编辑器将以上属性的值改成如下代码（这里的 backgroundTextStyle 只有在设置了下拉刷新样式时才会比较明显，以后会介绍）

"window": {

    "backgroundTextStyle": "dark",

    "navigationBarBackgroundColor": "#1772cb",

    "navigationBarTitleText": "云开发技术训练营",

    "navigationBarTextStyle": "white"

  },

添加完成之后记得保存代码哦，文件修改没有保存会在标签页有一个小的绿点。可以使用快捷键（同时按）Ctrl 和 S 来保存（Mac 电脑为 Command 和 S）。

然后点击开发者工具的编译图标，就能看到更新之后的效果啦，也可以点击预览，使用手机微信扫描生成的二维码查看实际效果。

小任务： navigationBarBackgroundColor 值是 #F8F8F8， #1772cb，这是十六进制颜色值，它是一个非常基础而且用途范围极广的计算机概念，大家可以搜索了解一下：1、如何使用电脑版微信、QQ 的截图工具取色（取色颜色会有一点偏差）；2、RGB 颜色与十六进制颜色如何转换；

新建小程序页面

新建页面的方法有两种，一种是使用开发者工具在pages 文件夹下新建；还有一种是通过 app.json 的 pages 配置项来新建，我们先来看第 2 种方法。

通过 app.json 新建页面

pages 配置项是设置页面的路径，也就是我们在小程序里写的每一个页面都需要填写在这里。使用开发者工具打开 app.json 文件，在 pages 配置项里新建一个 home 页面（页面名称可以是任意英文名），代码如下：

"pages/home/home",

"pages/index/index",

"pages/logs/logs"

大家写的时候可以回顾一下 json 语法，每个页面后都记得要用逗号,隔开，如果你的文件代码写错了，开发者工具会报错。

在模拟器就能看到我们新建的这个首页了，会显示如下内容：

pages/home/home.wxml

大家再来看看小程序的文件夹结构，是不是在 pages 文件夹下面多了一个 home 的文件夹？而且这个文件夹还自动新建了四个页面文件。

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

"pages": [

  "pages/home/home",

  "pages/list/list",

  "pages/partner/partner",

  "pages/more/more"

],

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

**小任务：**这些新建的页面文件都在电脑上的什么呢？比如在开发者工具右键点击 home 文件夹或者 home.wxml，选择“在硬盘打开”就可以看到该文件在我们电脑的文件夹里什么的位置啦