接入 mPaaS 小程序并实现启动 iOS 版| 学习笔记

简介: 快速学习接入 mPaaS 小程序并实现启动 iOS 版。

开发者学堂课程【mPaaS 小程序开发实战 - 教你如何独立运行小程序 :接入 mPaaS 小程序并实现启动 iOS 版】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/741/detail/13123


接入 mPaaS 小程序并实现启动 iOS 版

 

基于已有工程且使用 CocoaPods 接入 mPaaS 小程序并实现启动 iOS 版

如何在 iOS 客户端快速集成小程序,主要结合在 mPasS 官方文档中小程序组件下>接入 iOS >快速开始这个文档进行一个说明和介绍。

1、接入工程到 mPaaS

这里根据不同的场景结构的提供的不同功能的接入方式。主要是介绍基于已有工程且使用 CocoaPods ,首先需要准备一个基于 CocoaPods 的原生工程。

如下图,有 Podfile、workspace 的一个 CocoaPods 原生工程

image.png

有了 CocoaPods 原生工程之后,查看基于已有工程且使用 CocoaPods 的文档。首先,第一步需要安装 mPaaS 的 Cocoapods 的插件,拷贝一下插件脚本,sh < (curl-s http://mpaas-ios.oss-cn-hangzhou.aliyuncs.com/cocoapods/installmPaaSCocoaPodsPlugin.sn),

image.png

然后打开终端,直接运行这个脚本。

image.png

在运行的过程中,需要输入电脑密码,然后获取搜集者权限。

image.png

这样就完成了插件,安装完成之后执行 pod mpaas version -alugin 命令检查插件是否安装成功。如果显示版本号,就说明插件成功安装。

image.png

安装插件完成后,下一步需要在 mPaaS 的控制台创建应用并下载一个 config 的配置文件,这里使用在阿里云里的账号,然后登录 mPaaS 控制台。打开这个控制台之后可以选择创建应用,创建一个属于自己名称的 app。

image.png

这里直接复用 mPaaS Demo 的应用。

image.png 

点击应用进入应用页面,在左侧栏选择初始化配置,代码配置

image.png

在 IOS 这个 type 下输入应用的 Bundle ID,设置为 com.mpaas.demo

image.png

然后点击下载配置将这个 config 文件保存到好本地,选择保存,这样就获取到 config 文件。

image.png

获取到文件之后,下一步是需要将 config 文件拷贝到工程的根目录下(与 Podfile 同级的根目录)。

image.png

下一步要在当前工程目录下,在终端执行 pod mpaas init 命令。

image.png

这个命令会自动的修改工程的 podfile 文件,podfile 文件里面会加入一些插件的配置、source 源,然后需要我们,需要手动修改 mPaaS_baseline 基线版本号,将其设置为10.1.68,修改完成后保存。

image.png

保存完成之后,就已经完成 mPaaS  的接入,接入完成后,接下来我们就可以开始添加 sdk。

2、添加 SDK

采用 Cocoapods-mPaaS 插件的方式,在 Podfile 文件中,使用 mPaaS_pod”mPaaS _TinyApp” 命令添加小程序组件依赖,添加到 Podfile 文件中。

将 mPaaS_pod”mPaaS _TinyApp” 命令放到 target 下的库中并保存

image.png

保存完成后执行 pod install 命令,在当前页面中打开终端,执行 pod install 命令。

image.png

这个工程就会从 mPaaS 的仓库里面去下载小程序组件所需要依赖的一些 SDK。首次时间较长。添加完成后如图:

image.png

完成后打开 workspace 文件

image.png

打开后可以看到在工程下添加了一个 mPaaS 目录,目录下有一些添加的相关文件

点击运行按钮即可看到工程成功运行,证明添加 SDK 操作完成。

image.png

3、使用 SDK

使用 SDK 主要分为三步:初始化配置、发布小程序、启动小程序

• 初始化配置

①容器的初始化配置

第一步:启动容器

在工程目录下获取初始化代码:

{

(void)application:(UIApplication*)applicationbeforeDidFinishLaunchingWithOptions:(NSDictionary*)launchOption

//初始化容器

[MPNebulaAdapterInterface initNebula];

}

然后在工程目录的 mPaaS 下面选择 DTFrameworklnterface +TinyAppDemo.m的 category。将初始化代码输入到类面里面就完成了初始化。

image.png

第二步,初始化完成之后,还需要进行对容器定制化的配置。重点主要是将小程序开关运营进行关闭。能在开发的过程中,使小程序的发布比较简单,所以将开发运营关闭

在工程目录下获取开关代码:

(void)application:(UIApplication*)application afterDidFinishLaunchingWithOptions:(NSDictionary*)launchOption

{

//定制容器

[MPNebulaAdapterInterface shareInstance].nebulaVeiwControllerClass=[MPH5WebViewControllerclass];

[MPNebulaAdapterInterface sharelnstance].nebulaNeedVerify = NO;

[MPNebulaAdapterInterface shareInstance].nebulaUserAgent = @"mP;

}

然后在工程目录的 mPaaS 下面选择 DTFrameworklnterface +TinyAppDemo.m 的 category。将开关代码 [MPNebulaAdapterInterface sharelnstance].nebulaNeedVerify = NO;输入到类中将开关关闭,关闭后就完成了小程序的容器定制。

image.png

第三步,如果后台发布小程序,客户端要拉取,需要进行一个简单的请求。

//全量更新离线包

[[MPNebulaAdapterInterface shareInstance] requestAllNebulaApps:^(NSDictionary *data,NSError *error){NSLog(@"");

]];

将这个全量更新离线包的方法输入到定制容器方法下面。

image.png

这样就完成了容器的初始化配置。

②小程序配置

在 info.plist 中配置以下 App 权限(进行权限申请):

NSBluetoothAlwaysUsageDescription:蓝牙权限

NSCameraUsageDescription:相机权限

NSPhotoLibraryUsageDescription:相册权限。

NSLocationWhenInUseUsageDescription:定位权限。

打开 Info 界面进项申请

image.png

点击下图按钮进行权限申请

image.png

将上述四个权限全部录入后,这就完成了小程序权限的配置

③动态库的配置

配置动态库在10.1.68.15(含)及以上版本基线中已经取消,无需配置。

④非框架托管配置

本身的工程是实时托管的,也无需操作。

• 发布小程序

在后台发布小程序—首先需要登录控制台,选择小程序发布。

image.png

如果是一个全新的应用,是第一次使用的话,要在小程序发布和配置管理里面配置虚拟域名。

image.png 

配置好域名后,就可以开始创建自己的小程序了。在左侧小程序正式包管理中,点击新建,输入小程序的 id, 也是当前小程序包唯一的标识是一个16位数字,第二栏是小程序的名称,都是自行输入便可。

image.png 

新建完成小程序后,点击左侧的添加按钮,来发布前端开发者开发好的一个包

image.png 

里面有一些参数需要配置,版本号第一次上传填写为1.0.0.0;客户端双端都勾选并填写范围为0.0.0.0,小程序就可以在选中的客户端上以0.0.0.0到最高版本都可使用;首次上传小程序需要自行添加一个图标;包类型为功能包;

image.png 

文件是需要上传的通过小程序开发者通过 IDE 开发出来的小程序的一个包,此处使用一个 mPaaS 默认示例小程序;

image.png 

主入口 URL为小程序安装包中的 appConfig.json 文件

image.png 

选择文件中 page 下的一个页面 page/tabBar/component/index即可

显示底部导航栏,如果需要小程序底部有底部 type,勾选‘是’,显示右上角功能选择默认选择‘是’,之后的属性都填默认选项即可

确认上述信息无误后点击‘提交’,提交结果

小程序就上传好了,上传完成后即可进行创建发布,发布时选择正式。

状态显示为‘正式发布中’,即证明小程序发布成功

• 启动小程序

完成发布小程序后,在客户端就可以通过调用小程序或 API 打开小程序。

直接调用此 API:[MPNebulaAdapterInterface startTinyAppWithId:appId params:nil];打开小程序。

首先打开工程,打开 helloworld 源码页面

image.png 

输入以下代码添加一个按钮:

UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];

