提交 b3755979 编写于 作者: DCloud_iOS_XHY's avatar DCloud_iOS_XHY

Update unielement.md

上级 83d52869
...@@ -122,23 +122,23 @@ app平台 getAttribute 不支持获取 class、style 属性, uvue/vue 页面 ...@@ -122,23 +122,23 @@ app平台 getAttribute 不支持获取 class、style 属性, uvue/vue 页面
<!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView.compatibility --> <!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView.compatibility -->
<!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView.tutorial --> <!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView.tutorial -->
**getAndroidView获取原生View:** **getAndroidView获取原生View:**
```uts ```uts
//通过elementId 获取到UniElement对象 //通过elementId 获取到UniElement对象
const element = uni.getElementById(elementId) const element = uni.getElementById(elementId)
//getElementById不设置泛型,获取到安卓View //getElementById不设置泛型,获取到安卓View
if(element != null) { if(element != null) {
const view = element.getAndroidView() const view = element.getAndroidView()
} }
``` ```
**注意事项:** **注意事项:**
+ 安卓平台页面渲染时元素才会构建View,所以元素刚创建就获取View大概率是null,推荐页面onReady时获取。 + 安卓平台页面渲染时元素才会构建View,所以元素刚创建就获取View大概率是null,推荐页面onReady时获取。
+ 安卓平台获取的原生View尽可能的避免设置View的background属性,会导致元素background、border、boxshadow css效果失效或设置的background不生效,与设置background时机有关。 + 安卓平台获取的原生View尽可能的避免设置View的background属性,会导致元素background、border、boxshadow css效果失效或设置的background不生效,与设置background时机有关。
<!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView_1.name --> <!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView_1.name -->
...@@ -150,32 +150,32 @@ if(element != null) { ...@@ -150,32 +150,32 @@ if(element != null) {
<!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView_1.compatibility --> <!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView_1.compatibility -->
<!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView_1.tutorial --> <!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidView_1.tutorial -->
**getAndroidView通过泛型定义获取原生View:** **getAndroidView通过泛型定义获取原生View:**
```uts ```uts
//通过webViewElementId 获取web-view标签的UniElement对象 //通过webViewElementId 获取web-view标签的UniElement对象
const webViewElement = uni.getElementById(webViewElementId) const webViewElement = uni.getElementById(webViewElementId)
//getElementById设置泛型为安卓底层WebView对象, 直接获取WebView 如果泛型不匹配会返回null //getElementById设置泛型为安卓底层WebView对象, 直接获取WebView 如果泛型不匹配会返回null
if(webViewElement != null) { if(webViewElement != null) {
const webview = webViewElement.getAndroidView<WebView>() const webview = webViewElement.getAndroidView<WebView>()
} }
``` ```
**可通过getAndroidView泛型明确定义View类型的组件:** **可通过getAndroidView泛型明确定义View类型的组件:**
| 组件 | 对应 android 平台原生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) | | [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) | | [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) | | [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) | | [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大概率是null,推荐页面onReady时获取。
+ 安卓平台获取的原生View尽可能的避免设置View的background属性,会导致元素background、border、boxshadow 失效或设置的background不生效,与设置background时机有关。 + 安卓平台获取的原生View尽可能的避免设置View的background属性,会导致元素background、border、boxshadow 失效或设置的background不生效,与设置background时机有关。
<!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidActivity.name --> <!-- CUSTOMTYPEJSON.UniElement.methods.getAndroidActivity.name -->
...@@ -225,6 +225,36 @@ if(webViewElement != null) { ...@@ -225,6 +225,36 @@ if(webViewElement != null) {
<!-- CUSTOMTYPEJSON.UniElement.methods.getIOSView.tutorial --> <!-- CUSTOMTYPEJSON.UniElement.methods.getIOSView.tutorial -->
**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 时获取。
<!-- CUSTOMTYPEJSON.UniElement.methods.addEventListener.name --> <!-- CUSTOMTYPEJSON.UniElement.methods.addEventListener.name -->
<!-- CUSTOMTYPEJSON.UniElement.methods.addEventListener.description --> <!-- CUSTOMTYPEJSON.UniElement.methods.addEventListener.description -->
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册