开发微信小程序-1.工具与本地环境

先前文章：

开发微信小程序-1.工具与本地环境

开发微信小程序-2.页面创建

一、引言

我为什么要学习？

它带来的好处，比如多端开发效率的提升等等，就不用我多说了，最近才学的同学肯定比我记得更清楚，所以我就只说一下我学它的目的吧。

首先我希望在制作微信小程序的过程中能用到之前已经掌握的vue，不想重新学习如何将vue项目引入微信小程序，而且担心wx-前缀和v-前缀冲突等等（没试过，只是想想就很头疼，所以就不想试了）。

其次因为开发效率，我被多端开发的优点深深吸引（就像小学时不想做数学题，老师今天说可以用计算器），虽然要掌握这个“计算器”的使用，但做作业的速度会快很多。这也是我没研究如何将 Vue 引入微信小程序的动机。

最后，不知道是不是我记错了，最近学习的东西总感觉支持很多框架，而现在查看官方文档发现是基于 Vue 开发的（见下方官网截图）。所以在学习之前可能需要确认自己是否已经掌握了 Vue。当然，如果你还没有掌握，还是可以跟着本文学习的。

总结一下上面的内容，我的项目是借鉴vue项目文档完成的，对使用vue的朋友比较友好，如果是学习其他类型，看文档更利于学习，当然也可以参考我的项目流程：）。

二、环境与工具 1、项目启动

首先我想说的是，它并不是必须的，但是可以大大提高我们的开发效率，如果你的电脑内存比较大的话，建议直接从官网下载。

官网下载地址——

接下来我要记录的是项目启动，如果不想用这个编辑软件的话，也可以使用vue-cli脚手架来启动项目，这个是官方文档关于vue脚手架的项目启动地址。

大学时用的第一个编辑软件是X版，当时不懂终端面板，就直接用白皮肤开发静态页面，所以一直没用X版。心理上对当时开发的内容有些创伤，导致现在用任何编辑软件都是用黑皮肤，但还是很怀念。

基本都是量身定制的。

我们可以用它直接创建一个项目，File-New-。

创建一个新项目，命名，放置到指定位置，点击创建。我选择了默认模板，有兴趣的可以尝试其他模板。

至此，项目就创建好了，因为是微信小程序，所以我们在微信开发者工具里进行调试。

2.微信开发者工具

前往微信官方文档-下载。

下载完成后，打开微信开发者工具，随意创建一个项目（主要是打开编辑页面），进入设置-安全设置。

开放“服务端口”，以便后续可以连接微信开发者工具，调试页面开发。

3. 连接微信开发者工具

在里面点击我们创建的项目，随意打开一个文件（告诉我们要启动哪个项目），菜单栏-运行-运行到小程序模拟器-微信开发者工具。

第一次点击会要求输入软件地址，这里不会出现，如果设置错误可以通过菜单栏-工具-设置进行修改：

找到运行配置，修改微信开发者工具的软件地址：

修改并保存后，配置完成，可以运行测试。

4. 运行

再次运行操作，完成准备工作：

结论

以上就是项目开始前的准备工作，同时由于是基于Vue开发的，所以我们在编辑项目的时候可以直接使用Vue，不需要引入其他工作，因为项目中已经有Vue了。