iOS 端预览和调试小程序| 学习笔记

本文涉及的产品
mPaaS订阅基础套餐,标准版 3个月
简介: 快速学习 iOS 端预览和调试小程序。

开发者学堂课程【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 客户端的配置。重新运行工程,因为需要扫码所以需要在真机上进行调试。

运行后打开预览的二维码,下图就是真机的运行情况

image.png 

可以看到运行后界面新增调试小程序的按钮。点击调试按钮,扫描预览的二维码就可以打开调试的小程序。

image.png

调试完成后也可以在小程序上进行真机的调试,选择 debug 会生成一个调试的二维码。在真机上关闭退出小程序后进行扫码。

image.png

可以看到真机上显示远程调试已连接,而且可以在 IDE 上看到控制台。

将小程序上的应用放到真机调试 Action Sheet 菜单页面,点击显示操作菜单,看到命中断点。IDE上也显示出了断点,侧边是一些云调试的信息。可以在 IDE 中进行调试和操作。

相关文章
|
28天前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
4月前
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
|
5月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
70 0
|
4月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
178 0
|
6月前
|
小程序
微信小程序学习笔记(入门篇)
微信小程序学习笔记(入门篇)
72 0
|
6月前
|
小程序 Java 关系型数据库
基于Java微信小程序自驾游拼团设计和实现(源码+LW+调试文档+讲解等)
基于Java微信小程序自驾游拼团设计和实现(源码+LW+调试文档+讲解等)
|
6月前
|
小程序 JavaScript Java
基于Java微信小程序校园自助打印系统设计和实现(源码+LW+调试文档+讲解等)
基于Java微信小程序校园自助打印系统设计和实现(源码+LW+调试文档+讲解等)
|
小程序 前端开发 安全
《iOS逆向》小程序的基础配置
《iOS逆向》小程序的基础配置
143 0
《iOS逆向》小程序的基础配置
|
1月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。