微信小程序开发工具怎么用 小程序开发工具使用方法

Posted 2023-05-03

1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台（mp.weixin.qq.com），找到右下方的小程序模块，点击「开发」按钮；
2、点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况，选择适合自己电脑的开发工具。
3、安装后，就可以直接启动开发者工具。如果是首次启动开发者工具，需要使用开发者的微信号扫码登录。登陆后，点击「添加项目」按钮，填写 AppID（如果没有，则点击无 AppID）和项目名称。接着，在项目目录中点击「选择」，新建一个文件夹作为新的项目目录。然后再次点击「添加项目」，就可以新建出一个微信小程序项目了。
4、微信开发者工具共分成「编辑」、「调试」和「项目」三个部分。
编辑：编辑和修改小程序的代码。
调试：显示小程序代码错误和警告，便于调试代码错误。
项目：用于查看小程序的属性、修改小程序配置，以及提交小程序代码至微信服务器。
5、懂技术的程序员到这一步就可以自己开发了。而不懂编程的小白，可以登录微信小程序制作平台「即速应用」官方网站www.jisuapp.cn进行小程序的制作。里面有大量的小程序模板，根据自己的需求选择一个模板进行制作即可。
开发工具还提供简单的模拟器（页面左侧），开发者可以使用模拟器在电脑上模拟用户点击及使用，提供后台情况模拟、多媒体播放器调试、缓存数据处理等功能
6、制作完成后，点击「生成」按钮。然后选择「小程序打包」，下载小程序的标准代码包。
7、回到在微信Web开发工具中，在「项目目录」这一栏选择下载好的代码包，打开后就可以看到小程序的预览效果了。
8、在「项目」页面中，开发者可以查看小程序的基本属性，也可以进行真机预览调试，或向微信服务器提交一个新版本的小程序代码。服务器收到代码后，管理员就可以通过公众平台，将新版本提交审核了。 参考技术A

很多工具只需要拖拉就可以。

使用起来十分的简单，一键就可以生成小程序。

参考技术B

一、微信小程序web开发工具下载地址

 

1.1 在微信公众平台-小程序里边去下载开发工具下载地址。

1.2 下载后安装一下就可以使用了：

二、创建项目

 

2.1 微信小程序web开发工具需要扫码登陆，所以必须先绑定开发者才可以：

 

2.2 已经绑定的开发者可以创建项目，需要填写AppID、项目名称、本地开发目录。

 

 

AppID需要去设置里边获取，如果不填的话官方给的提示是部分功能受限：

 

 

 

三、开发工具界面介绍：

 

 

 

1. 编辑：开发的时候，需要到编辑区去写代码 

2. 调试：开发完需要调试程序的时候需要切换到这个区域，调试区有很多工具可供使用。

3. 项目：在这里可以上传或者预览项目

4. 编译：就相当于运行项目的意思

5. 关闭：关闭当前工程

6. 微信小程序web开发工具提供实时预览的功能，界面的效果会在这个区域显示

7. 这个区域可以看到整个项目的文档目录结构

8. 这个区域是编码区

9. 这里是选择屏幕尺寸的地方

10. 模拟网络环境：2G/3G/4G/WiFi

 

 

 

四、调试区六大工具介绍：

 

在调试区开发工具提供了6种调试模式：

 

4.1 Console

Console的意思是控制台，做过开发的都知道几乎每个IDE都会有控制台，可以显示错误信息和打印变量的信息等。

 

4.2 Sources

Sources显示了当前项目的所有脚本文件，微信小程序框架会对这些脚本文件进行编译。

Source下边还有一个区域，做过软件开发的都知道，一般下边是控制台会显示一些log信息、断电调试等等。

 

4.3 Network

Network顾名思义：这个区域显示的是与网络相关的信息，我这里暂时没有进行网络请求。

 

4.4 Storage

官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究

 

4.5 AppData

AppData是显示当前项目显示的具体数据，可以在这里编译，并且会在页面实时显示。

 

4.6 Wxml

 

Wxml调试区：把他的名字换一下的话大家就好理解了，其实他的实质就是html+CSS，微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白，左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。

微信小程序怎么用webstore开发

微信小程序开发的方法及步骤：

首先要下载微信官方的微信Web开发者工具。打开微信公众平台，找到右下方的小程序模块，点击「开发」按钮；

点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况，选择适合自己电脑的开发工具。

安装后，就可以直接启动开发者工具。如果是首次启动开发者工具，需要使用开发者的微信号扫码登录。登陆后，点击「添加项目」按钮，填写 AppID（如果没有，则点击无 AppID）和项目名称。接着，在项目目录中点击「选择」，新建一个文件夹作为新的项目目录。然后再次点击「添加项目」，就可以新建出一个微信小程序项目了。

微信开发者工具共分成「编辑」、「调试」和「项目」三个部分。

编辑：编辑和修改小程序的代码。

调试：显示小程序代码错误和警告，便于调试代码错误。

项目：用于查看小程序的属性、修改小程序配置，以及提交小程序代码至微信服务器。

开发工具还提供简单的模拟器（页面左侧），开发者可以使用模拟器在电脑上模拟用户点击及使用，提供后台情况模拟、多媒体播放器调试、缓存数据处理等功能。

懂技术的程序员到这一步就可以自己开发了。而不懂编程的小白，可以登录微信小程序制作平台「即速应用」官方网站进行小程序的制作。里面有大量的小程序模板，根据自己的需求选择一个模板进行制作即可。

制作完成后，点击「生成」按钮。然后选择「小程序打包」，下载小程序的标准代码包。

回到在微信Web开发工具中，在「项目目录」这一栏选择下载好的代码包，打开后就可以看到小程序的预览效果了。

在「项目」页面中，开发者可以查看小程序的基本属性，也可以进行真机预览调试，或向微信服务器提交一个新版本的小程序代码。服务器收到代码后，管理员就可以通过公众平台，将新版本提交审核了。

以上就是微信小程序开发工具的具体使用方法。使用即速应用微信小程序开发工具是为了方便开发，制作完成后，必须导入到微信开发者工具中，才可以达到小程序制作成功效果。

参考技术A

使用了微信提供的开发工具是真心难用，卡顿厉害、中英文切写注释换相当不爽、还没办法多开窗口，相信大家也遇到过这种现象。

下边我们介绍下webstorm来开发微信小程序的一些配置：

1.首先FileType下Cascading Style Sheet 添加*.wxss

2.FileType下HTML 添加*.wxml

3.将其中的wecharCode.jar下载下来，然后在webStorm 的 File -> import settings 中导入即可

配置已经完成，接下来你的代码就能出现微信小程序的代码提醒了。

打完收工，继续撸代码。