微信小程序新手入门教程一：零基础上手

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。它提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

小程序与普通网页开发的区别

1.开发环境不同。

网页运行在浏览器环境中，而小程序运行在微信环境中。

2.API 调用不同。

小程序不能调用 DOM 和 BOM 的 API。但是它可以调用微信环境提供的如扫码支付、地理定位等API。

3.开发模式不同

传统的网页的开发模式主要是浏览器结合代码编辑器大方式，而小程序的开发主要借助于微信开发者工具，需要申请appid。

创建微信小程序项目

首先需要进行注册，打开 微信公众平台，点击右上角的“立即注册”即可进行注册。

 选择小程序：

 选择前往注册：

 以上四步小程序的开发流程，完成注册后就能获得自己的AppID和AppSecret，开始开发自己的小程序啦！

接下来就是填写个人信息，需要特别注意的是，关联的邮箱需要满足各种条件，简单来说就是选择一个没有和微信产生过关联的邮箱进行注册就OK（因为我的QQ邮箱已经绑定了微信公众号，所以特意新申请了一个邮箱进行注册）。

按照流程注册成功后，下次就可以通过绑定的微信，扫码登录了。

理论上需要先完善个人信息，不过没有想好也没关系，不填写该部分不影响我们开发，只要在最终上线前完成就好。

 左侧侧边栏主要是对小程序的管理以及数据统计之类的功能，现阶段也不必关心，只要关注一下“开发”里的“开发管理”项。

这里有我们的AppID和小程序秘钥，这两个东西非常重要，可以先存下来防止每次都要到到开发者平台找。

之后需要下载微信开发者工具微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)。微信开发者工具是官方推荐使用的小程序开发工具，可以快速创建小程序项目、进行代码的查看和编辑，调试小程序功能，完成小程序的预览和发布。重点是免费！！下载和安装过程都很简单，无脑点击下一步就行了（安装路径有需要的可以更改一下）。这里推荐下载稳定版~

 下载完成后使用绑定的微信扫码登录即可进入到主页面。

点击 “+”号即可创建第一个微信小程序！

五分钟体验小程序——Hello miniApp！

点击“+”后，进入到了这个页面：

项目名称和项目目录根据自己所需要的填写就可以了，需要注意的是这里的AppID，就是我们上面提到的那个，当然使用测试号也可以，系统会随机生成一个AppID供你使用，适合懒得注册只想体验一下的用户，但是不支持小程序的发布上线。 不过不用担心，我们可以随时更改AppID，使用测试号创建项目后再改回个人号也可以。

项目创建好后就是这个样子啦，左侧这个手机一样的界面就是供我们进行样式预览的，值得一提的是微信小程序支持热重载，方便了很多。我们也可以点击小眼睛图标进行扫码预览，体验真机效果。

在右上角的详情里面还能看到我们的小程序的基础信息，包括上面说到的修改AppID也是在这里哦。

 这里就是项目的目录了，可以概括为描述整体程序的顶层 app 脚本，以及描述各个页面的 page 脚本。其中app.json文件用于整个项目的配置，对于所有页面都有效，同理app.ts和app.scss均作用于所有页面，通俗的说，ts文件可以看作我们熟悉的js文件，scss文件可以看作css文件，pages里面wxml文件就是html文件了（这个理解并不全对，只是适合小白快速入门）。准确的说，各个文件的作用如下：

1. pages 用来存放所有小程序的页面
2. utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
3.  app.js 小程序项目的入口文件
4.  app.json 小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

在pages文件夹里，存放着所有的单独页面，通常我们会把一个页面单独放在一个文件夹里，每个文件夹包括四个文件：

1. .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
2.  .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
3.  .wxml 文件（页面的模板结构文件）
4. .wxss 文件（当前页面的样式表文件）

是不是觉得似曾相识？就是我们上面介绍过的那几个app.xx文件，只不过作用范围仅针对当前页面有效，适合更细节的处理。

接下来让我们进入主题，体验我们的第一个小程序页面！

右键点击pages文件夹，创建一个新的文件夹demo，再在新的文件夹中创建文件demo.xx文件（就是上面的四个）,也可以在 app.json的pages 中新增页面的存放路径（记得在上一条的末尾加上“,”），小程序开发者工具会帮我们自动创建对应的页面文件。关于.json配置文件的具体功能和用法，下一篇再详细介绍，这里先简单体验一下。把新建文件的对应路径放到pages的第一行，即可在左侧的预览中看到对应页面。

在demo.wxml文件中，新增一行代码，保存后即可看到左侧出现了Hello miniApp!字样。

Hello miniApp!

至此，我们已经浅浅的摸到了微信小程序开发的门框了，但是你是否有一个疑惑，框架里那些各式各样的.json文件是干什么的呢？里面那堆让人头秃的代码又是什么意思呢？下一步我们就来学习配置文件的相关内容和微信小程序的基本模板语法。