开发者学堂课程【mPaaS 小程序开发实战 - 教你如何独立运行小程序 :iOS 端预览和调试小程序】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/741/detail/13126
iOS 端预览和调试小程序
本节介绍如何在 iOS 客户端进行真机的预览与调试。结合 mPaaS 官方文档中的小程序中的接入 iOS 中的进阶指南的文档进行说明。
说明:仅在 mPaaS 10.1.60及以上版本中支持。
按照以下步骤接入预览和调试功能:
1. 根据 IDE 的二维码获取二维码内容字符串(如通过扫码)。上节内容已经介绍如何基于小程序 IDE 进行小程序的开发、登录、示例小程序的一些相关配置等。当小程序开发完成后可以在小程序 app 客户端中直接查看小程序在手机中的效果。在 IDE 中点击预览会生成一个二维码,对应需要获取的内容。
2. 调用小程序预览调试接口。
在小程序工程中找到 ViewController.m,添加调试小程序的按钮:
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn2.frame = CGRectMake(100,260,200,30);
[btn2 setTitle:@"调试小程序"forstate:0];
[btn2 addTarget:self action:@selector(clivkDebugTinyApp) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview: btn2];
点击该按钮的一个事件,会唤起一个扫码界面
添加代码:
-(void)clivkDebugTinyApp
{
TBScanViewController *vc =[[MPScanCodeAdapterInterface sharedInstance] createDefaultScanPageWithallback:^(id _Nonnull
result,BOOL keepAlive){
Nsstring *url = result[@"resp_result"];
[MPNebulaAdapterInterface startDebugTinyAppWithUrl:url];
}];
[self.navigationController pushvViewController:vc animated:YES];
}
在该点击事件的方法中会直接调用集成小程序组件所依赖的扫码组件对应的 API。
扫码完成后会有结果的回调,在回调中取 result 的 resp_result 字段,拿到对应的 url。再调用小程序的startDebugTinyAppWithUrl 的 API,传入后面的 url 就可以打开预览的小程序。
配置白名单
在工程中找到 MPaaSInterface+TinyAppDemo.m 中的 userid,传入小程序中的白名单设置中的 userid,将MPTestCase 拷贝到代码中,即
-(NSString *)userid
{
return @”MPTestCase”;
}
以上就完成了 iOS 客户端的配置。重新运行工程,因为需要扫码所以需要在真机上进行调试。
运行后打开预览的二维码,下图就是真机的运行情况
可以看到运行后界面新增调试小程序的按钮。点击调试按钮,扫描预览的二维码就可以打开调试的小程序。
调试完成后也可以在小程序上进行真机的调试,选择 debug 会生成一个调试的二维码。在真机上关闭退出小程序后进行扫码。
可以看到真机上显示远程调试已连接,而且可以在 IDE 上看到控制台。
将小程序上的应用放到真机调试 Action Sheet 菜单页面,点击显示操作菜单,看到命中断点。IDE上也显示出了断点,侧边是一些云调试的信息。可以在 IDE 中进行调试和操作。