学习技术，不要只看视频、看课本，一定要实践，实践了技术才会简单。相比其他编程语言，小程序能帮助我们更快的创造出一些技术产品。

在你开始之前

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

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

你可以根据自己电脑的操作系统下载对应的稳定版本安装包进行安装。就像我们用来写Word、PPT文档的软件一样，开发者工具也需要多加练习，才能更透彻地掌握这项技术。

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

你只需要花五分钟左右的时间就能了解技术文档的大致结构，按照我们的教学步骤学完再看也不迟。官方的小程序技术文档太全面太详细了，对于初学者或者没有基础知识的朋友，我们会一步步指导你如何学习文档中的技术知识。

多看技术文档、多使用开发工具也是我们学习其他编程语言或者技术时最重要的两点，光看视频、看文章、多收集资料而没有技术文档和开发工具都是本末倒置的错误做法，这也是很多初学者的通病。

值得注意的是，小程序开发功能更新非常频繁，网上很多教程已经过时，只有技术文档是最新的。不管你是初学者还是专家，技术文档都是我们技术开发的基础和立足点，多看技术文档，才能学到新东西。

注册微信小程序

注册小程序非常方便，打开小程序注册页面，按要求填写个人信息，验证邮箱和手机号，扫描二维码绑定微信账号，大概3分钟就可以完成。

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

注册小程序时，不能使用已经注册过微信公众号或微信开放平台的邮箱，需要使用其他邮箱。

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

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

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

进入小程序后台管理页面后，点击左侧菜单的开发，进入设置页面，然后点击开发设置，在开发者ID里可以看到（小程序ID），这个我们后面会用到。

请注意，小程序ID并非你注册的邮箱和用户名，需要去后台查看。

创建新的模板小程序

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

点击New确认之后，可以在开发者工具的模拟器中看到一个简单的模板小程序，同时在编辑器中看到这个小程序的源代码。

小任务：点击开发者工具工具栏上的模拟器、编辑器、调试器，以及下方的手机下拉框和显示百分比，看看它们有什么效果。找到开发者工具的菜单栏，在 菜单栏中找到 View All ，在 菜单栏中找到 ，切换主题和调试器主题（深色、浅色）。

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

如果你没有使用微信登录开发者工具，并且你的微信不是小程序的开发者，那么你是无法预览的。这个模板小程序很简单，但是它的文件结构是完整的。

推出云开发服务

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

建议您使用xly和环境ID自动生成环境名，当您的云开发环境出现问题时，您可以提供您的环境ID，云开发团队会为您解答。

根据对话框中的提示填写完信息后，点击创建，初始化环境。环境初始化成功后会自动弹出云开发控制台，开通我们的云开发服务。您大约需要花两分钟的时间熟悉云开发控制台的界面。

文件结构和页面组成

在学习后面的知识的时候，只需要结合开发者工具的编辑器，参考介绍，逐个展开文件夹，用编辑器查看文件源代码，大致看一眼就可以了。这就是实践学习的方法（不同于看书或者看视频的学习方法），不要死记硬背，用多了自然就记住了~

小程序的文件结构

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

小任务：了解了以上知识结合开发者工具的实际使用后，你是否了解小程序的根目录是哪个文件夹呢？

小程序页面组成

每个页面文件夹中有四个文件。这四个文件的名称相同。它们分别是：

小程序全局配置

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

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

打开上面的小程序全局配置技术文档，会有很多你看不懂的名字，这很正常，不需要记住，花两三分钟快速看一眼就行。后面我们会教大家如何结合技术文档进行实战学习。

JSON 语法

在配置小程序之前，你可以使用开发者工具打开app.json文件，参考如下json语法进行理解：

注意这里的标点符号全部需要是英文的，也就是我们经常听到的全角半角状态中的半角状态，不然会报错。很多以前没有接触过编程的同学经常会犯这样的错误，一定要多加注意！我们在编程中想要输入标点符号的时候，首先要确认你的输入法是中文形式还是字母形式，如果是汉字形式输入的话，一定要切换一下哦~

设置小程序窗口行为

使用开发者工具打开app.json文件，可以看到如下代码中有一个字段名（前面提到过，字段名要用双引号“”）括起来，它的值是一个对象（前面提到过，对象在{}括号中）。可以看出，一个对象可以是一个数据的集合，里面包含了若干条数据。

"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" },

这些是可以用来设置小程序的状态栏、导航栏、标题、窗口背景颜色的配置项。

小任务：打开小程序全局配置查看、、xt、le的配置说明（有个大概的了解就可以）。

使用开发者工具的编辑器将上述属性的值改为如下代码（这个只有在设置下拉刷新样式的时候才会更加明显，后面会介绍）

"window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#1772cb", "navigationBarTitleText": "云开发技术训练营", "navigationBarTextStyle": "white" },

添加完代码记得保存，如果文件修改没有保存，tab页上会有一个小绿点，可以使用快捷键（同时按下Ctrl和S）保存（Mac上是S）。

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

小任务：数值是#，#，也就是十六进制的颜色值，是一个非常基础的计算机概念，用途非常广泛，大家可以搜索了解一下：1、如何在电脑上使用微信、QQ的截图工具截取颜色（截取的颜色会稍微有偏差）；2、如何将RGB颜色转化为十六进制颜色；

创建新的小程序页面

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

通过app.json创建新页面

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

"pages/home/home", "pages/index/index", "pages/logs/logs"

写的时候可以检查一下JSON语法，记得每个页面用逗号隔开，如果你的文件代码有错，开发者工具会报错。

你可以在模拟器中看到我们新创建的主页，它会显示以下内容：

pages/home/home.wxml

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

我们删除文件目录中的和logs文件夹，然后修改app.json的配置项为：

"pages": [ "pages/home/home", "pages/list/list", "pages/partner/partner", "pages/more/more" ],

也就是说，我们删除了和日志页面的配置项的同时，增加了三个新的页面（列表、、等，您可以根据需要为这三个页面命名）。

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