美文网首页
iOS-APICloud混合模块开发

iOS-APICloud混合模块开发

作者: MrHC | 来源:发表于2017-10-31 10:55 被阅读61次

        技术的革新日新月异,技术发展日新月异.当然,前端开发和原生开发各有所长,我接下来的系列文章,将和各位一起耍耍原生混合模块开发!同样,也看看原生和前端相爱相杀的故事~好了,直接进入正题    

 一.是什么? 通俗一点,就是iOS原生开发App某一个功能或者模块,然后接入前端的项目中

 二.开发环境: 

         1.Xcode6.0或更高版本

         2.Mac os x 10.9以上

三.开发步骤

1.前往http://docs.apicloud.com/APICloud/download下载最新版本的模块开发SDK,找到里面的ModulesDevProject_iOS.zip,这里面包含ModuleDemo、ModulesDevProject和说明文件,进行模块开发之前一定要先阅读read me.txt,了解各个目录里面的内容和功能

2.下载模块中SDK后,删除原有demo中的文件(投机办法,直接将项目中原有模块删除,后面步骤中就可以直接创建自己的模块)

修改原有的demo中文件的内容,将原有的 (模块名称/类名/方法)    删除,修改为自己要用的名称

3.使用APICloud 项目demo中自己修改过的混合模块开发项目(ModulesDevProject  文件夹中的工程工具)

5.打开开发工具工程,修改模块名称

>查找到文件夹

>修改这两个文件夹名称为你自己模块想要命名的名称,且这两个文件夹名称一样

6.创建自己的模块(静态库工程),命名与步骤2中的模块命名一样

先关闭创建的静态库工程,然后打开UZApp工程,将静态库工程中.xcodeproj  文件拖入到UZModules 下面

最后我们需要将静态库工程的Build Active Architecture Only设置为No,如图:

7.创建模块类

在ModuleDemo静态库工程中引入必要的UZModule.h头文件,UZAppDelegate.h和UZAppUtils.h等头文件根据需要引入,这些头文件可以在下载的SDK包里面找到。

在ModuleDemo静态库工程中新建一个UZModuleDemo类,继承于UZModule类,其中UZModule类为模块的基类。模块开发过程中文件命名时提倡加前缀,以避免和其它模块冲突。

模块生命周期:

当在前端JS中首次调用模块的方法时,引擎会调用模块类的 - (id)initWithUZWebView:(UZWebView *)webView 方法进行初始化;

当模块所在的页面被销毁时,模块类也会被销毁,引擎会主动调用其 - (void)dispose 方法。

8.回传数据给JS

我们在这里将用户点击的按钮的index回调给JS端,注意sendResultEventWithCallbackId:dataDict:errDict:doDelete:方法的最后一个参数,如果需要多次进行回调,那么就必须传NO。

- (void)alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger)buttonIndex {

if(_cbId >0) {

NSDictionary*ret = @{@"index":@(buttonIndex)};

[selfsendResultEventWithCallbackId:_cbId dataDict:ret errDict:nildoDelete:YES];

}

}

9. JS调用模块方法

前端JS必须使用JSON格式数据作为JS与Native之间交换数据的传参,APICloud引擎会对JS传入的参数进行解析并封装,前端JS使用模块之前需要require模块对象。

找到UZApp工程中widget目录下的index.html,添加调用moduleDemo模块的showAlert方法的代码:

functionshowAlert(){

vardemo = api.require('moduleDemo');

demo.showAlert({

msg:'Hello App!'

},function(ret, err){

varmsg ="点击了第"+ ret.index +"个按钮";

api.toast({

msg: msg

});

});

}

相关文章

  • iOS-APICloud混合模块开发

    技术的革新日新月异,技术发展日新月异.当然,前端开发和原生开发各有所长,我接下来的系列文章,将和各位一起耍...

  • Flutter 与原生交互4

    对于混合开发的应用而言,通常我们只会将应用的部分模块修改成 Flutter 开发,其他模块继续保留原生开发,因此应...

  • Ionic实现混合开发--探索之旅

    混合开发是什么? 个人理解混合开发指的是编写一个项目将涉及原生APP的API封装成JS模块,以插件的形式可以引入或...

  • flutter学习3—flutter与iOS混合开发

    前言 你已经有了iOS工程,想集成flutter模块到现有工程实现混合开发 一、现有工程集成flutter模块方式...

  • 混合开发:RN调用原生模块

    目录一. 前言二. 示例:RN调用原生模块(场景五)的详细开发步骤 1. 基本使用 2. 原生模块与OC类的数据交...

  • [java]57、不同模块日志

    1、不同模块之间的日志 在实际开发过程中,不同的模块内部实现的日志系统不一定相同,当带有多个日志系统的模块混合在一...

  • 基于 Kibana6.x eUI的React 页面开发

    React和JS的混合对于server side JS 开发真的是个创意, 模块化清晰, 构造简单。 Ref: 1...

  • 如何在android原生中加载RN页面

    上一篇文章写了如何配置RN和Android原生混合开发的相关配置Android 模块引入ReactNative相关...

  • iOS开发——最简单web容器化框架

    随着混合开发的流行,在 iOS 开发中,web 容器已经成为任何一款中型及以上规模 App 必备的模块,甚至一些小...

  • 本周工作总结

    本周做裤兜语文学生端招生模块。招生模块是web与客户端混合开发,由安卓先行对接实现。iOS需要按照安卓采取同样的对...

网友评论

      本文标题:iOS-APICloud混合模块开发

      本文链接:https://www.haomeiwen.com/subject/xrvolxtx.html