Skip to content

实战篇 8：小程序调试技巧和上线发布

真机调试

平时开发小程序可以在开发者工具中进行调试，开发者工具提供了类似 Chrome DevTools 的调试面板，对于前端开发者来说入门门槛比较低。

小程序开发完成之后，我们需要在真机上进行测试，真机调试方面小程序开发者工具有**预览**、**远程调试**和**设置体验版本**三大部分功能。除了这三种方式之外，我们还可以使用真机远程调试，在 iOS 上可以通过实现 Safari 调试代码，安卓中可以安装 X5 内核的 inspect 版本，开启 Chrome remote debug 模式。

本部分会简单介绍开发者工具的预览和远程调试功能，以及如何开启 iOS 和 Android 的真机调试功能，体验版本功能会在「上线」部分讲解。

预览功能

在开发者工具中，顶部有「预览」功能，点击后会编译打包当前代码，然后生成一个二维码，用开发者账号扫码就可以预览代码。当遇见问题需要同步编写代码 debug 的时候，可以切换到「自动预览」模式，如下图所示，只要代码发生变化就会重新编译自动启动小程序。

远程调试

远程调试也是在开发者工具中开启的，点击顶部的「远程调试」即出现跟预览功能类似的界面，打包上传之后也会出现一个二维码，通过扫码可以进入远程调试界面。这时候，手机会打开带有 vConsole 的小程序界面，而开发者工具的电脑则显示一个类似 Chrome DevTools 的开发者调试工具。这样就可以直接调试了。

iOS 调试

下面介绍下如何使用 Xcode、Reveal 和 Safari 来真机调试 iOS 上的小程序。进行 iOS 调试需要使用 Mac 电脑，如果你用的是 Windows 系统，可以跳过本部分内容，直接查看后面的 Android 版本的 remote debug。

先大概说下原理，首先下载砸过壳版本的微信 ipa 文件（iOS App 程序的后缀），然后使用 IPAPatch 对 ipa 进行重新签名，签名账号可以使用自己的 Apple 账号，最后将项目编译到真机（也可以模拟器），就可以使用 Safari 进行调试了。

  1. 下载 IPAPatch 项目
  2. 使用 PP 助手下载砸过壳版本的微信 ipa（使用最新版本的微信，否则登录会提示需要升级），这个需要安装 PP 助手，下载后在下载目录找到其 ipa
  3. 将微信的 ipa 文件命名为 app.ipa，替换掉 IPAPatch 目录的 Assets/app.ipa 文件
  4. 使用 Xcode 打开 IPAPatch 项目
  5. 修改签名到自己的开发者账号，没有开发者账号可以用自己的 Apple 账号登录

按照上面的提示，首先修改 BundleID（这里的填写可以比较随意），然后使用自己的 Apple ID 登录账号，再选择自己的真机（数据线连接后可以选择），选择后点击开始编译，编译结束会安装到自己的 iPhone 手机，安装成功后就会发现自己的手机有两个微信了。

接着再完成下面的步骤，就可以调试小程序了。

  1. 在 iPhone 上信任自己的开发者描述文件：「设置 -> 通用 -> 描述文件 -> 信任你的证书」
  2. 在 iPhone 上打开 Safari 调试功能：「设置 -> Safari -> 高级 -> Web 检查器打开」

首先登录微信账号，打开需要调试的小程序，打开后在 Mac 电脑上打开「Safari -> 开发」找到自己的 iPhone 手机，选择对应的页面就可以进行调试了。

这里说明下：

  • JSContext：是小程序的逻辑层代码，执行在 JavaScriptCore 环境中
  • page-frame.html：是小程序的视图层代码，执行在普通的 WKWebview 中
  • 上图只开了一个小程序页面却显示了两个 page-frame.html，说明始终有一个页面在后台加载，准备打开小程序的其他页面（基础篇 3：小程序架构及其实现机制中介绍过）

调试 JSContext

打开 JSContext 之后，找到的第一个 JS 文件实际就是微信的逻辑层代码执行 waservice.js 了：

另外看到一些 JSBridge.subscribeHandle 的代码实际是 Native 实现的一些方法或事件，然后调用 JSContext 中的方法回传数据的。下面是点击事件的一个截图，会看到点击事件传递的数据。

调试 page-frame.html

page-frame 的页面是普通的 WebView 容器，可以在 Safari 中直接 debug，下面笔者通过 Console 面板修改 #canvas-wrapper 节点的内容：

修改后，在手机上看到效果：

这说明实际 WebView 内是可以进行 DOM 操作的，而且也可以使用普通的 BOM 对象，如 alert、location等。

