17
收藏
评论

小程序开发者工具的高阶功能

文章会给大家介绍一些较为高阶的功能,希望帮助大家提高开发效率。虽然尽我最大努力,希望让内容有趣一些,但是文章还是略显枯燥,可是花 10 来分钟通读一次,是有可能在后续能帮忙节约一些时间的。

从小程序对外公测开始,开发者工具一共发布了 79 个版本。平均 10 天就有一次更新,相比于最初的版本,记录在案的功能更新优化有 281 处,修复了 531 个 bug 。我们更新了许多功能,也给大家造成了不少的麻烦。

开发者们通常都不会去仔细的阅读文档,遇到问题的时候再去文档中做相关的查找就好了,然而这种方式对于开发者工具而言,是不太友好的,一些高阶的功能都没有被用到过和发现过,谈何遇到问题呢?这一点从我们的友商的策略也不难看出,他们抄架构、抄文档甚至抄我们开发人员的名字,但是工具的功能和文档他们抄的就少了许多。

文章会给大家介绍一些较为高阶的功能,希望帮助大家提高开发效率,做出更好的小程序。虽然尽我最大努力,希望让内容有趣一些,但是文章还是略显枯燥,可是花 10 来分钟通读一次,是有可能在后续能帮忙节约一些时间。

项目多开


1.02.1802080 版本之前,开发者工具同时只支持打开一个项目,也就是如果开发者想看工具中的其他项目的表现时候,只能退出当前项目,再重新打开其他的项目。

多开办法:

  • 点击菜单栏上的 “项目” 按钮
  • 点击 “打开最近项目” 或者 “查看所有项目”

通过这种方式,可以同时打开多个项目,做到多个项目之间的自由切换。

多帐号登录


历史以来小程序开发者工具都是很专一的,同一时刻有且只有一个微信帐号可以登录。在小游戏推出之前,倒也没有什么问题,开发者并没有很大的述求需要多个帐号同时登录开发者工具。可当在开发对战类的游戏时,多帐号就变的非常必要了,并且由于一个微信帐号在同一时刻有且只能有一个 session ,那么使用移动设备和开发者工具配合进行对战调试也会变的很是麻烦。

开发者工具从 1.02.1807120 版本开始支持 多帐号登录,在进行简单的配置,既可以让一个打开的项目选择使用某个微信帐号进行开发调试了。

使用方式:

  • 点击菜单栏上的 “工具” 按钮
  • 点击 “多帐号调试”
  • 扫码登录同当前帐号不一致的微信号

扫码后点击确定,就可以使用选择的微信帐号打开相应的小程序项目。需要注意的是,非主帐号打开的项目,无法编辑和提交预览。从而在小程序开发工具中和自己的小号比赛来一场跳一跳变的很是简单。

命令行以及 HTTP 调用


对于个人开发者,大部分时候使用开发者工具可能就能满足要求了,然而当一个团队进行工作时候,更希望将小程序的整个发布流程自动化起来,或者添加到已有的发布系统中去。同时对于小游戏的开发者而言,他们有相应的游戏引擎的 IDE ,这些工具有需要直接调用开发者工具进行小游戏的开发和调试。

同后台开发或者别的开发模式不同,出于安全的考虑,小程序侧是没有计划开放代码提交和提审的 API 的,所以需要一种使用程序来调用小程序开发者工具的能力,1.02.1712150 版本开始我们支持了 HTTP调用命令行调用

  • 命令行调用被使用在小游戏引擎的开发工具调用上,同时也方便开发者自己去做一些构建测试。

  • HTTP 调用是给与开发者自行部署在服务器上,然后通过 HTTP 的调用的方式去和自己的已有的发布系统做结合。

大家一定有疑问,对于大部分后台而言, Linux 服务器居多,而开发者工具为什么不提供一个 Linux 版本更方便去做 HTTP 调用去做的事情呢?其实主要原因有两个:

  • 维护一个 Linux 版本并不是一个很轻松的事情,他牵涉到系统兼容、安装包签名、工具版本的发布和更新
  • Linux 服务器通常都没有桌面端,而开发者工具所依赖的 chromium 必须要有桌面环境才能运行,所以即使提供了也不能满足大部分的服务端要求的

