专栏首页知晓程序想开发小程序?先了解开发者工具怎么用 | 小程序接入指南

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

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

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

今天,知晓程序(微信号 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),作者:让你更知小程序

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序发布时间出炉!全面了解小程序的前世今生

    知晓君
  • 微信官方爆料!这批小程序重磅「新能力」即将开放

    但据知晓程序(微信号 zxcx0101)了解,这两个新能力,并不是真正的「新」能力。早在官方宣布之前,一些小程序就已经使用了类似特性。?

    知晓君
  • 小程序「流量引擎」启动!有了它,你的小程序将无人不知(附申请指南)

    腾讯全球合作伙伴大会正在西南的成都如火如荼地进行着,似乎是不甘寂寞,坐落在东南角广州的微信小程序在这样的夜晚,又给我们带来了 3 个好消息:

    知晓君
  • 小程序公测两周年,数据报告及未来发展来袭

    今天,在小程序公测两周年来临之际,腾讯全球合作伙伴大会上,微信开放平台基础部副总经理胡仁杰带来小程序最新的生态现状。

    非著名程序员
  • 小程序 · 一周报

    小游戏新增分包加载功能。运用分包功能后,小程序或小游戏代码包总上限可提升至 8M。建议开发者将每个分包做得尽可能小,以便提升用户的打开速度,优化服务体验。

    极乐君
  • 个人开发者如何申请微信小程序

    作为一个间接性拖延症患者,直到昨天微信小程序疯转之后,我才想起来去做个 demo 试试。 把之前的 python 网页编辑器(公众号最右菜单栏->在线编程)移植...

    Crossin先生
  • 掘金开发者大会 ∙ 微信小程序专场正式启动

    自2017年1月微信小程序正式上线以来,应用数与开发者数持续增长,目前已经有超过100万个微信小程序发布且相关开发者也超过了150万。同样,我们也可以通过掘金的...

    Phodal
  • 手把手带你实战uni-app小程序项目

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,解决了多个平台,...

    极乐君
  • 过去、现在和未来:开发一款微信小程序的技术迭代全过程

    2016 年 1 月 11 日,张小龙现身微信公开课 Pro 版发表公开演讲。也就是在此次演讲中,微信官方正式宣布正在开发“应用号”的消息。而当时被形容为“像 ...

    Java帮帮
  • 微信官方爆料!这批小程序重磅「新能力」即将开放

    但据知晓程序(微信号 zxcx0101)了解,这两个新能力,并不是真正的「新」能力。早在官方宣布之前,一些小程序就已经使用了类似特性。?

    知晓君

扫码关注云+社区

领取腾讯云代金券