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 中进行调试和操作。

相关文章
|
3月前
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
|
4月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
59 0
|
3月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
|
5月前
|
小程序 安全 Java
基于Java微信小程序民宿短租系统设计和实现(源码+LW+调试文档+讲解等)
基于Java微信小程序民宿短租系统设计和实现(源码+LW+调试文档+讲解等)
基于Java微信小程序民宿短租系统设计和实现(源码+LW+调试文档+讲解等)
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
42 0
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
148 0
|
5月前
|
小程序
微信小程序学习笔记(入门篇)
微信小程序学习笔记(入门篇)
65 0
|
5月前
|
小程序 Java 关系型数据库
基于Java微信小程序自驾游拼团设计和实现(源码+LW+调试文档+讲解等)
基于Java微信小程序自驾游拼团设计和实现(源码+LW+调试文档+讲解等)
|
5月前
|
小程序 JavaScript Java
基于Java微信小程序校园自助打印系统设计和实现(源码+LW+调试文档+讲解等)
基于Java微信小程序校园自助打印系统设计和实现(源码+LW+调试文档+讲解等)
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
218 3