想开发小程序?先了解开发者工具怎么用 | 小程序接入指南

工欲善其事,必先利其器。

对于小程序开发者来说,微信提供的开发者工具是不可绕过的一步。

今天,知晓程序(微信号 zxcx0101)就来教你如何一步步设置好开发者工具。

如何获取开发工具

开发小程序,需要用到「微信 Web 开发者工具」。

通过以下步骤,可以找到开发工具的下载地址:

  1. 打开微信公众平台(mp.weixin.qq.com);
  2. 鼠标移至「小程序」,点击「开发」按钮;
  3. 点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」。

开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况,选择适合自己电脑的开发工具。

以 Mac 电脑为例,只要将下载的 DMG 文件打开,并根据提示,将 app 文件移动至「应用程序」文件夹,安装就完成了。

登录并新建项目

安装后,就可以直接启动开发者工具。

如果是首次启动开发者工具,需要使用开发者的微信号扫码登录

登录后,微信开发者工具会询问调试类型,请选择「本地小程序项目」

之后,点击「添加项目」按钮,就可以在电脑上新建小程序项目了。

填写 AppID(如果没有,则点击「无 AppID」)、项目名称。接着,在项目目录中点击「选择」,新建一个文件夹作为新的项目目录。

选择项目目录后,开发者工具会询问是否「在当前目录中创建 quick start 项目」。如果勾选,开发者工具会在相应文件夹下创建小程序的必要文件。

添加项目之后,以后打开开发者工具时,就可以在项目列表中找到新建的项目。

点击项目就可以继续进行开发。

认识开发工具

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

  • 编辑:编辑和修改小程序的代码。
  • 调试:显示小程序代码错误和警告,便于调试代码错误。
  • 项目:用于查看小程序的属性、修改小程序配置,以及提交小程序代码至微信服务器。

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

真机调试和提交代码

在「项目」页面中,开发者可以查看小程序的基本属性,也可以进行真机预览调试,或向微信服务器提交一个新版本的小程序代码。

想到体验代码在真机上的运行效果?点击「项目」中的「预览」按钮,用当前开发者的微信号扫码即可。

如果需要在真机运行的时候进行调试,可以点击小程序右上角的「更多」按钮,选择打开调试。接着,重新扫码启动小程序,右下角就会出现一个「vConsole」按钮,点击即可打开调试器。

当小程序开发完毕之后,开发者可以点击「上传」按钮,将新版本代码上传到微信服务器。

服务器收到代码后,管理员就可以通过公众平台,将新版本提交审核。

以上就是知晓程序为大家带来的开发者工具使用及开发调试指南,希望能帮助小程序开发者迅速熟悉和上手小程序开发工具。

本文由知晓程序原创出品,关注微信号 zxcx0101,回复「接入指南」获得小程序接入指南往期文章:

  1. 微信小程序公测了!如何第一时间注册?
  2. 填写小程序信息时,你需要注意什么?
  3. 小程序微信认证太麻烦?那是你没看这篇文章

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2016-11-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Ubuntu18.04 下的Gif录制工具

添加一下源:sudo add-apt-repository ppa:peek-developers/stable

855
来自专栏zhangdd.com

gitlab 403 forbidden 并发引起ip被封问题解决方法

1084
来自专栏码农阿宇

dot watch+vs code提升asp.net core开发效率

在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp.net core 2.0的今天...

3305
来自专栏hbbliyong

Ubuntu 安装 JDK8 的两种方式

ubuntu 安装jdk 的两种方式: 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgra...

4388
来自专栏源码之家

tar命令常用方法集锦

1375
来自专栏DannyHoo的专栏

记录用户的登录状态

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

782
来自专栏SpringBoot

nginx window下的静态文件服务器

版权声明:本文为博主原创文章,未经博主允许不得转载。

824
来自专栏Java架构师历程

Maven 指定JDK版本

使用 IntelliJ 时,一运行 maven build,项目的编译 jdk 总是会变成 1.5 版本,一开始通过maven-compiler-plugin配...

872
来自专栏深度学习之tensorflow实战篇

python django整理(二)路由设置(URLS)

3步初识ursl与views之间的作用原理 视图函数相关的URL(网址) (访问啥网址对应啥内容) 1、打开app01/views.py文件,输入下列代码: ...

3106
来自专栏BeJavaGod

手动搭建apache james邮件服务器,实现邮件功能

最近一直在搞邮件这块,本来我们邮件发送是用的腾讯免费的企业邮箱,邮件功能没有问题,但是由于邮件的限制,如下: ? 这些限制导致我们的部分客户是收不到邮件的,哪怕...

3253

扫码关注云+社区