developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yuzhilin
bd73c40a 1 parent aaf63bd2

webview高度自适应

Inline Side-by-side
Showing 5 changed files with 172 additions and 80 deletions
1 import { Action } from './Action'; 1 import { Action } from './Action';
2 - 2 +interface dataObject {
  3 + webViewHeight?: string
  4 +}
3 /** 5 /**
4 * 消息Message 6 * 消息Message
5 */ 7 */
@@ -7,7 +9,7 @@ export class Message { @@ -7,7 +9,7 @@ export class Message {
7 callbackId: string = ""; //callbackId 9 callbackId: string = ""; //callbackId
8 responseId: string = ""; //responseId 10 responseId: string = ""; //responseId
9 responseData: string = ""; //responseData 11 responseData: string = ""; //responseData
10 - data?: object; //data of message 12 + data?: dataObject; //data of message
11 handlerName: string = ""; //name of handler 13 handlerName: string = ""; //name of handler
12 14
13 /** 15 /**
@@ -14,6 +14,7 @@ export struct WdWebLocalComponent { @@ -14,6 +14,7 @@ export struct WdWebLocalComponent {
14 private webviewControl: BridgeWebViewControl = new BridgeWebViewControl() 14 private webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
15 backVisibility: boolean = false 15 backVisibility: boolean = false
16 webResource: Resource = {} as Resource 16 webResource: Resource = {} as Resource
  17 + @State webHeight : string = '100%'
17 18
18 build() { 19 build() {
19 Column() { 20 Column() {
@@ -31,19 +32,12 @@ export struct WdWebLocalComponent { @@ -31,19 +32,12 @@ export struct WdWebLocalComponent {
31 .visibility(this.backVisibility ? Visibility.Visible : Visibility.None) 32 .visibility(this.backVisibility ? Visibility.Visible : Visibility.None)
32 33
33 Web({ src: this.webResource, controller: this.webviewControl }) 34 Web({ src: this.webResource, controller: this.webviewControl })
34 - .layoutMode(WebLayoutMode.FIT_CONTENT)  
35 .domStorageAccess(true) 35 .domStorageAccess(true)
36 .databaseAccess(true) 36 .databaseAccess(true)
37 .javaScriptAccess(true) 37 .javaScriptAccess(true)
38 - // .imageAccess(true)  
39 - // .onlineImageAccess(true)  
40 - // .fileAccess(true) 38 + .height(this.webHeight === '100%' ? '100%' : Number(this.webHeight))
41 .onPageBegin((event) => { 39 .onPageBegin((event) => {
42 this.onPageBegin(event?.url); 40 this.onPageBegin(event?.url);
43 - this.registerHandlers();  
44 - setTimeout(() => {  
45 - BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)  
46 - }, 200)  
47 }) 41 })
48 .onPageEnd((event) => { 42 .onPageEnd((event) => {
49 this.onPageEnd(event?.url) 43 this.onPageEnd(event?.url)
@@ -72,12 +66,20 @@ export struct WdWebLocalComponent { @@ -72,12 +66,20 @@ export struct WdWebLocalComponent {
72 for (let i = 0; i < H5CallNativeType.JsCallTypeList.length; i++) { 66 for (let i = 0; i < H5CallNativeType.JsCallTypeList.length; i++) {
73 let handleName = H5CallNativeType.JsCallTypeList[i]; 67 let handleName = H5CallNativeType.JsCallTypeList[i];
74 let handle = (data: Message, f: Callback) => { 68 let handle = (data: Message, f: Callback) => {
  69 + this.setCurrentPageOperate(data)
75 this.defaultPerformJSCallNative(data, f) 70 this.defaultPerformJSCallNative(data, f)
76 - } ; 71 + };
77 this.webviewControl.registerHandler(handleName, { handle: handle }); 72 this.webviewControl.registerHandler(handleName, { handle: handle });
78 } 73 }
79 } 74 }
80 75
  76 + //webview 高度设置
  77 + private setCurrentPageOperate: (data: Message) => void = (data) => {
  78 + console.log("setCurrentPageOperate",JSON.stringify(data))
  79 + if (data.handlerName === H5CallNativeType.jsCall_currentPageOperate) {
  80 + this.webHeight = data?.data?.webViewHeight || '100%'
  81 + }
  82 + }
81 /** 83 /**
82 * 默认【CallNative】逻辑处理 84 * 默认【CallNative】逻辑处理
83 */ 85 */
@@ -86,6 +88,10 @@ export struct WdWebLocalComponent { @@ -86,6 +88,10 @@ export struct WdWebLocalComponent {
86 } 88 }
87 onPageBegin: (url?: string) => void = () => { 89 onPageBegin: (url?: string) => void = () => {
88 Logger.debug(TAG, 'onPageBegin'); 90 Logger.debug(TAG, 'onPageBegin');
  91 + this.registerHandlers();
  92 + // setTimeout(() => {
  93 + BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
  94 + // }, 100)
89 } 95 }
90 onPageEnd: (url?: string) => void = () => { 96 onPageEnd: (url?: string) => void = () => {
91 Logger.debug(TAG, 'onPageEnd'); 97 Logger.debug(TAG, 'onPageEnd');
@@ -22,13 +22,6 @@ import { PageRepository } from '../repository/PageRepository'; @@ -22,13 +22,6 @@ import { PageRepository } from '../repository/PageRepository';
22 22
23 const TAG = 'ImageAndTextPageComponent' 23 const TAG = 'ImageAndTextPageComponent'
24 24
25 -export interface OperationItem {  
26 - icon: Resource;  
27 - icon_check?: Resource;  
28 - text: string | Resource;  
29 - num?: number; // 个数  
30 -}  
31 -  
32 @Component 25 @Component
33 export struct ImageAndTextPageComponent { 26 export struct ImageAndTextPageComponent {
34 scroller: Scroller = new Scroller(); 27 scroller: Scroller = new Scroller();
@@ -37,7 +30,6 @@ export struct ImageAndTextPageComponent { @@ -37,7 +30,6 @@ export struct ImageAndTextPageComponent {
37 @State recommendList: ContentDTO[] = [] 30 @State recommendList: ContentDTO[] = []
38 @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态 31 @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
39 @State interactData: InteractDataDTO = {} as InteractDataDTO 32 @State interactData: InteractDataDTO = {} as InteractDataDTO
40 -  
41 build() { 33 build() {
42 Column() { 34 Column() {
43 // 发布时间 35 // 发布时间
@@ -64,66 +56,28 @@ export struct ImageAndTextPageComponent { @@ -64,66 +56,28 @@ export struct ImageAndTextPageComponent {
64 .objectFit(ImageFit.Cover) 56 .objectFit(ImageFit.Cover)
65 .margin({ top: 10 }) 57 .margin({ top: 10 })
66 } 58 }
67 - .padding({ left: 15, right: 15, }) 59 + .padding({ left: 15, right: 15 })
68 .backgroundColor(Color.White) 60 .backgroundColor(Color.White)
69 61
70 Stack({ alignContent: Alignment.Bottom }) { 62 Stack({ alignContent: Alignment.Bottom }) {
71 - List() {  
72 - //详情展示区  
73 - ListItem() { 63 + Scroll(this.scroller) {
  64 + Column() {
  65 + ImageAndTextWebComponent({
  66 + contentDetailData: this.contentDetailData,
  67 + action: this.action
  68 + })
74 Column() { 69 Column() {
75 - ImageAndTextWebComponent({  
76 - contentDetailData: this.contentDetailData,  
77 - action: this.action,  
78 - })  
79 - }.width(CommonConstants.FULL_WIDTH)  
80 - .height(CommonConstants.FULL_HEIGHT)  
81 - }  
82 -  
83 - if (this.contentDetailData[0]?.openLikes === 1) {  
84 - ListItem() {  
85 - // 点赞  
86 - Row() {  
87 - Row() {  
88 - if (this.newsStatusOfUser?.likeStatus === '1') {  
89 - Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.ic_like_check') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer_active') : $r('app.media.icon_candle_active')))  
90 - .width(24)  
91 - .height(24)  
92 - .margin({ right: 5 })  
93 - } else {  
94 - Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.icon_like') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer') : $r('app.media.icon_candle')))  
95 - .width(24)  
96 - .height(24)  
97 - .margin({ right: 5 })  
98 - }  
99 - Text(`${this.interactData?.likeNum || 0}`)  
100 - .fontSize(16)  
101 - .fontColor(this.newsStatusOfUser?.likeStatus === '1' ? '#ED2800' : '#999999')  
102 - .fontWeight(500)  
103 - }.alignItems(VerticalAlign.Center)  
104 - .onClick(() => {  
105 - this.toggleLikeStatus()  
106 - })  
107 -  
108 - }.width(CommonConstants.FULL_WIDTH).height(80)  
109 - .justifyContent(FlexAlign.Center) 70 + if (this.recommendList.length > 0) {
  71 + RecommendList({ recommendList: this.recommendList })
  72 + }
110 } 73 }
111 - .border({  
112 - width: { bottom: 5 },  
113 - color: '#f5f5f5',  
114 - })  
115 } 74 }
116 75
117 - // 相关推荐区  
118 - ListItem() {  
119 - RecommendList({ recommendList: this.recommendList })  
120 - }  
121 } 76 }
122 .width(CommonConstants.FULL_WIDTH) 77 .width(CommonConstants.FULL_WIDTH)
123 .height(CommonConstants.FULL_HEIGHT) 78 .height(CommonConstants.FULL_HEIGHT)
124 - .padding({ bottom: 56 })  
125 - .scrollBar(BarState.Off)  
126 - .edgeEffect(EdgeEffect.None) 79 + .padding({ bottom: 76 })
  80 + // .scrollBar(BarState.Off)
127 81
128 //底部交互区 82 //底部交互区
129 Row() { 83 Row() {
@@ -163,11 +117,143 @@ export struct ImageAndTextPageComponent { @@ -163,11 +117,143 @@ export struct ImageAndTextPageComponent {
163 .justifyContent(FlexAlign.SpaceBetween) 117 .justifyContent(FlexAlign.SpaceBetween)
164 .backgroundColor(Color.White) 118 .backgroundColor(Color.White)
165 } 119 }
166 - }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)  
167 - .backgroundColor(Color.White)  
168 - 120 + }
  121 + .width(CommonConstants.FULL_WIDTH)
  122 + .height(CommonConstants.FULL_HEIGHT)
169 } 123 }
170 124
  125 + // build() {
  126 + // Column() {
  127 + // // 发布时间
  128 + // Row() {
  129 + // Image($r('app.media.icon_ren_min_ri_bao'))
  130 + // .width(70)
  131 + // .height(28)
  132 + // Text(this.contentDetailData[0]?.publishTime)
  133 + // .fontColor($r('app.color.color_B0B0B0'))
  134 + // .fontSize($r('app.float.font_size_13'))
  135 + // .height('100%')
  136 + // .align(Alignment.End)
  137 + // }
  138 + // .width(CommonConstants.FULL_WIDTH)
  139 + // .height(32)
  140 + // .padding({ left: 15, right: 15, })
  141 + // .justifyContent(FlexAlign.SpaceBetween)
  142 + // .backgroundColor(Color.White)
  143 + //
  144 + // Row() {
  145 + // Image($r('app.media.line'))
  146 + // .width('100%')
  147 + // .height(6)
  148 + // .objectFit(ImageFit.Cover)
  149 + // .margin({ top: 10 })
  150 + // }
  151 + // .padding({ left: 15, right: 15, })
  152 + // .backgroundColor(Color.White)
  153 + //
  154 + // Stack({ alignContent: Alignment.Bottom }) {
  155 + //
  156 + // List() {
  157 + // //详情展示区
  158 + // ListItem() {
  159 + // Column() {
  160 + // ImageAndTextWebComponent({
  161 + // contentDetailData: this.contentDetailData,
  162 + // action: this.action,
  163 + // })
  164 + // }.width(CommonConstants.FULL_WIDTH)
  165 + // // .height(CommonConstants.FULL_HEIGHT)
  166 + // }
  167 + //
  168 + // if (this.contentDetailData[0]?.openLikes === 1) {
  169 + // ListItem() {
  170 + // // 点赞
  171 + // Row() {
  172 + // Row() {
  173 + // if (this.newsStatusOfUser?.likeStatus === '1') {
  174 + // Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.ic_like_check') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer_active') : $r('app.media.icon_candle_active')))
  175 + // .width(24)
  176 + // .height(24)
  177 + // .margin({ right: 5 })
  178 + // } else {
  179 + // Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.icon_like') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer') : $r('app.media.icon_candle')))
  180 + // .width(24)
  181 + // .height(24)
  182 + // .margin({ right: 5 })
  183 + // }
  184 + // Text(`${this.interactData?.likeNum || 0}`)
  185 + // .fontSize(16)
  186 + // .fontColor(this.newsStatusOfUser?.likeStatus === '1' ? '#ED2800' : '#999999')
  187 + // .fontWeight(500)
  188 + // }.alignItems(VerticalAlign.Center)
  189 + // .onClick(() => {
  190 + // this.toggleLikeStatus()
  191 + // })
  192 + //
  193 + // }.width(CommonConstants.FULL_WIDTH).height(80)
  194 + // .justifyContent(FlexAlign.Center)
  195 + // }
  196 + // .border({
  197 + // width: { bottom: 5 },
  198 + // color: '#f5f5f5',
  199 + // })
  200 + // }
  201 + //
  202 + // // 相关推荐区
  203 + // ListItem() {
  204 + // RecommendList({ recommendList: this.recommendList })
  205 + // }
  206 + // }
  207 + // .width(CommonConstants.FULL_WIDTH)
  208 + // .height(CommonConstants.FULL_HEIGHT)
  209 + // .padding({ bottom: 56 })
  210 + // .scrollBar(BarState.Off)
  211 + // .edgeEffect(EdgeEffect.None)
  212 + //
  213 + // //底部交互区
  214 + // Row() {
  215 + // Image($r('app.media.icon_arrow_left'))
  216 + // .width(24)
  217 + // .height(24)
  218 + // .onClick((event: ClickEvent) => {
  219 + // router.back()
  220 + // })
  221 + //
  222 + // Row() {
  223 + // Image($r('app.media.icon_comment'))
  224 + // .width(24)
  225 + // .height(24)
  226 + // .margin({ right: 24 })
  227 + // .id('comment')
  228 + //
  229 + // Image($r('app.media.icon_star'))
  230 + // .width(24)
  231 + // .height(24)
  232 + // .margin({ right: 24 })
  233 + //
  234 + // Image($r('app.media.icon_listen'))
  235 + // .width(24)
  236 + // .height(24)
  237 + // .margin({ right: 24 })
  238 + //
  239 + // Image($r('app.media.icon_forward'))
  240 + // .width(24)
  241 + // .height(24)
  242 + //
  243 + // }
  244 + // }
  245 + // .width(CommonConstants.FULL_WIDTH)
  246 + // .height(56)
  247 + // .padding({ left: 15, right: 15, bottom: 50, top: 20 })
  248 + // .justifyContent(FlexAlign.SpaceBetween)
  249 + // .backgroundColor(Color.White)
  250 + // }
  251 + //
  252 + // }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
  253 + // .backgroundColor(Color.White)
  254 + //
  255 + // }
  256 +
171 private async getDetail() { 257 private async getDetail() {
172 let contentId: string = '' 258 let contentId: string = ''
173 let relId: string = '' 259 let relId: string = ''
@@ -199,7 +285,6 @@ export struct ImageAndTextPageComponent { @@ -199,7 +285,6 @@ export struct ImageAndTextPageComponent {
199 } 285 }
200 } 286 }
201 287
202 -  
203 private async getRecommend() { 288 private async getRecommend() {
204 let params: postRecommendListParams = { 289 let params: postRecommendListParams = {
205 imei: "8272c108-4fa2-34ce-80b9-bc425a7c2a7e", 290 imei: "8272c108-4fa2-34ce-80b9-bc425a7c2a7e",
@@ -211,9 +296,7 @@ export struct ImageAndTextPageComponent { @@ -211,9 +296,7 @@ export struct ImageAndTextPageComponent {
211 channelId: String(this.contentDetailData[0]?.reLInfo?.channelId) 296 channelId: String(this.contentDetailData[0]?.reLInfo?.channelId)
212 } 297 }
213 let recommendList = await DetailViewModel.postRecommendList(params) 298 let recommendList = await DetailViewModel.postRecommendList(params)
214 - if (recommendList && recommendList.length > 0) {  
215 - this.recommendList = recommendList;  
216 - } 299 + this.recommendList = recommendList;
217 } 300 }
218 301
219 // 已登录->查询用户对作品点赞、收藏状态 302 // 已登录->查询用户对作品点赞、收藏状态
@@ -27,11 +27,11 @@ export struct RecommendList { @@ -27,11 +27,11 @@ export struct RecommendList {
27 .width(CommonConstants.FULL_PARENT) 27 .width(CommonConstants.FULL_PARENT)
28 .justifyContent(FlexAlign.Start) 28 .justifyContent(FlexAlign.Start)
29 } 29 }
30 - ForEach(this.recommendList, (item: ContentDTO) => {  
31 - Row(){ 30 + ForEach(this.recommendList, (item: ContentDTO, index: number) => {
  31 + Row() {
32 CardParser({ contentDTO: item }); 32 CardParser({ contentDTO: item });
33 }.border({ 33 }.border({
34 - width:{bottom: 1}, 34 + width: { bottom: this.recommendList.length === index + 1 ? 0 : 1 },
35 color: '#f5f5f5' 35 color: '#f5f5f5'
36 }) 36 })
37 }, (item: ContentDTO) => JSON.stringify(item)) 37 }, (item: ContentDTO) => JSON.stringify(item))
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 "pages/launchPage/PrivacyPage", 10 "pages/launchPage/PrivacyPage",
11 "pages/launchPage/LaunchPage", 11 "pages/launchPage/LaunchPage",
12 "pages/launchPage/LaunchAdvertisingPage", 12 "pages/launchPage/LaunchAdvertisingPage",
13 - "pages/broadcast/BroadcastPage" 13 + "pages/broadcast/BroadcastPage",
  14 + "pages/SpacialTopicPage"
14 ] 15 ]
15 } 16 }