diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index bfb54770184d978a42d1ab7fc0bab89e44bb4b96..12ed8603d2a32b13a8df65ac6f0d49f6003ee1bd 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -13,10 +13,10 @@ * limitations under the License. */ // [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'; +import { BuilderNode, FrameNode, NodeController, NodeRenderType } from '@kit.ArkUI'; +import { webview } from '@kit.ArkWeb'; // Margin vertical const MARGIN_VERTICAL: number = 8; @@ -88,13 +88,11 @@ 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: 8 }) { + Column({ space: MARGIN_VERTICAL }) { Text($r("app.string.embed_mall")) .fontSize($r('app.string.ohos_id_text_size_body4')) .fontWeight(FONT_WEIGHT) @@ -109,9 +107,9 @@ struct SearchComponent { Grid() { ForEach(PRODUCT_DATA, (item: ProductDataModel, index: number) => { GridItem() { - Column({ space: 8 }) { + Column({ space: MARGIN_VERTICAL }) { Image(item.uri).width($r("app.integer.embed_image_size")) - Row({ space: 8 }) { + Row({ space: MARGIN_VERTICAL }) { Text(item.title) .fontSize($r('app.string.ohos_id_text_size_body1')) .width(100) @@ -141,12 +139,11 @@ struct SearchComponent { .backgroundColor($r('app.color.ohos_id_color_sub_background')) } .padding($r('app.string.ohos_id_card_margin_start')) - .width(this.searchWidth) - .height(this.searchHeight) + .width(this.params.width) + .height(this.params.height) } } // [End search_component] - @Builder function searchBuilder(params: Params) { SearchComponent({ params: params }) @@ -165,7 +162,7 @@ struct Index { ForEach(this.componentIdArr, (componentId: string) => { NodeContainer(this.nodeControllerMap.get(componentId)); }, (embedId: string) => embedId) - Web({ src: $rawfile("nativeembed_view.html"), controller: this.browserTabController }) + Web({ src: $rawfile("embed_view.html"), controller: this.browserTabController }) .backgroundColor($r('app.color.ohos_id_color_sub_background')) .zoomAccess(false) .enableNativeEmbedMode(true) @@ -173,14 +170,13 @@ struct Index { const componentId = embed.info?.id?.toString() as string if (embed.status === NativeEmbedStatus.CREATE) { let nodeController = new SearchNodeController(); - this.getUIContext().vp2px nodeController.setRenderOption({ surfaceId: embed.surfaceId as string, type: embed.info?.type as string, renderType: NodeRenderType.RENDER_TYPE_TEXTURE, embedId: embed.embedId as string, - width: this.getUIContext().vp2px(embed.info?.width), - height: this.getUIContext().vp2px(embed.info?.height) + width: this.getUIContext().px2vp(embed.info?.width), + height: this.getUIContext().px2vp(embed.info?.height) }); nodeController.rebuild(); this.nodeControllerMap.set(componentId, nodeController); @@ -189,8 +185,8 @@ struct Index { let nodeController = this.nodeControllerMap.get(componentId); nodeController?.updateNode({ text: 'update', - width: this.getUIContext().vp2px(embed.info?.width), - height: this.getUIContext().vp2px(embed.info?.height) + width: this.getUIContext().px2vp(embed.info?.width), + height: this.getUIContext().px2vp(embed.info?.height) } as ESObject); nodeController?.rebuild(); } else { @@ -210,4 +206,4 @@ struct Index { } } } -// [End product_data] +// [End product_data] \ No newline at end of file diff --git a/entry/src/main/ets/viewmodel/GoodsView.ets b/entry/src/main/ets/viewmodel/GoodsView.ets deleted file mode 100644 index 5fd8098504068f1ee9f4e01fe0a81d0460565674..0000000000000000000000000000000000000000 --- a/entry/src/main/ets/viewmodel/GoodsView.ets +++ /dev/null @@ -1,126 +0,0 @@ -// [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) - } - } - } -} - -/** - * Settings data class - */ -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('Mall') - .fontSize(16) - Row() { - Image($r('app.media.nativeembed_search_icon')) - .width(14) - .margin({ left: 14 }) - Text('Search for related items') - .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: 'For demonstration only, you can implement business functions on your own.' - }); - }) - 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 280e73d0fad87a0a69ea06e55129c2c396107386..f1c7a756035f5be625aacd8cac7ecb1249b5bf60 100644 --- a/entry/src/main/ets/viewmodel/GoodsViewModel.ets +++ b/entry/src/main/ets/viewmodel/GoodsViewModel.ets @@ -16,37 +16,11 @@ import { ProductDataModel } from '../model/GoodsModel'; // [Start product_data] export const PRODUCT_DATA: Array = [ - 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')), + 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")), ]; // [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 5d4213bcb8c340328eb733dccc85838239c9196b..27366402712b18b938f5af470c21f95fb271c8e4 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": "ohos_id_text_size_body1", - "value": "14" + "name": "embed_product_title000", + "value": "充电宝" }, { - "name": "ohos_id_text_size_body2", - "value": "14" + "name": "embed_product_title001", + "value": "笔记本电脑" }, { - "name": "ohos_id_text_size_body3", - "value": "12" + "name": "embed_product_title002", + "value": "移动手机" }, { - "name": "ohos_id_text_size_body4", - "value": "18" + "name": "embed_product_title003", + "value": "手机充电器" }, { - "name": "ohos_id_corner_radius_default_m", - "value": "12" + "name": "embed_product_title004", + "value": "头戴式耳机" }, { - "name": "ohos_id_elements_margin_vertical_m", - "value": "8" + "name": "embed_product_title005", + "value": "背包" }, { - "name": "ohos_id_card_margin_start", - "value": "12" + "name": "embed_product_price000", + "value": "￥79.9" }, { - "name": "nativeembed_product_title000", - "value": "充电宝" + "name": "embed_product_price001", + "value": "￥6999" }, { - "name": "nativeembed_full_percent", - "value": "100%" + "name": "embed_product_price002", + "value": "￥5999" }, { - "name": "nativeembed_sixty_percent", - "value": "60%" + "name": "embed_product_price003", + "value": "￥72.5" }, { - "name": "nativeembed_mall", - "value": "商城" + "name": "embed_product_price004", + "value": "￥899" }, { - "name": "nativeembed_reason", - "value": "get internet permisssion" + "name": "embed_product_price005", + "value": "￥328" }, { - "name": "nativeembed_product_price005", - "value": "￥328" + "name": "embed_reason", + "value": "get internet permisssion" }, { - "name": "nativeembed_product_price004", - "value": "￥899" + "name": "embed_full_percent", + "value": "100%" }, { - "name": "nativeembed_product_price003", - "value": "￥72.5" + "name": "embed_sixty_percent", + "value": "60%" }, { - "name": "nativeembed_product_price002", - "value": "￥5999" + "name": "embed_mall", + "value": "商城" }, { - "name": "nativeembed_product_price001", - "value": "￥6999" + "name": "embed_search", + "value": "搜索" }, { - "name": "nativeembed_product_price000", - "value": "￥79.9" + "name": "embed_prompt_text", + "value": "仅演示，可自行实现业务功能" }, { - "name": "nativeembed_product_title001", - "value": "笔记本电脑" + "name": "embed_search_text_placeholder", + "value": "搜索相关宝贝" }, { - "name": "nativeembed_product_title002", - "value": "移动手机" + "name": "ohos_id_text_size_body1", + "value": "14" }, { - "name": "nativeembed_product_title003", - "value": "手机充电器" + "name": "ohos_id_text_size_body2", + "value": "14" }, { - "name": "nativeembed_product_title004", - "value": "头戴式耳机" + "name": "ohos_id_text_size_body3", + "value": "12" }, { - "name": "nativeembed_product_title005", - "value": "背包" + "name": "ohos_id_text_size_body4", + "value": "18" }, { - "name": "nativeembed_search", - "value": "搜索" + "name": "ohos_id_corner_radius_default_m", + "value": "12" }, { - "name": "nativeembed_prompt_text", - "value": "仅演示，可自行实现业务功能" + "name": "ohos_id_elements_margin_vertical_m", + "value": "8" }, { - "name": "nativeembed_search_text_placeholder", - "value": "搜索相关宝贝" + "name": "ohos_id_card_margin_start", + "value": "12" } ] } diff --git a/entry/src/main/resources/base/media/background.png b/entry/src/main/resources/base/media/background.png index 4483ddad1f079e1089d685bd204ee1cfe1d01902..f939c9fa8cc8914832e602198745f592a0dfa34d 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/nativeembed_product000.png b/entry/src/main/resources/base/media/embed_product000.png similarity index 100% rename from entry/src/main/resources/base/media/nativeembed_product000.png rename to entry/src/main/resources/base/media/embed_product000.png diff --git a/entry/src/main/resources/base/media/nativeembed_product001.png b/entry/src/main/resources/base/media/embed_product001.png similarity index 100% rename from entry/src/main/resources/base/media/nativeembed_product001.png rename to entry/src/main/resources/base/media/embed_product001.png diff --git a/entry/src/main/resources/base/media/nativeembed_product002.png b/entry/src/main/resources/base/media/embed_product002.png similarity index 100% rename from entry/src/main/resources/base/media/nativeembed_product002.png rename to entry/src/main/resources/base/media/embed_product002.png diff --git a/entry/src/main/resources/base/media/nativeembed_product003.png b/entry/src/main/resources/base/media/embed_product003.png similarity index 100% rename from entry/src/main/resources/base/media/nativeembed_product003.png rename to entry/src/main/resources/base/media/embed_product003.png diff --git a/entry/src/main/resources/base/media/nativeembed_product004.png b/entry/src/main/resources/base/media/embed_product004.png similarity index 100% rename from entry/src/main/resources/base/media/nativeembed_product004.png rename to entry/src/main/resources/base/media/embed_product004.png diff --git a/entry/src/main/resources/base/media/nativeembed_product005.png b/entry/src/main/resources/base/media/embed_product005.png similarity index 100% rename from entry/src/main/resources/base/media/nativeembed_product005.png rename to entry/src/main/resources/base/media/embed_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 deleted file mode 100644 index f939c9fa8cc8914832e602198745f592a0dfa34d..0000000000000000000000000000000000000000 Binary files a/entry/src/main/resources/base/media/nativeembed_search_icon.png and /dev/null differ diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index 309918cc12d3318e8095735ca46f963f4d3f7dcf..a334e7dde2ceec93afe44546ab06f2e9a637d7ec 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -115,82 +115,6 @@ { "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/nativeembed_view.html b/entry/src/main/resources/rawfile/embed_view.html similarity index 74% rename from entry/src/main/resources/rawfile/nativeembed_view.html rename to entry/src/main/resources/rawfile/embed_view.html index f2008aacd861c55c37379f9a83651ce748e5e374..9033cdbd23101aacc7c4afbd8c76648811e62fbe 100644 --- a/entry/src/main/resources/rawfile/nativeembed_view.html +++ b/entry/src/main/resources/rawfile/embed_view.html @@ -8,8 +8,6 @@
-
@@ -23,7 +21,8 @@ self.nativeSearch.addEventListener('touchstart', self.events, false); } }; - + nativeEmbed.init(); + // [Start get_embed_size] function getEmbedSize() { let doc = document.getElementById('nativeSearch'); return { @@ -31,8 +30,7 @@ height: doc.offsetHeight, } } - - nativeEmbed.init(); + // [End get_embed_size] diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index ef764700f4d5bde4982e8c848dc74c6cb7fc3650..f80723ed05eef1a452e9f0408144d8799922ce87 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": "nativeembed_product_title000", + "name": "embed_product_title000", "value": "充电宝" }, { - "name": "nativeembed_product_title001", + "name": "embed_product_title001", "value": "笔记本电脑" }, { - "name": "nativeembed_product_title002", + "name": "embed_product_title002", "value": "移动手机" }, { - "name": "nativeembed_product_title003", + "name": "embed_product_title003", "value": "手机充电器" }, { - "name": "nativeembed_product_title004", + "name": "embed_product_title004", "value": "头戴式耳机" }, { - "name": "nativeembed_product_title005", + "name": "embed_product_title005", "value": "背包" }, { - "name": "nativeembed_product_price000", + "name": "embed_product_price000", "value": "￥79.9" }, { - "name": "nativeembed_product_price001", + "name": "embed_product_price001", "value": "￥6999" }, { - "name": "nativeembed_product_price002", + "name": "embed_product_price002", "value": "￥5999" }, { - "name": "nativeembed_product_price003", + "name": "embed_product_price003", "value": "￥72.5" }, { - "name": "nativeembed_product_price004", + "name": "embed_product_price004", "value": "￥899" }, { - "name": "nativeembed_product_price005", + "name": "embed_product_price005", "value": "￥328" }, { - "name": "nativeembed_reason", + "name": "embed_reason", "value": "get internet permisssion" }, { - "name": "nativeembed_full_percent", + "name": "embed_full_percent", "value": "100%" }, { - "name": "nativeembed_sixty_percent", + "name": "embed_sixty_percent", "value": "60%" }, { - "name": "nativeembed_mall", + "name": "embed_mall", "value": "商城" }, { - "name": "nativeembed_search", + "name": "embed_search", "value": "搜索" }, { - "name": "nativeembed_prompt_text", + "name": "embed_prompt_text", "value": "仅演示，可自行实现业务功能" }, { - "name": "nativeembed_search_text_placeholder", + "name": "embed_search_text_placeholder", "value": "搜索相关宝贝" }, {