btn.frame = CGRectMake(100,200,200,30) ;

[btn setTitle:@"打开小程序" forState:0];

[btn addTarget:self action:@selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];

[self.view addsubview:btn];

image.png 

添加点击事件

(void)clickBtn {

[MPNebulaAdapterInterface startTinyAppWithId:@"2018080616290001" params:nil

};

有两个参数,一个是 id(数字),另一个是一个扩展参数 params:nil,这就完成了启动小程序的配置。

重新运行工程客户端上出现‘打开小程序’按钮

image.png 

点击按钮进入小程序,就会打开一个 mPaaS 官方示例的小程序

小程序内容

image.png 

点击关闭按钮小程序即会退回首页

image.png 

相关文章
|
1月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
27 0
|
2月前
|
缓存 小程序 Android开发
mPaaS问题之更改包名之后就进不了小程序如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
67 1
|
3月前
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
|
1月前
|
移动开发 安全 小程序
mpaas常见问题之小程序容器,跑起来后一直提示 "网络不给力, 请稍后再试"如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
24 0
|
1月前
|
移动开发 监控 小程序
mPaaS常见问题之uniapp ios端云打包的配置config文件如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
27 0
|
2月前
|
缓存 小程序 Android开发
mPaaS问题之iOS调用插件的时候提示没有配置mpaas. Config文件如何解决
mPaaS配置是指在mPaaS平台上对移动应用进行的各项设置,以支持应用的定制化和优化运行;本合集将提供mPaaS配置的操作指南和最佳实践,助力开发者高效管理和调整移动应用的设置。
62 1
|
2月前
|
小程序 Android开发 iOS开发
mPaaS问题之Ios调小程序报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
46 0
mPaaS问题之Ios调小程序报错如何解决
|
2月前
|
小程序 安全 算法
mPaaS问题之使用小程序传参数报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
40 2
|
2月前
|
Web App开发 小程序 Android开发
mPaaS小程序问题之接入iOS后阿里百川初始化报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
48 1
|
4月前
|
Web App开发 移动开发 小程序
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,
"项目中mpaas升级到10.2.3 适配Android 14之后 app中的H5以及小程序都访问不了,显示“网络不给力,请稍后再试”,预发内网版本不能使用,线上版本可以正常使用,这个是什么原因啊,是某些参数没有配置吗,还是说是一些参数改错了?
59 2