Native-hybrid development solutions

Overview of Native Hybrid Development Solution

The uni-app native hybrid development solution allows developers to combine uni-app code with native platform code, leveraging the advantages of both cross-platform development and native capabilities. This solution is particularly suitable for scenarios requiring deep customization of native features or performance optimization while maintaining cross-platform development efficiency.

Core Principles of Native Hybrid Development

The uni-app native hybrid development is based on the following technical implementations:

1. Native Plugin Mechanism: Calling native functions through the uni-app plugin system
2. Native Project Integration: Embedding uni-app compilation results into native projects
3. Communication Bridge: Establishing bidirectional communication channels between JS and native code

Native Plugin Development and Usage

Android Platform Plugin Development Example

// UniPluginDemo.java
import io.dcloud.feature.uniapp.UniAppHookProxy;

public class UniPluginDemo implements UniAppHookProxy {
    @Override
    public void onAppCreate(Application application) {
        // Initialization logic
    }
    
    // Register native method
    @JSMethod(uiThread = false)
    public String nativeMethod(String params) {
        return "Android native processing result: " + params;
    }
}

iOS Platform Plugin Development Example

// UniPluginDemo.m
#import "DCUniPlugin.h"

@interface UniPluginDemo : DCUniPlugin

// Declare native method
- (NSString *)nativeMethod:(NSString *)params;

@end

@implementation UniPluginDemo

// Implement native method
- (NSString *)nativeMethod:(NSString *)params {
    return [NSString stringWithFormat:@"iOS native processing result: %@", params];
}

@end

Calling Native Plugins in uni-app

// Example of calling native methods
const plugin = uni.requireNativePlugin('UniPluginDemo')

plugin.nativeMethod('test parameter').then(res => {
    console.log('Native method returns:', res)
}).catch(err => {
    console.error('Call failed:', err)
})

Native Project Integration Solutions

Android Integration Steps

1. Place the H5 resources generated by uni-app compilation into the assets directory
2. Configure WebView settings in AndroidManifest.xml
3. Customize WebViewClient to handle page loading logic

// MainActivity.java
public class MainActivity extends AppCompatActivity {
    private WebView webView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        webView = findViewById(R.id.webView);
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        
        // Load uni-app compilation results
        webView.loadUrl("file:///android_asset/h5/index.html");
        
        // Add JS-native interaction interface
        webView.addJavascriptInterface(new JsInterface(), "nativeBridge");
    }
}

// JS-native interaction class
public class JsInterface {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}

iOS Integration Steps

1. Import uni-app compilation results into the project resource directory
2. Configure WKWebView and load local HTML
3. Implement WKScriptMessageHandler to handle JS calls

// ViewController.swift
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad();
        
        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "nativeBridge")
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        if let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "h5") {
            webView.loadFileURL(url, allowingReadAccessTo: url)
        }
    }
    
    // Handle JS calls
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeBridge", let body = message.body as? String {
            let alert = UIAlertController(title: "Native Alert", message: body, preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default))
            present(alert, animated: true)
        }
    }
}

Communication Solutions in Hybrid Development

JS Calling Native Methods

// Calling native methods in uni-app
function callNativeMethod() {
    if (uni.getSystemInfoSync().platform === 'android') {
        // Android platform call method
        plus.android.invoke('com.example.NativeClass', 'nativeMethod', 'parameter', 
            result => {
                console.log('Call successful:', result)
            },
            error => {
                console.error('Call failed:', error)
            }
        )
    } else if (uni.getSystemInfoSync().platform === 'ios') {
        // iOS platform call method
        plus.ios.invoke('NativeClass', 'nativeMethod:', 'parameter', 
            result => {
                console.log('Call successful:', result)
            },
            error => {
                console.error('Call failed:', error)
            }
        )
    }
}

Native Calling JS Methods

// Calling JS methods in Android
webView.evaluateJavascript("javascript:jsMethod('" + params + "')", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // Process return value
    }
});

// Calling JS methods in iOS
webView.evaluateJavaScript("jsMethod('\(params)')") { (result, error) in
    if let error = error {
        print("JS call error: \(error.localizedDescription)")
    } else if let result = result {
        print("JS return result: \(result)")
    }
}

Performance Optimization Strategies

1. Preloading Mechanism: Preload frequently used native modules
2. Caching Strategy: Reasonably cache native method call results
3. Thread Management: Avoid blocking the UI thread

// Preloading native modules in uni-app
const nativeModule = uni.requireNativePlugin('HeavyModule')

// Initialize in advance but don't use immediately
function preloadNativeModule() {
    nativeModule.initialize().then(() => {
        console.log('Native module preloading completed')
    })
}

// Fast call when actually needed
function usePreloadedModule() {
    nativeModule.executeMethod().then(result => {
        // Process result
    })
}

Solutions to Common Problems

Cross-Platform Compatibility Issues

// Platform judgment and adaptation
function platformAdaptiveMethod() {
    const platform = uni.getSystemInfoSync().platform
    
    if (platform === 'android') {
        // Android-specific implementation
        androidSpecificMethod()
    } else if (platform === 'ios') {
        // iOS-specific implementation
        iosSpecificMethod()
    } else {
        // Other platforms or H5 implementation
        defaultMethod()
    }
}

Version Compatibility Handling

// Handling version differences in Android
@SuppressLint("NewApi")
private void handleWithVersion() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // New API implementation
        webView.evaluateJavascript(script, callback)
    } else {
        // Compatibility implementation
        webView.loadUrl("javascript:" + script)
    }
}

Practical Application Scenarios

Map Navigation Integration

// Integrating native maps in uni-app
function showNativeMap(location) {
    const mapPlugin = uni.requireNativePlugin('NativeMapPlugin')
    
    mapPlugin.showMap({
        latitude: location.latitude,
        longitude: location.longitude,
        title: 'Destination',
        content: 'Detailed address information'
    }).then(result => {
        if (result.event === 'navigationStart') {
            console.log('Navigation started')
        } else if (result.event === 'navigationEnd') {
            console.log('Navigation ended')
        }
    })
}

Biometric Authentication

// Calling native biometric APIs
function authenticateWithBiometrics() {
    const bioPlugin = uni.requireNativePlugin('BiometricPlugin')
    
    bioPlugin.authenticate({
        title: 'Please verify identity',
        subtitle: 'Use fingerprint or Face ID',
        fallbackTitle: 'Use alternative verification method'
    }).then(result => {
        if (result.success) {
            console.log('Authentication successful')
            // Perform sensitive operations
        } else {
            console.warn('Authentication failed:', result.error)
        }
    })
}

Debugging and Testing Methods

1. Log Output: Unified logging for JS and native code
2. Remote Debugging: Use Chrome DevTools to debug WebView
3. Performance Analysis: Monitor hybrid app performance metrics

// Unified logging method
function logToNative(message) {
    const logPlugin = uni.requireNativePlugin('NativeLogger')
    logPlugin.log({
        level: 'debug',
        tag: 'uni-app',
        message: message
    })
    
    // Keep console output simultaneously
    console.log(message)
}

Security Considerations

1. Communication Security: Validate data in JS-native interactions
2. Permission Control: Reasonably request native permissions
3. Code Obfuscation: Protect native code security

// Security verification example in Android
@JavascriptInterface
public String sensitiveOperation(String params) {
    // Verify caller source
    if (!isValidCaller()) {
        return "error: invalid caller";
    }
    
    // Validate parameter format
    if (!validateParams(params)) {
        return "error: invalid params";
    }
    
    // Perform secure operation
    return performSecureOperation(params);
}