Example code for H5 project development of iOS plug-in function

HBuilder is used to write H5 projects, and Xcode is used to write iOS native plug-ins. What I need to achieve is to click Print on the H5 page and run the iOS native plug-in to connect to the Bluetooth printer and print out the obtained content.

First go to the HBuilder documentation, download the HBuilder offline packaging iOS version SDK, run HBuilder-Hello, and start native plug-in development based on the HBuilder-Hello project.

HTML5+ base extension adopts a three-layer structure, JS layer, PluginBridge layer and Native layer. The three layers of functions are:
JS layer: Called on the Webview page, trigger the Native layer code and obtain the execution results. PluginBridge layer: Process the JS layer request and trigger the Native layer extension plug-in code.
Native layer: The platform native code of the plug-in extension is responsible for executing business logic and returning the execution results to the requested page.

First register the corresponding relationship
Modify the feature.plist file in PandoraAPI.bundle and add the corresponding relationship between the JS plug-in alias and the Native plug-in class. The SDK base will find and generate the corresponding relationship based on the corresponding relationship. Native object and execute the corresponding method.

plugintest is the class name of the plug-in class you want to extend. Create the plugintest class in iOS and inherit it from PGPlugin. Import PGPlugin.h and PGMethod.h in .h.

 #include "PGPlugin.h"
  #include "PGMethod.h"

If If you need a static library, just drag the .a and .h files into the project. The methods in native are divided into synchronous and asynchronous methods. I will only introduce the asynchronous methods here

- (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]];
    }
}

Function in 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 );

Code called in H5

plus.plugintest.PluginTestFunctionArrayArgu( printData, function( result ) {
                 mui.alert( result );
                },function(result){
                 mui.alert(result)
                 });

The general development process is like this. In fact, the real trouble is not the code but the various debugging of the IDE..
The following is Import the H5 project into Xcode to implement offline packaging. In the manifest.json of the project, modify the appid so that it is consistent with the appid in Xcode. Version and Build correspond to the name and code

under version. Change the manifest. Delete all the Chinese comments in json, and then import the H5 project into the www directory under Pandora. Remember to import all the files under the project into www, instead of importing the project folder directly into www, otherwise it will run. Don’t open the app.

Change the name of the folder on the upper level of www to the name consistent with the Appid. To modify the icon, you can put the icon into HBuilder to generate an icon of the corresponding size. This is very user-friendly.. Before iOS For development, you go to the artist. Then you change the project name, etc. I won’t go into details one by one.

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of Example code for H5 project development of iOS plug-in function. For more information, please follow other related articles on the PHP Chinese website!