微信小程序开发（一）：环境搭建和第一个小程序创建

0 概览：

简介：微信小程序是微信里面的app，16年推出
竞品： 支付宝小程序 ，钉钉，美团，头条，抖音qq小程序
优点：1，在微信里面自由分享，2，不用下载app， 3,能快速的开发，使用微信的api接口
小程序开发和普通网页开发的区别：
1、运行环境不同
网页运行在浏览器环境中； 小程序运行在微信环境中
2、API 不同
由于运行环境的不同，所以小程序中， 无法调用 DOM 和 BOM 的 API
但是，小程序中可以调用微信环境提供的各种 API，例如： 地理定位 、扫码 、支付
3、开发模式不同
网页的开发模式：浏览器 + 代码编辑器
小程序有自己的一套标准开发模式： 申请小程序开发账号 、安装小程序开发者工具 、创建和配置小程序项目

小程序的开发，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等过程方可完成。

1 申请帐号

百度搜索“微信公众号平台” https://mp.weixin.qq.com ，然后扫码登录注册一个微信公众平台账号，账号分类有服务号、订阅号、小程序，我们选择“小程序”。

进入“小程序注册页” https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号， 获取微信小程序开发工具和AppID。

在这个小程序管理平台，我们可以在菜单 “开发”-“开发管理”-“开发设置” 看到小程序的 AppID 了 。 小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

2 安装开发工具

前往 开发者工具下载页面 ，https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ，

根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

打开小程序开发者工具，用微信扫码登录开发者工具，就可以开发微信小程序啦。

学习使用 微信开发者工具 ：

可以在 微信官方文档-小程序 ，学习小程序开发工具的使用、了解各种API接口等

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

3 创建项目

3.1 登录页

在登录页，可以使用微信扫码登录开发者工具，开发者工具将使用这个微信帐号的信息进行小程序的开发和调试。

3.2 新建项目

当符合以下条件时，可以在本地创建一个小程序项目

• 需要一个小程序的 AppID；如没有 AppID，可以选择申请使用测试号。

• 登录的微信号需要是该 AppID 的开发者；

• 需要选择一个空目录，或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时，可以选择是否在该目录下生成一个简单的项目。

条件满足后，就可以新建项目。

新建小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

3.3 导入项目

如果你已经有微信小程序，可以直接导入项目。点击顶部菜单“项目--导入项目”，可以导入已经存在的项目。

接下来我们来预览一下这个小程序的效果。

3.4 编译预览

点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的小程序。

至此，我们已经学会利用微信开发者工具 新建和导入小程序项目，可以进入小程序开发啦！

参考链接：

小程序管理平台 https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=561177314

小程序管理平台-小程序注册页 https://mp.weixin.qq.com/wxopen/waregister?action=step1

小程序管理平台-“开发”-“开发管理”-“开发设置” 看到小程序的 AppID： https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1789212155&lang=zh_CN

微信公众平台 https://mp.weixin.qq.com/

微信官方文档-小程序-开发者工具下载页面 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html