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

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

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

今天,知晓程序(微信号 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 条评论
登录 后参与评论

相关文章

来自专栏Script Boy (CN-SIMO)

CenOS下firefox browser (火狐浏览器)无法播放网页音乐的解决方法

新装载的Firefox或许无法播放网页音频,解决方法如下:           1. 下载并安装 flashplayer插件&&下载网址:https://ge...

2080
来自专栏技术墨客

构建用于生产的React静态化单页面服务 原

React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

6464
来自专栏FreeBuf

WordPress插件Google Analytics by Yoast存储型XSS漏洞(含POC)

WordPress著名插件Google Analytics by Yoast插件中曝出存储型XSS漏洞,该漏洞能够让未被授权的攻击者在WordPress管理面板...

25310
来自专栏web前端

smartClient 1--框架介绍

    快速构建 大型企业应用开发(无需过多关注UI),适合基于云技术的应用,主要关注业务的发展和营销,加快开发进程

1180
来自专栏西安-晁州

react-native学习之环境安装

1、首先是java环境安装-安装JDK 2、安装Android-SDK,推荐以下地址:http://tools.android-studio.org/index...

2110
来自专栏九彩拼盘的叨叨叨

Web Workers 介绍

有时候,我们写的脚本需要执行一些耗时的大计算量的操作。在脚本执行过程中,浏览器会出现冻结用户界面的情况(用户对页面进行操作,但浏览器没有响应)。

872
来自专栏DeveWork

WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下...

2458
来自专栏Puppeteer学习

实现node端渲染图表的简单方案

这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3、echa...

2842
来自专栏你不就像风一样

[原创作品]颠覆传统开发模式的web服务器

以Java web举例,现在的网站系统开发模式,对于web端和服务端的数据交互以及页面渲染,无外乎两种:

1432
来自专栏wym

Linux ubntu 下操作

ls 显示当前下面的文件及文件夹 ls -a 显示当前目录下的所有文件及文件夹包括隐藏的.和..等 ls -al 显示当前目录下的所有文件及文件夹包括隐藏的.和...

1572

扫码关注云+社区

领取腾讯云代金券