时间:2021-05-20
平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。
小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外,我们还可以使用真机远程调试,在 iOS 上可以通过实现 Safari 调试代码,安卓中可以安装 X5 内核的 inspect 版本,开启 Chrome remote debug 模式。使用真机调试不仅可以发现开发者工具中不能发现的 bug,还能帮助我们理解小程序的运行原理。
下面介绍下如何使用 Xcode、Reveal 和 Safari 来真机调试 iOS 上的小程序。
先大概说下原理,首先下载砸过壳版本的微信 ipa 文件(iOS App 程序的后缀),然后使用 IPAPatch 对 ipa 进行重新签名,签名账号可以使用自己的 Apple 账号,最后将项目编译到真机(也可以模拟器),就可以使用 Safari 进行调试了。
按照上面的提示,首先修改 BundleID(这里的填写可以比较随意),然后使用自己的 Apple ID 登录账号,再选择自己的真机(数据线连接后可以选择),选择后点击开始编译,编译结束会安装到自己的 iPhone 手机,安装成功后就会发现自己的手机有两个微信了。
接着再完成下面的步骤,就可以调试小程序了。
首先登录微信账号,打开需要调试的小程序,打开后在 Mac 电脑上打开「Safari -> 开发」找到自己的 iPhone 手机,选择对应的页面就可以进行调试了。
这里说明下:
调试 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,需要经过下面的步骤:
上面两个步骤如果都正确,再次用 Xcode 打开 IPAPatch 编译运行,打开小程序后,会在 Reveal 中看到可以操作了。
这时候点击 icon 就可以随意查看 UI 布局了。
广告时间
最近由于小程序·云开发的推出,我发现使用云开发,可以大大降低小程序的开发门槛,以前很多灵光乍现的点子,往往因为缺乏后端知识或者缺少后端服务器没有得到实现,现在使用小程序云开发提供的接口完全可以实现。
于是我自己用云开发的 API 实现了一个「新鲜天气」的小程序,并将我在开发中的过程以及比较好的经验,整理成了一本电子书,放在了腾讯云学院上《从0到1实现天气查询小程序》。
这份实战课程以打造一款拥有天气预报和签到功能的小程序为主线,从基础知识到小程序运行机制,从开发环境搭建到小程序开发、调试、上线,打通微信小程序开发全流程,让新手可以从零开始完成并上线一个小程序。主要有以下三部分组成:
当然,这份实战课程收取一部分费用,不过价格比较便宜,希望能够对想学习或者正在进行小程序开发的你有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
有时候微信小程序调试确实比较烦恼,开发工具里的和真机差别有点大,每次都要重新编译重新扫码调试。今天微信终于支持真机调试了,可以大大方便开发者进行调试,节省开发时
2月2日消息,亿邦动力网获悉,微信发布公告称,为了让开发者更高效地开发和调试小程序,小程序开发工具新增真机远程调试功能。开发者只需扫描二维码,即可在手机上的微信
今天下午突然听到群里有人说微信小程序工具更新了,文档也更新了不少内容.顾不上吃冬至的饺子.我就冲进来了.先说分享功能,目前真机尚不能调试.开发工具上可以看看效果
企业微信小程序的开发通过企业微信小程序模拟器插件来实现,方便用户在微信开发者工具中进行企业微信小程序开发、调试和代码上传。一、开发须知开发者在使用企业微信小程序
昨天晚些时候微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者