From b3755979062422909236960fef601be140cd1eba Mon Sep 17 00:00:00 2001 From: DCloud_iOS_XHY Date: Wed, 31 Jul 2024 15:39:30 +0800 Subject: [PATCH] Update unielement.md --- docs/dom/unielement.md | 112 ++++++++++++++++++++++++++--------------- 1 file changed, 71 insertions(+), 41 deletions(-) diff --git a/docs/dom/unielement.md b/docs/dom/unielement.md index 17c5a62a..994366fc 100644 --- a/docs/dom/unielement.md +++ b/docs/dom/unielement.md @@ -122,23 +122,23 @@ app平台 getAttribute 不支持获取 class、style 属性， uvue/vue 页面 - - -**getAndroidView获取原生View：** - -```uts -//通过elementId 获取到UniElement对象 -const element = uni.getElementById(elementId) -//getElementById不设置泛型，获取到安卓View -if(element != null) { - const view = element.getAndroidView() -} + + +**getAndroidView获取原生View：** + +```uts +//通过elementId 获取到UniElement对象 +const element = uni.getElementById(elementId) +//getElementById不设置泛型，获取到安卓View +if(element != null) { + const view = element.getAndroidView() +} ``` - -**注意事项：** - -+ 安卓平台页面渲染时元素才会构建View，所以元素刚创建就获取View大概率是null，推荐页面onReady时获取。 -+ 安卓平台获取的原生View尽可能的避免设置View的background属性，会导致元素background、border、boxshadow css效果失效或设置的background不生效，与设置background时机有关。 + +**注意事项：** + ++ 安卓平台页面渲染时元素才会构建View，所以元素刚创建就获取View大概率是null，推荐页面onReady时获取。 ++ 安卓平台获取的原生View尽可能的避免设置View的background属性，会导致元素background、border、boxshadow css效果失效或设置的background不生效，与设置background时机有关。 @@ -150,32 +150,32 @@ if(element != null) { - - -**getAndroidView通过泛型定义获取原生View：** - -```uts -//通过webViewElementId 获取web-view标签的UniElement对象 -const webViewElement = uni.getElementById(webViewElementId) -//getElementById设置泛型为安卓底层WebView对象, 直接获取WebView 如果泛型不匹配会返回null -if(webViewElement != null) { - const webview = webViewElement.getAndroidView() -} -``` - -**可通过getAndroidView泛型明确定义View类型的组件：** - -| 组件 | 对应 android 平台原生View | -| --------- | -------------------------------- | -| [view](https://doc.dcloud.net.cn/uni-app-x/component/view.html) | [ViewGroup](https://developer.android.google.cn/reference/android/view/ViewGroup) | -| [input](https://doc.dcloud.net.cn/uni-app-x/component/input.html) | [AppCompatEditText](https://developer.android.google.cn/reference/kotlin/androidx/appcompat/widget/AppCompatEditText) | -| [textarea](https://doc.dcloud.net.cn/uni-app-x/component/textarea.html) | [AppCompatEditText](https://developer.android.google.cn/reference/kotlin/androidx/appcompat/widget/AppCompatEditText) | + + +**getAndroidView通过泛型定义获取原生View：** + +```uts +//通过webViewElementId 获取web-view标签的UniElement对象 +const webViewElement = uni.getElementById(webViewElementId) +//getElementById设置泛型为安卓底层WebView对象, 直接获取WebView 如果泛型不匹配会返回null +if(webViewElement != null) { + const webview = webViewElement.getAndroidView() +} +``` + +**可通过getAndroidView泛型明确定义View类型的组件：** + +| 组件 | 对应 android 平台原生View | +| --------- | -------------------------------- | +| [view](https://doc.dcloud.net.cn/uni-app-x/component/view.html) | [ViewGroup](https://developer.android.google.cn/reference/android/view/ViewGroup) | +| [input](https://doc.dcloud.net.cn/uni-app-x/component/input.html) | [AppCompatEditText](https://developer.android.google.cn/reference/kotlin/androidx/appcompat/widget/AppCompatEditText) | +| [textarea](https://doc.dcloud.net.cn/uni-app-x/component/textarea.html) | [AppCompatEditText](https://developer.android.google.cn/reference/kotlin/androidx/appcompat/widget/AppCompatEditText) | | [web-view](https://doc.dcloud.net.cn/uni-app-x/component/web-view.html) | [WebView](https://developer.android.google.cn/reference/android/webkit/WebView) | - -**注意事项：** - -+ 安卓平台页面渲染时元素才会构建View，所以元素刚创建就获取View大概率是null，推荐页面onReady时获取。 -+ 安卓平台获取的原生View尽可能的避免设置View的background属性，会导致元素background、border、boxshadow 失效或设置的background不生效，与设置background时机有关。 + +**注意事项：** + ++ 安卓平台页面渲染时元素才会构建View，所以元素刚创建就获取View大概率是null，推荐页面onReady时获取。 ++ 安卓平台获取的原生View尽可能的避免设置View的background属性，会导致元素background、border、boxshadow 失效或设置的background不生效，与设置background时机有关。 @@ -225,6 +225,36 @@ if(webViewElement != null) { +**getIOSView 获取原生 View：** + +```uts +//通过 webViewElementId 获取 web-view 标签的 UniElement 对象 +const webViewElement = uni.getElementById(webViewElementId) +//获取原生 view +const view = webViewElement?.getIOSView(); +//判断 view 是否存在，类型是否为 WKWebView +if (view != null && view instanceof WKWebView) { + //将 view 转换为 WKWebView 类型 + const webView = view! as WKWebView; +} +``` + +更多示例请参考 uts 插件 [uts-get-native-view](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/uni_modules/uts-get-native-view/utssdk/app-ios/index.uts) + +**组件对应原生 View 类型：** + +| 组件 | 对应 iOS 平台原生 View | +| --------- | -------------------------------- | +| [view](https://doc.dcloud.net.cn/uni-app-x/component/view.html) | [UIView](https://developer.apple.com/documentation/uikit/uiview) | +| [input](https://doc.dcloud.net.cn/uni-app-x/component/input.html) | [UITextField](https://developer.apple.com/documentation/uikit/uitextfield) | +| [textarea](https://doc.dcloud.net.cn/uni-app-x/component/textarea.html) | [UITextView](https://developer.apple.com/documentation/uikit/uitextview) | +| [web-view](https://doc.dcloud.net.cn/uni-app-x/component/web-view.html) | [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) | + +**注意事项：** + ++ iOS平台 uvue 环境使用 js 驱动无法处理原生类型，getIOSView 方法需要在 uts 插件中使用。 ++ iOS平台页面渲染时元素才会构建View，所以元素刚创建就获取 View 大概率是 null，推荐页面 onReady 时获取。 + -- GitLab