uniapp이 네이티브 개발을 통합하는 방법

모바일 애플리케이션 시장이 지속적으로 발전하면서 크로스 플랫폼 애플리케이션 개발도 트렌드가 되었습니다. 시장에서 가장 널리 사용되는 크로스 플랫폼 프레임워크 중 하나인 Uniapp은 우수한 호환성, 높은 개발 효율성 및 간단한 사용으로 개발자들에게 사랑을 받고 있습니다. 그러나 일부 요구 사항이 더 맞춤화되거나 일부 기본 기능을 호출해야 하는 경우 순수 Uniapp을 사용하여 애플리케이션을 개발하는 것은 요구 사항을 충족하지 못할 수 있습니다. 현재 우리는 혼합 개발을 위해 Uniapp과 네이티브를 사용해야 합니다. 이는 일부 맞춤형 요구 사항을 충족할 수 있을 뿐만 아니라 Uniapp 개발의 효율성을 최대한 활용할 수 있습니다. 아래에서는 실제 개발 경험을 바탕으로 유니앱이 네이티브 개발을 어떻게 통합하는지 자세히 소개하겠습니다.

1. 사전 준비

네이티브 개발 통합을 시작하기 전에 로컬 Android 및 iOS 개발 환경이 구성되어 있고 이를 능숙하게 사용할 수 있는지 확인해야 합니다. 동시에 Uniapp 프레임워크 사용에 익숙하고 기본 개발 작업을 마스터해야 합니다.

2. 네이티브 플러그인 도입

유니앱 개발에서는 네이티브 플러그인을 도입하여 네이티브 기능을 사용할 수 있습니다. Uniapp에 네이티브 플러그인을 도입하는 방법에는 플러그인을 직접 개발하는 방법과 시중에서 판매되는 플러그인을 사용하는 방법이 있습니다.

1. 나만의 플러그인 개발

네이티브 플러그인을 개발하는 것은 어렵지 않습니다. 다양한 네이티브 개발 문서에 따라 코드를 작성할 수 있습니다. 여기서는 보다 일반적인 예인 장치 정보 획득을 소개하겠습니다.

Android에서는 다음 코드를 통해 기기 정보를 얻을 수 있습니다.

import android.content.Context;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

public class DeviceInfoUtil {

