diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index cbcab9392fd1d767ed5ed301bdd436aeda0c3ec3..bfb54770184d978a42d1ab7fc0bab89e44bb4b96 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -12,11 +12,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -// [Start quick_start] -import { PRODUCT_DATA } from '../viewmodel/GoodsViewModel'; -import { ProductDataModel } from '../model/GoodsModel'; +// [Start product_data] import { BuilderNode, FrameNode, NodeController, NodeRenderType } from '@kit.ArkUI'; import { webview } from '@kit.ArkWeb'; +import { PRODUCT_DATA } from '../viewmodel/GoodsViewModel'; +import { ProductDataModel } from '../model/GoodsModel'; // Margin vertical const MARGIN_VERTICAL: number = 8; @@ -88,11 +88,13 @@ class SearchNodeController extends NodeController { // [Start search_component] @Component struct SearchComponent { + @Prop searchWidth: number; + @Prop searchHeight: number; @Prop params: Params; controller: SearchController = new SearchController() build() { - Column({ space: MARGIN_VERTICAL }) { + Column({ space: 8 }) { Text($r("app.string.embed_mall")) .fontSize($r('app.string.ohos_id_text_size_body4')) .fontWeight(FONT_WEIGHT) @@ -107,9 +109,9 @@ struct SearchComponent { Grid() { ForEach(PRODUCT_DATA, (item: ProductDataModel, index: number) => { GridItem() { - Column({ space: MARGIN_VERTICAL }) { + Column({ space: 8 }) { Image(item.uri).width($r("app.integer.embed_image_size")) - Row({ space: MARGIN_VERTICAL }) { + Row({ space: 8 }) { Text(item.title) .fontSize($r('app.string.ohos_id_text_size_body1')) .width(100) @@ -139,8 +141,8 @@ struct SearchComponent { .backgroundColor($r('app.color.ohos_id_color_sub_background')) } .padding($r('app.string.ohos_id_card_margin_start')) - .width(this.params.width) - .height(this.params.height) + .width(this.searchWidth) + .height(this.searchHeight) } } // [End search_component] @@ -163,7 +165,7 @@ struct Index { ForEach(this.componentIdArr, (componentId: string) => { NodeContainer(this.nodeControllerMap.get(componentId)); }, (embedId: string) => embedId) - Web({ src: $rawfile("embed_view.html"), controller: this.browserTabController }) + Web({ src: $rawfile("nativeembed_view.html"), controller: this.browserTabController }) .backgroundColor($r('app.color.ohos_id_color_sub_background')) .zoomAccess(false) .enableNativeEmbedMode(true) @@ -208,4 +210,4 @@ struct Index { } } } -// [End quick_start] +// [End product_data] diff --git a/entry/src/main/ets/viewmodel/GoodsView.ets b/entry/src/main/ets/viewmodel/GoodsView.ets new file mode 100644 index 0000000000000000000000000000000000000000..abc2487cf0043e92c6d920e29f1556b849259d38 --- /dev/null +++ b/entry/src/main/ets/viewmodel/GoodsView.ets @@ -0,0 +1,131 @@ +// [Start goods_view] +import { promptAction } from '@kit.ArkUI'; +import { PRODUCT_DATA } from '../viewmodel/GoodsViewModel'; +import { webview } from '@kit.ArkWeb'; + + +@Entry +@Component +struct NonSameLayerRendering { + @State searchWidth: number = 0; + @State searchHeight: number = 0; + @State isWebInit: boolean = false; + browserTabController: WebviewController = new webview.WebviewController(); // WebviewController控制器 + + + build() { + Stack() { + Web({ src: $rawfile('nativeembed_view.html'), controller: this.browserTabController }) + .backgroundColor('#F1F3F5') + .onPageEnd(() => { + this.browserTabController.runJavaScript( + 'getEmbedSize()', + (error, result) => { + if (result) { + interface EmbedSize { + width: number, + height: number + } + let embedSize = JSON.parse(result) as EmbedSize; + this.searchWidth = embedSize.width; + this.searchHeight = embedSize.height; + this.isWebInit = true; + } + }); + }) + if (this.isWebInit){ + Column() { + // Since it needs to be displayed based on the actual loaded dimensions of the Web, it is necessary to wait + // for the Web to initialize and obtain the width and height before overlaying it onto the Web. + SearchComponent({ searchWidth: this.searchWidth, searchHeight: this.searchHeight }) + } + .zIndex(10) + } + } + } +} + + +/** + * 设置项的数据类 + */ +class ProductDataModel { + id: number; + uri: ResourceStr; + title: ResourceStr; + price: ResourceStr; + + + constructor(id: number, uri: ResourceStr, title: ResourceStr, price: ResourceStr) { + this.id = id; + this.uri = uri; + this.title = title; + this.price = price; + } +} +@Component +struct SearchComponent { + @Prop searchWidth: number; + @Prop searchHeight: number; + + + build() { + Column({ space: 8 }) { + Text('商城') + .fontSize(16) + Row() { + Image($r('app.media.nativeembed_search_icon')) + .width(14) + .margin({ left: 14 }) + Text('搜索相关宝贝') + .fontSize(14) + .opacity(0.6) + .fontColor('#000000') + .margin({ left: 14}) + } + .width('100%') + .margin(4) + .height(36) + .backgroundColor(Color.White) + .borderRadius(18) + .onClick(() => { + promptAction.showToast({ + message: '仅演示,可自行实现业务功能' + }); + }) + Grid() { + ForEach(PRODUCT_DATA, (item: ProductDataModel, index: number) => { + GridItem() { + Column({ space: 8 }) { + Image(item.uri) + .width(100) + .height(100) + Row({ space: 8 }) { + Text(item.title) + .fontSize(12) + Text(item.price) + .fontSize(12) + } + } + .backgroundColor(Color.White) + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.Center) + .width('100%') + .borderRadius(12) + .padding({ bottom: 12 }) + } + }, (item: ProductDataModel) => `${item.id}`) + } + .columnsTemplate('1fr 1fr') + .rowsGap(8) + .columnsGap(8) + .width('100%') + .height('90%') + .backgroundColor('#F1F3F5') + } + .padding(10) + .width(this.searchWidth) + .height(this.searchHeight) + } +} +// [End goods_view] \ No newline at end of file diff --git a/entry/src/main/ets/viewmodel/GoodsViewModel.ets b/entry/src/main/ets/viewmodel/GoodsViewModel.ets index f1c7a756035f5be625aacd8cac7ecb1249b5bf60..280e73d0fad87a0a69ea06e55129c2c396107386 100644 --- a/entry/src/main/ets/viewmodel/GoodsViewModel.ets +++ b/entry/src/main/ets/viewmodel/GoodsViewModel.ets @@ -16,11 +16,37 @@ import { ProductDataModel } from '../model/GoodsModel'; // [Start product_data] export const PRODUCT_DATA: Array = [ - new ProductDataModel(0, $r("app.media.embed_product000"), $r("app.string.embed_product_title000"), $r("app.string.embed_product_price000")), - new ProductDataModel(1, $r("app.media.embed_product001"), $r("app.string.embed_product_title001"), $r("app.string.embed_product_price001")), - new ProductDataModel(2, $r("app.media.embed_product002"), $r("app.string.embed_product_title002"), $r("app.string.embed_product_price002")), - new ProductDataModel(3, $r("app.media.embed_product003"), $r("app.string.embed_product_title003"), $r("app.string.embed_product_price003")), - new ProductDataModel(4, $r("app.media.embed_product004"), $r("app.string.embed_product_title004"), $r("app.string.embed_product_price004")), - new ProductDataModel(5, $r("app.media.embed_product005"), $r("app.string.embed_product_title005"), $r("app.string.embed_product_price005")), + new ProductDataModel(0, $r('app.media.nativeembed_product000'), $r('app.string.nativeembed_product_title000'), + $r("app.string.nativeembed_product_price000")), + new ProductDataModel(1, $r('app.media.nativeembed_product001'), $r('app.string.nativeembed_product_title001'), + $r('app.string.nativeembed_product_price001')), + new ProductDataModel(2, $r('app.media.nativeembed_product002'), $r('app.string.nativeembed_product_title002'), + $r('app.string.nativeembed_product_price002')), + new ProductDataModel(4, $r('app.media.nativeembed_product003'), $r('app.string.nativeembed_product_title004'), + $r('app.string.nativeembed_product_price004')), + new ProductDataModel(0, $r('app.media.nativeembed_product000'), $r('app.string.nativeembed_product_title000'), + $r("app.string.nativeembed_product_price000")), + new ProductDataModel(1, $r('app.media.nativeembed_product001'), $r('app.string.nativeembed_product_title001'), + $r('app.string.nativeembed_product_price001')), + new ProductDataModel(2, $r('app.media.nativeembed_product002'), $r('app.string.nativeembed_product_title002'), + $r('app.string.nativeembed_product_price002')), + new ProductDataModel(4, $r('app.media.nativeembed_product003'), $r('app.string.nativeembed_product_title004'), + $r('app.string.nativeembed_product_price004')), + new ProductDataModel(0, $r('app.media.nativeembed_product000'), $r('app.string.nativeembed_product_title000'), + $r("app.string.nativeembed_product_price000")), + new ProductDataModel(1, $r('app.media.nativeembed_product001'), $r('app.string.nativeembed_product_title001'), + $r('app.string.nativeembed_product_price001')), + new ProductDataModel(2, $r('app.media.nativeembed_product002'), $r('app.string.nativeembed_product_title002'), + $r('app.string.nativeembed_product_price002')), + new ProductDataModel(4, $r('app.media.nativeembed_product003'), $r('app.string.nativeembed_product_title004'), + $r('app.string.nativeembed_product_price004')), + new ProductDataModel(0, $r('app.media.nativeembed_product000'), $r('app.string.nativeembed_product_title000'), + $r("app.string.nativeembed_product_price000")), + new ProductDataModel(1, $r('app.media.nativeembed_product001'), $r('app.string.nativeembed_product_title001'), + $r('app.string.nativeembed_product_price001')), + new ProductDataModel(2, $r('app.media.nativeembed_product002'), $r('app.string.nativeembed_product_title002'), + $r('app.string.nativeembed_product_price002')), + new ProductDataModel(4, $r('app.media.nativeembed_product003'), $r('app.string.nativeembed_product_title004'), + $r('app.string.nativeembed_product_price004')), ]; // [End product_data] \ No newline at end of file diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 27366402712b18b938f5af470c21f95fb271c8e4..5d4213bcb8c340328eb733dccc85838239c9196b 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -13,108 +13,108 @@ "value": "ArkWebSameLevelRendering" }, { - "name": "embed_product_title000", - "value": "充电宝" + "name": "ohos_id_text_size_body1", + "value": "14" }, { - "name": "embed_product_title001", - "value": "笔记本电脑" + "name": "ohos_id_text_size_body2", + "value": "14" }, { - "name": "embed_product_title002", - "value": "移动手机" + "name": "ohos_id_text_size_body3", + "value": "12" }, { - "name": "embed_product_title003", - "value": "手机充电器" + "name": "ohos_id_text_size_body4", + "value": "18" }, { - "name": "embed_product_title004", - "value": "头戴式耳机" + "name": "ohos_id_corner_radius_default_m", + "value": "12" }, { - "name": "embed_product_title005", - "value": "背包" + "name": "ohos_id_elements_margin_vertical_m", + "value": "8" }, { - "name": "embed_product_price000", - "value": "¥79.9" + "name": "ohos_id_card_margin_start", + "value": "12" }, { - "name": "embed_product_price001", - "value": "¥6999" + "name": "nativeembed_product_title000", + "value": "充电宝" }, { - "name": "embed_product_price002", - "value": "¥5999" + "name": "nativeembed_full_percent", + "value": "100%" }, { - "name": "embed_product_price003", - "value": "¥72.5" + "name": "nativeembed_sixty_percent", + "value": "60%" }, { - "name": "embed_product_price004", - "value": "¥899" + "name": "nativeembed_mall", + "value": "商城" }, { - "name": "embed_product_price005", - "value": "¥328" + "name": "nativeembed_reason", + "value": "get internet permisssion" }, { - "name": "embed_reason", - "value": "get internet permisssion" + "name": "nativeembed_product_price005", + "value": "¥328" }, { - "name": "embed_full_percent", - "value": "100%" + "name": "nativeembed_product_price004", + "value": "¥899" }, { - "name": "embed_sixty_percent", - "value": "60%" + "name": "nativeembed_product_price003", + "value": "¥72.5" }, { - "name": "embed_mall", - "value": "商城" + "name": "nativeembed_product_price002", + "value": "¥5999" }, { - "name": "embed_search", - "value": "搜索" + "name": "nativeembed_product_price001", + "value": "¥6999" }, { - "name": "embed_prompt_text", - "value": "仅演示,可自行实现业务功能" + "name": "nativeembed_product_price000", + "value": "¥79.9" }, { - "name": "embed_search_text_placeholder", - "value": "搜索相关宝贝" + "name": "nativeembed_product_title001", + "value": "笔记本电脑" }, { - "name": "ohos_id_text_size_body1", - "value": "14" + "name": "nativeembed_product_title002", + "value": "移动手机" }, { - "name": "ohos_id_text_size_body2", - "value": "14" + "name": "nativeembed_product_title003", + "value": "手机充电器" }, { - "name": "ohos_id_text_size_body3", - "value": "12" + "name": "nativeembed_product_title004", + "value": "头戴式耳机" }, { - "name": "ohos_id_text_size_body4", - "value": "18" + "name": "nativeembed_product_title005", + "value": "背包" }, { - "name": "ohos_id_corner_radius_default_m", - "value": "12" + "name": "nativeembed_search", + "value": "搜索" }, { - "name": "ohos_id_elements_margin_vertical_m", - "value": "8" + "name": "nativeembed_prompt_text", + "value": "仅演示,可自行实现业务功能" }, { - "name": "ohos_id_card_margin_start", - "value": "12" + "name": "nativeembed_search_text_placeholder", + "value": "搜索相关宝贝" } ] } diff --git a/entry/src/main/resources/base/media/background.png b/entry/src/main/resources/base/media/background.png index f939c9fa8cc8914832e602198745f592a0dfa34d..4483ddad1f079e1089d685bd204ee1cfe1d01902 100644 Binary files a/entry/src/main/resources/base/media/background.png and b/entry/src/main/resources/base/media/background.png differ diff --git a/entry/src/main/resources/base/media/embed_product000.png b/entry/src/main/resources/base/media/nativeembed_product000.png similarity index 100% rename from entry/src/main/resources/base/media/embed_product000.png rename to entry/src/main/resources/base/media/nativeembed_product000.png diff --git a/entry/src/main/resources/base/media/embed_product001.png b/entry/src/main/resources/base/media/nativeembed_product001.png similarity index 100% rename from entry/src/main/resources/base/media/embed_product001.png rename to entry/src/main/resources/base/media/nativeembed_product001.png diff --git a/entry/src/main/resources/base/media/embed_product002.png b/entry/src/main/resources/base/media/nativeembed_product002.png similarity index 100% rename from entry/src/main/resources/base/media/embed_product002.png rename to entry/src/main/resources/base/media/nativeembed_product002.png diff --git a/entry/src/main/resources/base/media/embed_product003.png b/entry/src/main/resources/base/media/nativeembed_product003.png similarity index 100% rename from entry/src/main/resources/base/media/embed_product003.png rename to entry/src/main/resources/base/media/nativeembed_product003.png diff --git a/entry/src/main/resources/base/media/embed_product004.png b/entry/src/main/resources/base/media/nativeembed_product004.png similarity index 100% rename from entry/src/main/resources/base/media/embed_product004.png rename to entry/src/main/resources/base/media/nativeembed_product004.png diff --git a/entry/src/main/resources/base/media/embed_product005.png b/entry/src/main/resources/base/media/nativeembed_product005.png similarity index 100% rename from entry/src/main/resources/base/media/embed_product005.png rename to entry/src/main/resources/base/media/nativeembed_product005.png diff --git a/entry/src/main/resources/base/media/nativeembed_search_icon.png b/entry/src/main/resources/base/media/nativeembed_search_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f939c9fa8cc8914832e602198745f592a0dfa34d Binary files /dev/null and b/entry/src/main/resources/base/media/nativeembed_search_icon.png differ diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index a334e7dde2ceec93afe44546ab06f2e9a637d7ec..309918cc12d3318e8095735ca46f963f4d3f7dcf 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -115,6 +115,82 @@ { "name": "ohos_id_card_margin_start", "value": "12" + }, + { + "name": "nativeembed_full_percent", + "value": "100%" + }, + { + "name": "nativeembed_sixty_percent", + "value": "60%" + }, + { + "name": "nativeembed_mall", + "value": "商城" + }, + { + "name": "nativeembed_reason", + "value": "get internet permisssion" + }, + { + "name": "nativeembed_product_price005", + "value": "¥328" + }, + { + "name": "nativeembed_product_price004", + "value": "¥899" + }, + { + "name": "nativeembed_product_price003", + "value": "¥72.5" + }, + { + "name": "nativeembed_product_price002", + "value": "¥5999" + }, + { + "name": "nativeembed_product_price001", + "value": "¥6999" + }, + { + "name": "nativeembed_product_price000", + "value": "¥79.9" + }, + { + "name": "nativeembed_product_title000", + "value": "充电宝" + }, + { + "name": "nativeembed_product_title001", + "value": "笔记本电脑" + }, + { + "name": "nativeembed_product_title002", + "value": "移动手机" + }, + { + "name": "nativeembed_product_title003", + "value": "手机充电器" + }, + { + "name": "nativeembed_product_title004", + "value": "头戴式耳机" + }, + { + "name": "nativeembed_product_title005", + "value": "背包" + }, + { + "name": "nativeembed_search", + "value": "搜索" + }, + { + "name": "nativeembed_prompt_text", + "value": "仅演示,可自行实现业务功能" + }, + { + "name": "nativeembed_search_text_placeholder", + "value": "搜索相关宝贝" } ] } diff --git a/entry/src/main/resources/rawfile/embed_view.html b/entry/src/main/resources/rawfile/nativeembed_view.html similarity index 55% rename from entry/src/main/resources/rawfile/embed_view.html rename to entry/src/main/resources/rawfile/nativeembed_view.html index 277300c6f611c92046573a9cad78c2ac1d59f913..0ce774ca4002e9f49501e2d90a59cdd58c055e92 100644 --- a/entry/src/main/resources/rawfile/embed_view.html +++ b/entry/src/main/resources/rawfile/nativeembed_view.html @@ -5,13 +5,14 @@ -// [Start native_search] +
+
-// [End native_search] + diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index f80723ed05eef1a452e9f0408144d8799922ce87..ef764700f4d5bde4982e8c848dc74c6cb7fc3650 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -13,79 +13,79 @@ "value": "ArkWeb同层渲染" }, { - "name": "embed_product_title000", + "name": "nativeembed_product_title000", "value": "充电宝" }, { - "name": "embed_product_title001", + "name": "nativeembed_product_title001", "value": "笔记本电脑" }, { - "name": "embed_product_title002", + "name": "nativeembed_product_title002", "value": "移动手机" }, { - "name": "embed_product_title003", + "name": "nativeembed_product_title003", "value": "手机充电器" }, { - "name": "embed_product_title004", + "name": "nativeembed_product_title004", "value": "头戴式耳机" }, { - "name": "embed_product_title005", + "name": "nativeembed_product_title005", "value": "背包" }, { - "name": "embed_product_price000", + "name": "nativeembed_product_price000", "value": "¥79.9" }, { - "name": "embed_product_price001", + "name": "nativeembed_product_price001", "value": "¥6999" }, { - "name": "embed_product_price002", + "name": "nativeembed_product_price002", "value": "¥5999" }, { - "name": "embed_product_price003", + "name": "nativeembed_product_price003", "value": "¥72.5" }, { - "name": "embed_product_price004", + "name": "nativeembed_product_price004", "value": "¥899" }, { - "name": "embed_product_price005", + "name": "nativeembed_product_price005", "value": "¥328" }, { - "name": "embed_reason", + "name": "nativeembed_reason", "value": "get internet permisssion" }, { - "name": "embed_full_percent", + "name": "nativeembed_full_percent", "value": "100%" }, { - "name": "embed_sixty_percent", + "name": "nativeembed_sixty_percent", "value": "60%" }, { - "name": "embed_mall", + "name": "nativeembed_mall", "value": "商城" }, { - "name": "embed_search", + "name": "nativeembed_search", "value": "搜索" }, { - "name": "embed_prompt_text", + "name": "nativeembed_prompt_text", "value": "仅演示,可自行实现业务功能" }, { - "name": "embed_search_text_placeholder", + "name": "nativeembed_search_text_placeholder", "value": "搜索相关宝贝" }, {