哈喽大家好，我是 SuperYing ，最近在研究微信小程序，打算写写 小程序入门系列 文章，如有缺漏或错误，非常欢迎小伙伴在评论区批评指正。今天我们的主题是 小程序介绍及工程创建。

简介

官方介绍:

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序提供了一个简单、高效的应用开发框架 和丰富的组件及API ，帮助开发者在微信中开发具有原生 APP 体验的服务。

与网页开发对比

小程序的主要开发语言是 JavaScript，与普通的网页开发有很大的相似性。但是仍存在以下几个方面的差异：

运行环境

网页运行在 浏览器环境 中；

小程序 运行在 微信环境 中；

API

由于 运行环境 的差异，小程序中无法使用 BOM 和 DOM API，因此 window 等浏览器环境特有的全局变量也无法使用。

小程序 中可以调用微信环境提供的各种 API，如地理定位，扫码，支付等。

开发模式

网页的开发模式是 浏览器 + 代码编辑器。

小程序 有一套自己的开发模式：

申请小程序开发账号
安装小程序开发者工具
创建及配置小程序项目

工程创建

注册小程序开发账号

若已经注册过小程序开发账号，可跳过，直接微信扫码登录即可。

注册入口

微信公众平台地址 mp.weixin.qq.com/。

浏览器打开微信公众平台 ，点击右上角立即注册即可跳转到注册页面。

选择账号类型

此处选择 小程序 。然后会跳转到一个过渡页，直接点击前往注册即可跳转到小程序注册页面。

填写信息

按照个人的实际情况，依次填写注册账号信息，包括 注册邮箱 -> 邮箱激活 -> 信息登记。

提示如果是个人学习使用，建议 信息登记 处的 主体类型 选择个人，但是 个人类型 的账号不支持 微信认证 ，微信支付 等高级接口能力。

获取 AppID

我们后续使用 开发者工具 创建项目时，需要用到 小程序开发账号 的 AppID，以将项目与小程序开发账号关联起来。

第 3 步完成注册后，即可回到首页使用微信扫码登录了。

在小程序管理页面，点击左侧「开发」-「开发管理 」菜单，选择「开发设置 」页签，即可看到 AppID 了。

开发者工具

简介

微信开发者工具 是官方推荐使用的小程序开发工具，其提供的主要功能如下：

快速创建小程序项目
代码的查看和编辑
对小程序功能进行调试
小程序预览及发布

安装

推荐下载最新、稳定版的微信开发者工具，下载页面连接如下： developers.weixin.qq.com/miniprogram...

安装过程按照提示点击下一步即可，我的是 mac 电脑，只需要双击 dmg 文件，将开发者工具 复制到应用程序即可。

创建小程序项目

微信开发者工具 安装完成后，即可使用其创建小程序项目啦。

打开 微信开发者工具，可以看到如下页面：

选择 小程序项目 ，点击右侧 加号+ 即可进入到小程序项目创建页面。

填写小程序项目相关信息
- 项目名称: 自定义即可，为项目命名。
- 目录：当前项目所在的本地文件路径。
- AppID ：我们在 注册小程序开发账号 第 4 步获取到的 AppId，可以登录 微信公众平台 控制台查看。忘记的小伙伴请向上翻阅。
- 开发模式 ：默认 小程序。
- 后端服务 ：依据自身技术要求而定，若不想自己搭建后端服务，省去服务器相关的操作步骤，可使用微信云开发，现在云开发需要支付一定的费用。若有自己的服务器，则不需要。
- 模板选择 ：微信开发者工具 内置了很多线程的小程序项目模板，根据业务分类，技术组成等可自行选择，如果有小伙伴打算尝试 ts，也有相应的 ts 模板供选择。此处我们选择 TS 基础模板 创建，来看下基础的项目结构。

上述信息全部正确填写后，点击确定按钮，即可完成小程序项目的初始创建。

界面简介

微信开发者工具 页面主要可分为五个部分：

操作栏：包括页面控制按钮 、代码编译 、预览、版本管理 、项目设置等操作。
模拟器：用于模拟项目效果，一般选择 iPhone 6/7/8 机型，不过又是模拟器效果与真机效果可能存在差异，实际效果需以真机为准。
可视化：查看小程序页面某一部分的
编辑器
调试器

操作栏左侧绿色按钮可用于开启/关闭对应的部分。

代码组成结构

项目整体结构

好啦，折腾了这么久，总算到了代码部分，我们先来看一下项目的组成：

新版小程序代码的根目录默认在 miniprogram 下，所以我们后续所有的业务代码，都是在 miniprogram 目录下编写。

components：自定义组件目录。
pages: 所有小程序页面目录。
utils: 工具性质的模块目录
app.json：小程序项目全局配置文件
app.ts: 小程序项目入口文件
app.wxss: 小程序项目全局样式文件
sitemap.json：配置小程序及页面是否允许被微信索引，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。
project.config.json：项目配置文件，如项目根目录，遍历类型，特性设置等。
project.private.config.json：项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。
tsconfig.json ：TS 配置文件，使用 TS 开发的项目路必需。

页面代码组成

小程序官方建议，把所有的小程序页面都放在 pages 目录下，以单独文件夹的形式存在。

每个页面（或组件）有 4 个基本文件组件，如下：

.json 当前页面的配置文件，可用于配置窗口外观，表现等。
.js 页面脚本文件，存放页面数据，事件处理函数等。
.wxml 页面模板结构文件。
.wxss 页面样式文件。

结语

好啦，今天的「小程序入门系列-简介及工程创建」就到这里，相信小伙伴已经对小程序的准备工作有了大致的了解，如有疑问或漏洞欢迎评论。

感谢阅读，愿你我共同进步，谢谢！！！