下图是工具使用命令行登录的情况:

Git 展示、操作和管理


小程序开发者工具对 Git 的支持是逐步增加的,最新版本的工具已经支持了 微信开发者·代码管理

1.02.1712050 版本开始,我们先是支持上了在编辑器中的 Git 状态展示,包括了文件状态以及分支的呈现,以及文件同上个版本的对比。

文件的状态展示有如下几种:

图标 含义
U 文件未追踪(Untracked)
A 新文件(Added, Staged)
M 文件有修改(Modified)
+M 文件有修改(Modified, Staged)
C 文件有冲突(Conflict)
D 文件被删除(Deleted)

目录的状态展示有以下几种

图标 含义
小红点 目录下至少存在一个删除状态的文件
小橙点 目录下至少存在一个冲突状态的文件
小蓝点 目录下至少存在一个未追踪状态的文件
小绿点 目录下至少存在一个修改状态的文件

如果某一文件存在修改(Modified),可以右键点击此文件,并选择 “与上一版本比较”,则可以查看当前工作区文件与 HEAD 版本的比较。

之后,在 1.02.1809111 版本开始,我们增加了完整的 Git 操作,做到了一个较为完善的 Git 桌面端的管理工具。

点击工具栏上的 “版本管理” 按钮就可以打开使用,以下是几个功能的简单演示,希望能帮助到大家。

代码片段


大部分的前端开发们都会很熟悉 jsfiddle 这个产品,小程序或者小游戏因为他的特殊运行环境,是没有办法直接使用浏览器在来进行代码演示或模拟的。

为了解决这个问题,我们在 1.02.1803130 版本开始,新增加了一个 代码片段 的功能。用于帮助开发者分享小程序或小游戏的开发经验、展示组件和 API 的使用、复现开发问题等,同时小程序几乎所有的组件都有相关代码片段示例。

举一个使用场景,点击文档上 “在开发者工具中预览效果” 会直接调用起小程序开发者工具,并自动导入相关的代码,不需要开发者从文档中复制。

小 tips,如果你在微信开发者社区上或者其他场合反馈问题,带有代码片段的链接通常更容易被得到解答。同时对于你的开源项目,没有什么比代码片段更容易被接受的了。

project.config.json


1.01.170925 版本开始,我们新增了一个 project.config.json 文件,用于帮助开发者保存一些项目配置。配置文件的设置非常多,这里只列举几个非常有用的功能。

miniprogramRoot 用于指定小程序源码的目录,也就是说这个配置会告诉开发者工具,项目目录下的 miniprogramRoot 是小程序的代码路径,那么开发者工具会从这个目录下去寻找小程序的入口文件 app.json 或者 小游戏的入口文件 game.json

一些开发者可能会更喜欢使用 wepy mpvue 等小程序框架,或者使用自己的编译构建系统,这类第三方工具可能会有一个问题,每次的构建都去删除整个目录,并进行重新的构建,这种不低碳的行为会导致工具对目录的监听失效,同时失去所有的编译 cache,表现就是明明文件存在,工具就是报错找不到,并且每次的编译都导致卡顿。

在这种情况下,最好的方式就是把这些第三方工具构建出来的目录设置为 miniprogramRoot 目录,那么开发者工具就不会丢失文件监听,至少不会出现文件明明存在但是依然报错的情况。在后续的版本中,我们也会通过其他的方式来保证编译cache的可用,从而减少卡顿感觉。

debugOptions 绝大部分时候,这个配置只有小游戏需要。同小程序不同,小游戏开中有他独有的特点,引擎文件或者基础库文件都非常非常大,这类文件当带有 sourcemap 的时候,在工具的 source panel 打开就会卡顿无比,Chrome浏览器也会有这个问题,根本原因在于浏览器去解析还原 sourcemap 的时候需要占用大量的 CPU 时间,导致卡顿。

