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 167 additions and 75 deletions
import { Action } from './Action';
interface dataObject {
webViewHeight?: string
}
/**
* 消息Message
*/
... ... @@ -7,7 +9,7 @@ export class Message {
callbackId: string = ""; //callbackId
responseId: string = ""; //responseId
responseData: string = ""; //responseData
data?: object; //data of message
data?: dataObject; //data of message
handlerName: string = ""; //name of handler
/**
... ...
... ... @@ -14,6 +14,7 @@ export struct WdWebLocalComponent {
private webviewControl: BridgeWebViewControl = new BridgeWebViewControl()
backVisibility: boolean = false
webResource: Resource = {} as Resource
@State webHeight : string = '100%'
build() {
Column() {
... ... @@ -31,19 +32,12 @@ export struct WdWebLocalComponent {
.visibility(this.backVisibility ? Visibility.Visible : Visibility.None)
Web({ src: this.webResource, controller: this.webviewControl })
.layoutMode(WebLayoutMode.FIT_CONTENT)
.domStorageAccess(true)
.databaseAccess(true)
.javaScriptAccess(true)
// .imageAccess(true)
// .onlineImageAccess(true)
// .fileAccess(true)
.height(this.webHeight === '100%' ? '100%' : Number(this.webHeight))
.onPageBegin((event) => {
this.onPageBegin(event?.url);
this.registerHandlers();
setTimeout(() => {
BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
}, 200)
})
.onPageEnd((event) => {
this.onPageEnd(event?.url)
... ... @@ -72,12 +66,20 @@ export struct WdWebLocalComponent {
for (let i = 0; i < H5CallNativeType.JsCallTypeList.length; i++) {
let handleName = H5CallNativeType.JsCallTypeList[i];
let handle = (data: Message, f: Callback) => {
this.setCurrentPageOperate(data)
this.defaultPerformJSCallNative(data, f)
} ;
};
this.webviewControl.registerHandler(handleName, { handle: handle });
}
}
//webview 高度设置
private setCurrentPageOperate: (data: Message) => void = (data) => {
console.log("setCurrentPageOperate",JSON.stringify(data))
if (data.handlerName === H5CallNativeType.jsCall_currentPageOperate) {
this.webHeight = data?.data?.webViewHeight || '100%'
}
}
/**
* 默认【CallNative】逻辑处理
*/
... ... @@ -86,6 +88,10 @@ export struct WdWebLocalComponent {
}
onPageBegin: (url?: string) => void = () => {
Logger.debug(TAG, 'onPageBegin');
this.registerHandlers();
// setTimeout(() => {
BridgeUtil.webViewLoadLocalJs(getContext(this), this.webviewControl)
// }, 100)
}
onPageEnd: (url?: string) => void = () => {
Logger.debug(TAG, 'onPageEnd');
... ...
... ... @@ -22,13 +22,6 @@ import { PageRepository } from '../repository/PageRepository';
const TAG = 'ImageAndTextPageComponent'
export interface OperationItem {
icon: Resource;
icon_check?: Resource;
text: string | Resource;
num?: number; // 个数
}
@Component
export struct ImageAndTextPageComponent {
scroller: Scroller = new Scroller();
... ... @@ -37,7 +30,6 @@ export struct ImageAndTextPageComponent {
@State recommendList: ContentDTO[] = []
@State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@State interactData: InteractDataDTO = {} as InteractDataDTO
build() {
Column() {
// 发布时间
... ... @@ -64,66 +56,28 @@ export struct ImageAndTextPageComponent {
.objectFit(ImageFit.Cover)
.margin({ top: 10 })
}
.padding({ left: 15, right: 15, })
.padding({ left: 15, right: 15 })
.backgroundColor(Color.White)
Stack({ alignContent: Alignment.Bottom }) {
List() {
//详情展示区
ListItem() {
Scroll(this.scroller) {
Column() {
ImageAndTextWebComponent({
contentDetailData: this.contentDetailData,
action: this.action,
action: this.action
})
}.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
Column() {
if (this.recommendList.length > 0) {
RecommendList({ recommendList: this.recommendList })
}
if (this.contentDetailData[0]?.openLikes === 1) {
ListItem() {
// 点赞
Row() {
Row() {
if (this.newsStatusOfUser?.likeStatus === '1') {
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')))
.width(24)
.height(24)
.margin({ right: 5 })
} else {
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')))
.width(24)
.height(24)
.margin({ right: 5 })
}
Text(`${this.interactData?.likeNum || 0}`)
.fontSize(16)
.fontColor(this.newsStatusOfUser?.likeStatus === '1' ? '#ED2800' : '#999999')
.fontWeight(500)
}.alignItems(VerticalAlign.Center)
.onClick(() => {
this.toggleLikeStatus()
})
}.width(CommonConstants.FULL_WIDTH).height(80)
.justifyContent(FlexAlign.Center)
}
.border({
width: { bottom: 5 },
color: '#f5f5f5',
})
}
// 相关推荐区
ListItem() {
RecommendList({ recommendList: this.recommendList })
}
}
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({ bottom: 56 })
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.padding({ bottom: 76 })
// .scrollBar(BarState.Off)
//底部交互区
Row() {
... ... @@ -163,11 +117,143 @@ export struct ImageAndTextPageComponent {
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
}
}.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
.backgroundColor(Color.White)
}
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
}
// build() {
// Column() {
// // 发布时间
// Row() {
// Image($r('app.media.icon_ren_min_ri_bao'))
// .width(70)
// .height(28)
// Text(this.contentDetailData[0]?.publishTime)
// .fontColor($r('app.color.color_B0B0B0'))
// .fontSize($r('app.float.font_size_13'))
// .height('100%')
// .align(Alignment.End)
// }
// .width(CommonConstants.FULL_WIDTH)
// .height(32)
// .padding({ left: 15, right: 15, })
// .justifyContent(FlexAlign.SpaceBetween)
// .backgroundColor(Color.White)
//
// Row() {
// Image($r('app.media.line'))
// .width('100%')
// .height(6)
// .objectFit(ImageFit.Cover)
// .margin({ top: 10 })
// }
// .padding({ left: 15, right: 15, })
// .backgroundColor(Color.White)
//
// Stack({ alignContent: Alignment.Bottom }) {
//
// List() {
// //详情展示区
// ListItem() {
// Column() {
// ImageAndTextWebComponent({
// contentDetailData: this.contentDetailData,
// action: this.action,
// })
// }.width(CommonConstants.FULL_WIDTH)
// // .height(CommonConstants.FULL_HEIGHT)
// }
//
// if (this.contentDetailData[0]?.openLikes === 1) {
// ListItem() {
// // 点赞
// Row() {
// Row() {
// if (this.newsStatusOfUser?.likeStatus === '1') {
// 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')))
// .width(24)
// .height(24)
// .margin({ right: 5 })
// } else {
// 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')))
// .width(24)
// .height(24)
// .margin({ right: 5 })
// }
// Text(`${this.interactData?.likeNum || 0}`)
// .fontSize(16)
// .fontColor(this.newsStatusOfUser?.likeStatus === '1' ? '#ED2800' : '#999999')
// .fontWeight(500)
// }.alignItems(VerticalAlign.Center)
// .onClick(() => {
// this.toggleLikeStatus()
// })
//
// }.width(CommonConstants.FULL_WIDTH).height(80)
// .justifyContent(FlexAlign.Center)
// }
// .border({
// width: { bottom: 5 },
// color: '#f5f5f5',
// })
// }
//
// // 相关推荐区
// ListItem() {
// RecommendList({ recommendList: this.recommendList })
// }
// }
// .width(CommonConstants.FULL_WIDTH)
// .height(CommonConstants.FULL_HEIGHT)
// .padding({ bottom: 56 })
// .scrollBar(BarState.Off)
// .edgeEffect(EdgeEffect.None)
//
// //底部交互区
// Row() {
// Image($r('app.media.icon_arrow_left'))
// .width(24)
// .height(24)
// .onClick((event: ClickEvent) => {
// router.back()
// })
//
// Row() {
// Image($r('app.media.icon_comment'))
// .width(24)
// .height(24)
// .margin({ right: 24 })
// .id('comment')
//
// Image($r('app.media.icon_star'))
// .width(24)
// .height(24)
// .margin({ right: 24 })
//
// Image($r('app.media.icon_listen'))
// .width(24)
// .height(24)
// .margin({ right: 24 })
//
// Image($r('app.media.icon_forward'))
// .width(24)
// .height(24)
//
// }
// }
// .width(CommonConstants.FULL_WIDTH)
// .height(56)
// .padding({ left: 15, right: 15, bottom: 50, top: 20 })
// .justifyContent(FlexAlign.SpaceBetween)
// .backgroundColor(Color.White)
// }
//
// }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
// .backgroundColor(Color.White)
//
// }
private async getDetail() {
let contentId: string = ''
let relId: string = ''
... ... @@ -199,7 +285,6 @@ export struct ImageAndTextPageComponent {
}
}
private async getRecommend() {
let params: postRecommendListParams = {
imei: "8272c108-4fa2-34ce-80b9-bc425a7c2a7e",
... ... @@ -211,10 +296,8 @@ export struct ImageAndTextPageComponent {
channelId: String(this.contentDetailData[0]?.reLInfo?.channelId)
}
let recommendList = await DetailViewModel.postRecommendList(params)
if (recommendList && recommendList.length > 0) {
this.recommendList = recommendList;
}
}
// 已登录->查询用户对作品点赞、收藏状态
private async getInteractDataStatus() {
... ...
... ... @@ -27,11 +27,11 @@ export struct RecommendList {
.width(CommonConstants.FULL_PARENT)
.justifyContent(FlexAlign.Start)
}
ForEach(this.recommendList, (item: ContentDTO) => {
Row(){
ForEach(this.recommendList, (item: ContentDTO, index: number) => {
Row() {
CardParser({ contentDTO: item });
}.border({
width:{bottom: 1},
width: { bottom: this.recommendList.length === index + 1 ? 0 : 1 },
color: '#f5f5f5'
})
}, (item: ContentDTO) => JSON.stringify(item))
... ...
... ... @@ -10,6 +10,7 @@
"pages/launchPage/PrivacyPage",
"pages/launchPage/LaunchPage",
"pages/launchPage/LaunchAdvertisingPage",
"pages/broadcast/BroadcastPage"
"pages/broadcast/BroadcastPage",
"pages/SpacialTopicPage"
]
}
... ...