两种微信小程序开发工具使用教程

微信小程序是一种轻量级的应用程序，可以在微信中直接运行，用户不需要安装即可使用。小程序开发工具是开发微信小程序所必须的，目前主要有两种：微信小程序开发者工具和VS Code插件：wepy-cli。本文将对两种开发工具进行介绍和使用教程。

一、微信小程序开发者工具

微信小程序开发者工具是微信开发团队推出的一款集开发、调试、预览于一体的IDE，支持Windows、macOS、Linux多个操作系统。该工具能够多方位地提升小程序开发效率，满足开发人员的需求。

1.安装微信小程序开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载完成后，双击安装包进行安装即可。安装完成后，可以在启动菜单中找到“微信开发者工具”并启动。

2.创建新的小程序项目

启动微信小程序开发者工具后，我们可以通过菜单栏上“项目”–“新建项目”来创建一个新的小程序项目。

在新建项目时，需要填写以下参数：项目名称、AppID、项目路径、项目类型、是否建立云开发等。

3.开发小程序页面

在项目创建完成后，可以在工具的“编辑器”界面进行小程序页面的开发。开发者可以通过添加文件夹、新建文件等方式来构建项目目录结构，然后在页面中编写相关代码。

在编写过程中，可以通过工具自带的调试工具来实时调试检测代码的运行效果。 除此之外，还可以通过调试工具调试网络请求接口等。

4.预览小程序

开发者在编写代码之后，可以通过“预览”按钮来预览小程序的效果，这个功能很有用，可以在编写代码的过程中及时地查看自身的修改效果，可以缩短开发周期。

5.上传小程序

开发者完成小程序的编写后，可以通过工具的“上传”按钮把自己的作品上传到微信小程序平台，实现小程序的发布。要上传小程序，必须先在微信公众平台上注册成为开发者，然后可以在工具中登陆自己的开发者账号，即可完成上传。

二、VS Code插件：wepy-cli

wepy-cli是基于Vue.js的小程序开发架构，本质是一个对微信小程序开发的封装，但它比普通微信小程序更加简单易学且可维护性更好。接下来将介绍如何使用wepy-cli。

1.安装VS Code插件：wepy-cli

首先需要安装VS Code插件：wepy-cli。点击VS Code左侧的扩展（Extension） ，在搜索框中输入wepy-cli三个字，点击安装即可。

2.初始化项目

打开终端，输入如下命令进行wepy项目初始化：

```wepy init standard projectname```

其中，standard表示项目模板，projectname表示要创建的项目名。

3.开发小程序页面

初始化完项目后，在VS Code中打开该项目，即可在“src”下开始编写项目代码。开发者同样可以通过添加文件夹、新建文件的方式来构建项目目录结构，然后在页面中编写相关代码。

wepy-cli将wxml、wxss和js进行了整合，需要在app.wpy文件中引入组件，其他页面文件不用任何引入。

4.预览小程序

开发者可以使用微信开发者工具来预览小程序，在终端中输入如下命令来启动微信开发者工具：

```wepy build --watch```

该命令表示编译并监听文件的改动。

同时，在浏览器中打开小程序开发者工具，选择“小程序”-“添加项目”，选择项目路径即可预览。

5.上传小程序

开发者完成小程序的编写后，还需使用微信小程序开发者工具来上传小程序。

终端中进入项目目录，输入如下命令：

```wepy build --prod```

该命令表示编译项目为线上模式。编译完成后，在VS Code的终端中输入如下命令上传构建后的代码：

```wepy upload```

输入该命令后，会自动打开上传窗口，将文件上传至小程序平台。

以上便是对微信小程序开发者工具和wepy-cli的详细介绍和使用教程。开发者可以根据自身需求选择一种或多种工具进行开发。