目前可以指定 debugOptions.hidedInDevtools 字段,用以配置调试时于调试器 Sources 面板隐藏源代码的文件。

hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。

当某个 js 文件符合此规则时,调试器 Sources 面板中此文件源代码正文内容将被隐藏,显示为:

// xxx.js has been hided by project.config.json

packOptions 小程序和小游戏都有代码包大小限制,然而我们在项目中,很可能是有一些项目所必须但是最后并不需要真正提交和发布的文件,例如跟目录下的 README.md 文件。

目前可以指定 packOptions.ignore 字段,用以配置打包时对符合指定规则的文件或文件夹进行忽略,以跳过打包的过程,这些文件或文件夹将不会出现在预览或上传的结果内。

字段名 类型 说明
value string 路径或取值
type string 类型

其中,type 可以取的值为 folderfilesuffixprefix,分别对应文件夹、文件、后缀、前缀。

小程序开发助手


小程序、小游戏的开发和体验中,离不开绑定这一概念。管理员需要绑定开发者、体验者,在之前当我们需要找其他同事测试小程序表现的时候或者是给测试工程师相关的版本时,能且只能截图工具上的预览二维码,这是一种较为低效的行为,同时二维码还有过期的时间,很可能在对方扫码的时候,已经过期了。

为了解决这个问题,我们去年 8 月推出了 小程序开发者助手

那么这个过程就会变的比较简单,有权限的项目成员,可以直接点击体验任何一个需要测试或体验的版本,而不需要二维码的口口相传。

真机调试


1.02.1802010 版本开始,我们支持了小程序和小游戏的真机调试功能。这个功能并不需要非常复杂的介绍,直接点击小程序开发工具工具栏上的 “真机调试” 按钮即可。

后续


高阶功能一先介绍到这里,后续找时间写后续,包括

  • 模拟器、调试器、编辑器界面分离
  • 自定义分析
  • 自定义编译模式
  • 启用自定义处理命令
  • 多核心编译
  • 测试号
  • npm 支持
  • 体验评分
最后一次编辑于  02-19  (未经腾讯允许,不得转载)
复制链接赞 17收藏投诉评论

11 个评论

  • aholy
    aholy
    02-21

    非常期待分享。你们辛苦啦。工具现在功能很强大,好用

    02-21
    赞同
    回复
  • 三生
    三生
    02-27

    一个微信账户只能登陆一个开发工具吗

    02-27
    赞同
    回复
  • 15347432276
    15347432276
    02-27

    多开会卡

    02-27
    赞同
    回复
  • cyhang
    cyhang
    02-27

    新版添加了检测这两个的

    "navigationBarTextStyle": "black",

    "backgroundTextStyle": "light",

    值,坑货


    02-27
    赞同
    回复
  • Wang
    Wang
    02-28

    版本管理如何在已有项目上优雅的使用,配置了project.config.json后,版本管理打开后报错了,报错如图:

    02-28
    赞同
    回复 1
    • HS
      HS
      02-28

      使用命令行 git status 看下结果呢?

      02-28
      回复
  • 陈式坚
    陈式坚
    03-01

    感谢分享

    03-01
    赞同
    回复
  • Gavin
    Gavin
    04-11

    问一个问题,

    A小程序能能否转发B小程序链接

    同一个公众号下两个小程序:店主端小程序A和顾客端小程序B

    店主通过店主端小程序A编辑并分享商品链接给顾客,顾客打开该链接


    原问题在:

    https://developers.weixin.qq.com/community/develop/doc/0002e6172e8af0601b58c7af351800

    没有官方回复


    04-11
    赞同
    回复
  • spring
    spring
    05-22

    小程序助手真的好评,测试小姐姐用了都说好~

    05-22
    赞同
    回复
  • 苏苏
    苏苏
    06-27

    你不是个漫画家吗?怎么转行当程序员了

    06-27
    赞同
    回复
  • Emily
    Emily
    08-22

    楼主,是时候写下一期啦~~~

    08-22
    赞同
    回复