教女朋友微信小程序（一）

前言

本人第一次写博客，微信小程序也只是看B站的一些教学视频学习了一下，至于为什么要写这篇文章，是因为要教女朋友微信小程序，担心自己教的时候没有条理，特此写下本文，一来巩固一下本人的基础，二来在教女朋友的时候可以有参考。

我学习的视频是黑马的下面的这两套视频：

零基础玩转微信小程序【黑马程序员】

28节课快速玩转微信小程序【黑马程序员】

学习微信小程序开发最好有前端基础（三剑客：HTML、CSS、JS），如果学过一些前端框架如Vue等就更得心应手了。（头发都掉光了…）

本章内容

1. 微信小程序的基本介绍
2. 微信小程序的开发准备
3. 创建第一个微信小程序

微信小程序的基本介绍

微信⼩程序，简称小程序，英⽂名 Mini Program，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤。

全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。

我们来看看官方微信小程序体验：

查看小程序示例源码

不啰嗦了，直接开干！！！

微信小程序的开发准备

工欲善其事，必先利其器，开发微信小程序需要准备相应的环境。

注册账号

访问注册页面，耐心完成注册即可，十分简单，在这就不详谈了。

安装开发工具

用到的开发工具有：

1. 微信开发者工具（官方、必需）：微信开发者工具下载地址

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。开发者工具中自带模拟器，很方便我们调试和预览。

2. WebStorm（第三方）：WebStorm下载地址

本人使用的是WebStorm，因为本人用惯JetBrains系列产品，当然你也可以使用idea或vscode等开发工具，微信开发者工具自带的代码补全功能相对较差，使用第三方的开发工具只是为了提高开发效率，当然你也可以纯用微信开发者工具敲代码，比较累而已。

获取AppID

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 AppID ，所以在注册成功后，可登录微信公众平台，然后获取你的AppID，步骤如下：

请把你的AppID悄悄地保存起来，不要给别⼈看到😄。

创建第一个微信小程序

在所有准备工作都完成之后，我们就可以正式进入小程序的世界啦！！！

打开微信开发者工具

注意 第⼀次登录的时候 需要扫码登录，拿你注册了小程序的微信扫一扫就行了。

新建小程序项目

• 填写好项目名称、项目存放的目录以及AppID（本章测试项目先我们不用AppID，先使用测试号进行开发，反正在开发者工具里也可以改AppID）
• 开发模式可以选择小程序或者插件，这里我们选择小程序，到后期想开发插件可以在这里改成插件
• 语言可以选择JavaScript或者TypeScript，看你会哪个就选哪个就行了
• 都填写好之后点击右下角新建按钮就可以创建我们的小程序啦

如果这里选的不是测试号，就会是下图的样子，那么我们可以选择使用云开发和不使用云开发

云开发和普通开发的区别，详情可以参考这里，总之使用云开发对新生友好一点，不用自己去实现后台，由于我们一开始的学习很基础所以我们也用不到小程序的云开发功能。

创建好之后会是这个样子：

至此我们的第一个小程序就创建成功了！！！

我们还可以点击左边模拟器的“获取头像昵称”，允许授权之后，会显示你的微信头像：

这一章的内容到这里就结束了，下一章将对微信开发者工具和小程序结构目录进行介绍。