在开发小程序的时候,可以在开发者工具中进行调试,开发者工具提供了类似的调试面板,对于前端开发者来说入门门槛比较低。
小程序开发完成后,我们需要在真机上进行测试。对于真机调试,小程序开发者工具有三大功能:预览、远程调试、设置体验版。除了这三种方式,我们还可以使用真机远程调试。在iOS上,我们可以实现调试代码,在上,我们可以安装X5内核版本并开启模式。使用真机调试不仅可以发现开发者工具中无法发现的bug,还可以帮助我们了解小程序的运行原理。
下面介绍如何使用,以及在真机上调试iOS小程序。
我简单说一下原理,首先下载加壳版的微信ipa文件(iOS App程序的后缀),然后对ipa重新签名,签名账号可以用自己的账号,最后将项目编译到真机(也可以是模拟器)上,就可以调试使用了。
下载项目使用PP助手下载加壳版微信ipa(使用微信最新版本,否则登录时会提示升级),这个需要安装PP助手,下载后在下载目录下找到其ipa并将微信ipa文件命名为app.ipa,替换目录下的/app.ipa文件,使用打开项目修改签名为自己的开发者账号,如果没有开发者账号可以用自己的账号登录
根据上面的提示,先修改一下(这里的填写可以比较随意),然后用你自己的ID登录账号,然后选择你的真机(接上数据线之后就可以选择),然后点击开始编译,编译完成后就会安装到你的手机上,安装成功之后你会发现你的手机上有两个微信账号了。
然后完成以下步骤,即可调试小程序。
信任你的开发者描述文件:“设置->常规->描述文件->信任你的证书” 开启调试:“设置->高级->Web 检查器打开”
首先登录微信账号,打开需要调试的小程序,打开之后在Mac电脑上打开“->开发”找到手机,选择对应页面就可以调试了。
以下是解释:
调试
打开之后发现第一个JS文件居然是微信的逻辑层代码.js:
另外,我看到了一些。代码其实就是实现一些方法或者事件,然后调用方法返回数据。下面是点击事件的截图,可以看到点击事件传递过来的数据。
调试页面-.html
page-是一个普通的容器,可以直接在中打开,下面我打开了我正在开发的项目,通过面板修改了#-节点的内容:
修改完之后在手机上看看效果:
由此可见其实可以进行DOM操作,也可以使用诸如 等常见的BOM对象。
使用视图 UI 布局
如果想研究微信小程序的布局,可以用软件查看UI布局,如下图,在今日头条小程序的布局中,可以看到播放器组件是实现的组件,其中我们做的清新天气小程序的雨雪效果也是实现的。
要启用它,您需要执行以下步骤:
安装它,然后进入菜单“帮助->显示于->iOS”,打开.所在的目录,并将.复制到//
如果上面两步都正确的话,再次打开编译运行,打开小程序之后就可以看到可以操作了。
这时你可以随意点击图标来查看UI布局。
商业时间
最近,随着小程序云开发上线,我发现使用云开发可以大大降低小程序开发的门槛,以前很多好的想法往往因为不懂后端或者没有后端服务器而无法实现,现在使用小程序云开发提供的接口就可以完全实现。
于是我利用云开发API实现了一个“清新天气”小程序,并把我的开发过程和好的经验整理成了一本电子书,发布在腾讯云学院,《从0到1实现一个查询天气的小程序》。
本期实战课程专注于打造一款具有天气预报和签到功能的小程序,从基础知识到小程序运行机制,从开发环境搭建到小程序开发、调试、上线,打通微信小程序开发的全流程,让小白也能从零开始完成并上线一个小程序。主要包含以下三部分:
当然这个实用的课程是收费的,但是价格比较便宜,希望能够对想要学习或者正在开发小程序的各位有所帮助。