iOS 플러그인 기능의 H5 프로젝트 개발을 위한 예제 코드

零下一度
풀어 주다: 2017-05-10 14:23:55
원래의
2724명이 탐색했습니다.

HBuilder는 H5 프로젝트를 작성하는 데 사용되고 Xcode는 iOS 네이티브 플러그인을 작성하는 데 사용됩니다. 제가 달성해야 할 작업은 H5 페이지에서 인쇄를 클릭하고 iOS 네이티브 플러그인을 실행하여 블루투스 프린터에 연결하는 것입니다. 획득한 내용을 인쇄해 보세요.

먼저 HBuilder 설명서로 이동하여 HBuilder 오프라인 패키징 iOS 버전 SDK를 다운로드하고 HBuilder-Hello를 실행한 후 HBuilder-Hello 프로젝트를 기반으로 네이티브 플러그인 개발을 시작하세요.

HTML5+ 기본 확장은 JS 레이어, PluginBridge 레이어, Native 레이어의 3개 레이어 구조를 채택합니다. 세 가지 기능 계층은 다음과 같습니다.
JS 계층: Webview 페이지에서 호출되며 기본 계층 코드를 트리거하고 실행 결과를 얻습니다. PluginBridge 레이어: JS 레이어 요청을 처리하고 기본 레이어 확장 플러그인 코드를 트리거합니다.
네이티브 레이어: 플러그인 확장의 플랫폼 네이티브 코드는 비즈니스 로직을 실행하고 실행 결과를 요청된 페이지에 반환하는 역할을 합니다.

먼저 해당 관계를 등록합니다
PandoraAPI.bundle에서 feature.plist 파일을 수정하고 JS 플러그인 별칭과 네이티브 플러그인 클래스 간의 해당 관계를 추가하면 SDK 기반이 찾아집니다. 해당 관계를 기반으로 해당 관계를 생성하고 해당 메서드를 실행합니다.

plugintest는 확장하려는 플러그인 클래스의 클래스 이름입니다. iOS에서 플러그인 테스트 클래스를 생성하고 PGPlugin에서 상속합니다. PGPlugin.h를 .h, PGMethod.h

 #include "PGPlugin.h"
  #include "PGMethod.h"
로그인 후 복사
에서 가져옵니다. 🎜>정적 라이브러리가 필요하다면 .a, .h 파일을 프로젝트에 드래그하면 됩니다. 네이티브의 메소드는 동기식과 비동기식으로 나뉘는데요, 여기서는 비동기식 메소드만 소개하겠습니다

- (void)PluginTestFunctionArrayArgu:(PGMethod *)msg
{
    NSArray *pArray = [NSArray array];    if (msg)
    {        //CallBackid 异步方法的回调id,H5+ 会根据回调ID通知JS层运行结果成功或者失败
        NSString *cdId = [msg.arguments objectAtIndex:0];        //用户的参数会在第二个参数传回,可以按照Array方式传入
        pArray = [msg.arguments objectAtIndex:1];
        NSLog(@"cdId: %@    pArray: %@",cdId,pArray);        // 如果使用Array方式传递参数
        NSString *pResultString = [NSString stringWithFormat:@"%@ %@ %@ %@ %@ %@ %@",[pArray objectAtIndex:0],[pArray objectAtIndex:1], [pArray objectAtIndex:2],[pArray objectAtIndex:3],[pArray objectAtIndex:4], [pArray objectAtIndex:5],[pArray objectAtIndex:6]];
        NSLog(@"pResultString: %@",pResultString);        //可以直接调用所导入的静态库里面的方法
        NSString *UUID = [ZQDeviceSDK Prn_GetPortList:1];
        NSString *port = [UUID stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
        [self startPrintText:pArray andUUID:port];        // 运行Native代码结果和预期相同,调用回调通知JS层运行成功并返回结果
         PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString];        // 如果Native代码运行结果和预期不同,需要通过回调通知JS层出现错误,并返回错误提示//        PDRPluginResult *resultError = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@"出错了!"];
        //通知JS层Native层运行结果,JS Pluginbridge会根据cbid找到对应的回调方法并触发
       [self toCallback:cdId withReslut:[result toJSONString]];
    }
}
로그인 후 복사

js의 함수

document.addEventListener( "plusready",  function(){  // 声明的JS“扩展插件别名”
     var _BARCODE = 'plugintest',B = window.plus.bridge;     var plugintest ={         // 声明异步返回方法
         // 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
        //参数为所需传入原生的参数
         PluginTestFunctionArrayArgu : function (Argus, successCallback, errorCallback ){             var success = typeof successCallback !== 'function' ? null : function(args) 
              {
                  successCallback(args);
              },
              fail = typeof errorCallback !== 'function' ? null : function(code) 
              {
                  errorCallback(code);
              };
              callbackID = B.callbackId(success, fail);              //这里写上原生中的异步方法名
              return B.exec(_BARCODE, "PluginTestFunctionArrayArgu", [callbackID, Argus]);
         }   
      window.plus.plugintest = plugintest;
 }, true );
로그인 후 복사

H5에서 호출되는 코드

plus.plugintest.PluginTestFunctionArrayArgu( printData, function( result ) {
                 mui.alert( result );
                },function(result){
                 mui.alert(result)
                 });
로그인 후 복사
일반적인 개발 과정은 이렇습니다. 사실 진짜 문제는 코드가 아니라 IDE의 다양한 디버깅입니다..

다음은 오프라인 패키징을 구현하기 위해 H5 프로젝트를 가져오는 것입니다. 프로젝트의 매니페스트.json에서 appid를 Xcode의 appid와 일치하도록 수정합니다.

매니페스트를 변경합니다. json에서 모든 중국어 주석을 삭제한 다음 프로젝트 폴더를 가져오는 대신 프로젝트 아래의 모든 파일을 www로 가져오는 것을 잊지 마세요. www로 직접 연결하지 않으면 앱이 실행되지 않습니다.

www 상위 폴더 이름을 Appid에 맞는 이름으로 변경하세요. 아이콘을 수정하려면 해당 아이콘을 HBuilder에 넣어서 해당 크기의 아이콘을 생성하면 됩니다. user-Friendly.. iOS 이전에는 개발을 위해 항상 아티스트에게 가서 프로젝트 이름 등을 변경합니다. 자세한 내용은 하나씩 다루지 않겠습니다.

[관련 추천]

1.

무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3.

php.cn 원본 html5 동영상 튜토리얼

위 내용은 iOS 플러그인 기능의 H5 프로젝트 개발을 위한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