Shulou(Shulou.com)06/03 Report--

This article mainly shows you "H5 project how to develop iOS plug-in functions", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "H5 project how to develop iOS plug-in features" this article.

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

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

The expansion of the HTML5+ base adopts a three-layer structure, namely, JS layer, PluginBridge layer and Native layer. The three layers of functions are:

JS layer: call in the Webview page, trigger the Native layer code, and get the execution result. PluginBridge layer: processes the JS layer request and triggers the Native layer extension code.

Native layer: the platform native code of the plug-in extension, which executes the business logic and returns the results to the request page.

Let's register the correspondence first.

Modify the feature.plist file in PandoraAPI.bundle to add the corresponding relationship between the JS plug-in alias and the Native plug-in class. According to the corresponding relationship, the SDK base will find and generate the corresponding 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, inherit it from PGPlugin, and import PGPlugin.h,PGMethod.h in .h

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

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

-(void) PluginTestFunctionArrayArgu: (PGMethod *) msg {NSArray * pArray = [NSArray array]; callback id,H5+ of if (msg) {/ / CallBackid asynchronous method notifies JS layer of success or failure according to callback ID NSString * cdId = [msg.arguments objectAtIndex:0]; / / the user's parameter is returned in the second parameter, and pArray = [msg.arguments objectAtIndex:1] can be passed in Array mode. NSLog (@ "cdId:% @ pArray:% @", cdId,pArray) / / if you use Array to pass parameters 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) / / you can directly call the method NSString * UUID = [ZQDeviceSDK Prn_GetPortList:1] in the imported static library; NSString * port = [UUID stringByTrimmingCharactersInSet: [NSCharacterSet whitespaceAndNewlineCharacterSet]]; [self startPrintText:pArray andUUID:port]; / / run the Native code as expected. Call the callback to notify the JS layer that it is running successfully and return the result PDRPluginResult * result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString]. / / if the Native code runs differently than expected, you need to notify the JS layer of an error through callback and return an error prompt / / PDRPluginResult * resultError = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@ "error!"] ; / / notify the JS layer of the running result of the Native layer, and JS Pluginbridge will find the corresponding callback method according to cbid and trigger [self toCallback:cdId withReslut: [result toJSONString]];}}

Functions in js

Document.addEventListener ("plusready", function () {/ / declared JS "extension alias" var _ BARCODE = 'plugintest',B = window.plus.bridge Var plugintest = {/ / declare the asynchronous return method / / notify the Native layer plugintest extension to run the "PluginTestFunction" method / / the parameter is the required native parameter 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); / / write the native asynchronous method name return B.exec (_ BARCODE, "PluginTestFunctionArrayArgu", [callbackID, Argus]) here;} 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 worth this, in fact, the real trouble is not the code but the debugging of IDE..

The following is how to import the H5 project into Xcode to achieve offline packaging. In the manifest.json of the project, modify appid to make it consistent with appid in Xcode. Version and Build correspond to name and code under version.

Delete all the Chinese comments in manifest.json, and then import the H5 project into the www directory under Pandora. Remember, import all the files under the project into www instead of the project folder directly under www, which will not open App.

Change the folder name of one level above www to the same name of Appid. Modify the icon to put the icon into HBuilder to generate an icon of the corresponding size. This needs to be very close to the people.. In the past, iOS developers always went to artists. Then I won't talk about it one by one by changing the name of the project.

These are all the contents of the article "how to develop iOS plug-ins in H5 Project". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.