使用 Reveal 查看 UI 布局

如果要研究微信小程序的布局，可以使用 Reveal 软件来查看 UI 布局。如下图所示，在今日头条的小程序布局中，可以看到播放器组件是 Native 实现的组件，而我们做的新鲜天气小程序的雨雪效果 Canvas 也是 Native 实现的。

要开启 Reveal，需要经过下面的步骤：

  1. 安装 Reveal，然后通过菜单「Help -> Show Reveal Library in Finder -> iOS Library」，打开 RevealServer.framework 所在目录
  2. 将 RevealServer.framework 复制到 IPAPatch 的 Assets/Frameworks/ 内

上面两个步骤如果都正确，再次用 Xcode 打开 IPAPatch 编译运行，打开小程序后，会在 Reveal 中看到可以操作了。

这时候点击 icon 就可以随意查看 UI 布局了。

Android 手机使用 X5 inspect 版本进行真机调试

安装 X5 inspect 版本之后，就可以使用 Chrome 的远程调控功能来调试小程序了。具体操作步骤如下：

  1. 用 Android 版微信关注「腾讯浏览服务」公众号，点击菜单「TBS 公测」然后回答 5 个问题，就可以下载 X5 测试版本
  2. 打开 Android 手机的「开发者选项 -> USB 调试」功能，连上电脑数据线，这时候如果有adb可以执行adb devices看下是否连接成功（adb 是 android debug bridge 安卓调试桥简称，官方地址）
  3. 微信扫码访问：http://debugx5.qq.com

  1. 切换到「信息」选项卡，勾选下图中的三项：「打开 TBS 内核 Inspector/X5jscore Inspector/小程序调试功能」

有关 Chrome 远程调控的更多资料可以访问 Chrome Web Developers 官网教程。

PS：安卓下调试小程序有一定概率会失败，感觉不是很稳定。

上线

小程序开发完成之后，使用 npm run build 打包，然后准备上线：

  1. 上传云函数，保证云函数是最新代码
  2. 在开发者工具页面右上角选择「上传」，弹出提示框填写版本号和备注（备注可以不填写）
  1. 登录微信小程序管理后台，左侧菜单选择「开发管理」，可以看到刚刚上传的版本号代码

点击「提交审核」按钮会出现提示框，直接「下一步」，进入「配置功能页面」，这个页面需要填写小程序的主要功能页面。配置合理的标题和类目，可以帮助小程序更好地被检索。

这里笔者填写的内容如下：

填写完「配置功能页面」之后，点击提交审核，就进入审核流程了。一般一次审核在几个小时到一天之间，第一次审核会相对慢一些，笔者提交了几次审核，最快的 3 个小时就审核通过了。审核通过后，绑定小程序开发者账号的微信号会收到提醒：

收到提醒后，再次登录小程序管理后台，在「开发管理」处会标记是已经审核通过待发布的版本。

点击发布可以选择「全量发布」和小流量发布，这时候根据自己情况选择即可。

Tips： 1. 如果发现提交审核的代码有问题或者新开发了一个版本，可以在管理后台撤回审核的版本，再提交新版本审核即可 2. 上传代码后，可以在小程序后台设置刚刚上传的代码为「体验版本」，设置后可以扫描版本号下面的体验版本二维码进行体验 3. 如果发布的版本出现重大 bug，可以在「开发管理」页面对线上版本选择「版本回退」

设置体验版本

设置体验版本有点类似小范围公测，需要将代码通过开发者工具先上传，然后在小程序管理后台设置体验版本。体验版本并不是任何人都可以体验的，需要开发者主账号在「管理后台 -> 用户身份」添加体验账号。

设置用户身份之后，上传代码之后，在后台设置体验版本，体验版本设置成功之后，会有版本号二维码可以扫码体验。

数据分析

上线后的小程序，可以在小程序管理后台，看到一些基本统计数据：

小程序 API 还提供**自定义分析**功能，可以通过自定义分析页面定制自己的分析。

对于开发者而言，最关注的应该是程序异常数据，小程序的监控报警 API 提供数据监控上报的功能。使用前，需要在「小程序管理后台 -> 运维中心 -> 性能监控 -> 业务数据监控」中新建监控事件，配置监控描述与告警类型。

创建完后，可以通过 API 进行数据上报：

// 参数是监控 id 和上报数值
wx.reportMonitor('1', 1)

小结

本节介绍了小程序调试技巧和上线发布流程，以及小程序数据上报分析方法。在调试技巧中，重点介绍了如何在 iOS 和 安卓真机中调试微信中的小程序，希望上面的调试技巧可以帮助小程序开发者快速定位问题。