    public static String getVersionName(Context context) {
        PackageManager packageManager = context.getPackageManager();
        try {
            PackageInfo packageInfo = packageManager.getPackageInfo(context.getPackageName(), 0);
            return packageInfo.versionName;
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        return "";
    }
}

iOS에서는 다음 코드를 통해 기기 정보를 얻을 수 있습니다.

#import <UIKit/UIKit.h>

@interface DeviceInfoUtil : NSObject

+ (NSString *)getUUID;

@end

@implementation DeviceInfoUtil

+ (NSString *)getUUID {
    NSString *uuid = [[[UIDevice currentDevice] identifierForVendor] UUIDString];
    return uuid;
}

@end

네이티브 함수를 작성한 후 이를 플러그인을 설치하여 Uniapp 마켓에 게시하세요. 다음으로 Uniapp에 네이티브 플러그인을 도입하여 사용할 수 있습니다. 구체적인 작업은 다음과 같습니다.

(1) 먼저 애플리케이션 프로젝트의 매니페스트.json 파일에 네이티브 플러그인에 대한 참조를 추가합니다.

"app-plus": {
    // 其他配置
    "plugins": {
      "device": {
        "version": "1.0.0",
        "provider": "xx"
      }
    }
  }

그 중 장치는 플러그인 이름이고 버전은 플러그인 버전이며 공급자는 플러그인 공급자입니다.

(2) Vue.js 구문을 사용하여 JS 파일을 정의하고 파일에서 플러그인의 기능을 호출한 후 내보냅니다.

const device = uni.requireNativePlugin('device')

function getVersionName() {
    return device.getVersionName()
}

export default {
    getVersionName
}

그 중 uni.requireNativePlugin('device') 은 플러그인이고 getVersionName()은 버전 번호를 가져오기 위해 플러그인에서 정의한 함수입니다.

2. 시중의 플러그인을 활용해보세요

플러그인을 직접 개발하는 것 외에도 유니앱 마켓에서 다른 개발자가 개발한 네이티브 플러그인을 다운로드하여 필요한 네이티브 기능을 사용할 수도 있습니다. 구체적인 작업은 다음과 같습니다.

(1) 애플리케이션 프로젝트의 매니페스트.json 파일에 필수 플러그인이 포함된 커스텀 컴포넌트를 추가합니다.

"usingComponents": {
    "xxx": "@/components/xxx/xxx"
  }

그 중 xxx는 필수 네이티브 플러그인 이름 @을 나타냅니다. /comComponents/xxx/xxx 프로젝트에서 플러그인 파일이 있는 상대 경로를 나타냅니다.

(2) Vue.js 구문의 JS 파일에 플러그인을 사용하기 위한 코드를 작성합니다.

import xxx from '@/components/xxx/xxx'

export default {
    data() {
        return {
            versionName: ''
        }
    },
    methods: {
        getVersion() {
            this.versionName = xxx.getVersionName()
        }
    }
}

여기서 xxx는 플러그인 이름이고 getVersion 함수는 플러그인 버전을 가져옵니다. 번호는 Vue.js 구문()의 메소드 객체에 정의되어 있으며 버전 번호를 얻기 위해 플러그인 메소드 xxx.getVersionName()을 호출합니다.

3. Uniapp과의 기본 상호 작용

이전 단계에서는 기본 플러그인을 성공적으로 통합했습니다. 그러나 개발 중에는 네이티브와 Uniapp 간의 상호 작용을 구현해야 할 수도 있습니다. 예를 들어 사용자가 기본 컨트롤에 응답하면 Uniapp 페이지로 전환해야 하며 Uniapp 페이지에서 기본 기능을 호출해야 하면 기본 코드를 호출해야 합니다. 이때 이를 구현하기 위해서는 Uniapp에서 제공하는 API를 사용해야 합니다.

1. Call Native Code

Uniapp에서 네이티브 코드를 호출하려면 다음 코드를 사용할 수 있습니다.

if (uni.os.android) {
    // Android端
    let intent = new Intent(Intent.ACTION_VIEW)
    intent.setClassName("com.package.name", "com.package.name.MainActivity")
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
    uni.context.startActivity(intent)
} else if (uni.os.ios) {
    // iOS端
    try {
        window.webkit.messageHandlers.nativeMethod.postMessage(params)
    } catch (e) {
        console.log(e)
    }
}

그 중 Android 측 호출 메소드는 Android API의 Intent 클래스를 사용해야 하며 점프를 설정해야 합니다. target 및 전송해야 할 파라미터, iOS 최종 호출 시 먼저 messageHandlers 속성이 있는지 확인한 후 postMessage 메소드를 통해 네이티브로 메시지를 보내야 하며, 해당 파라미터를 JSON으로 변환해야 합니다. 체재.

2. 네이티브 메시지 수신

네이티브에서 유니앱으로 데이터를 전송해야 할 경우, 네이티브가 해당 함수를 호출하고 데이터를 전달할 수 있도록 유니앱에서 해당 콜백 함수를 미리 정의해 주어야 합니다. 네이티브 데이터를 수신하고 그에 따라 애플리케이션에서 처리하려면 Vue.js 구문 파일에 공통 함수인 NativeCallback을 정의해야 합니다.

함수를 정의하는 코드는 다음과 같습니다.

export default {
    data() {
        return {
            versionName: ''
        }
    },
    mounted() {
        // 定义原生回调函数
        window.nativeCallback = (data) => {
            console.log(data)
        }
    }
}

그 중 window.nativeCallback은 정의된 콜백 함수 이름이고, data는 네이티브에서 전달된 데이터입니다. 마운트된 함수에서 콜백 함수를 전역 함수로 정의한 다음 데이터를 수신해야 할 때마다 사용할 수 있습니다.

위의 방법을 통해 Uniapp에서 네이티브 플러그인을 사용하고 네이티브 코드를 호출하여 다양한 시나리오의 요구 사항을 충족할 수 있습니다.

4. 요약

이 글에서는 Uniapp이 네이티브 개발을 통합하는 단계와 네이티브 플러그인 및 대화 상자와 같은 네이티브 기능을 사용하는 방법을 자세히 설명합니다. 좀 더 사용자 정의된 기능을 사용해야 하거나 애플리케이션을 빠르게 개발해야 하는 개발자의 경우 실제 필요에 따라 다양한 기본 플러그인이나 API를 사용하여 요구 사항을 충족할 수 있습니다. 동시에 네이티브 플러그인을 개발할 때 관련 지식을 더 잘 익히려면 다양한 네이티브 개발 문서를 참조하는 것이 좋습니다.

위 내용은 uniapp이 네이티브 개발을 통합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!