7b1ce19c39
- 实现了文件下载的逻辑，包括进度显示和错误处理 - 新增了下载文件的UI展示，显示下载进度和状态 - 优化了导入模块，增加了request和common模块的导入 - 修复了一些代码格式问题，优化了代码结构
470 行
18 KiB
Plaintext
470 行
18 KiB
Plaintext
import web_webview from '@ohos.web.webview';
|
|
import webview from '@ohos.web.webview';
|
|
import { router, WebHeader } from '@kit.ArkUI';
|
|
import { XDialogController } from '../dialog/XDialogController';
|
|
import { XDialogList } from '../dialog/XDialogList';
|
|
import { fileUri, picker } from '@kit.CoreFileKit';
|
|
import { BusinessError, pasteboard, request } from '@kit.BasicServicesKit';
|
|
import { ToolsHelper } from '../utils/ToolsHelper';
|
|
import { JsParams, XWebController, XWebParams } from '../utils/XWebHelper';
|
|
import { WindowHelper } from '../utils/WindowHelper';
|
|
import { SZYXLocalStorageHelper } from '../utils/SZYXLocalStorageHelper';
|
|
import { SZYXLocalStorageKeys } from '../utils/SZYXLocalStorageKeys';
|
|
import { XWebManager } from '../utils/XWebManager';
|
|
import { TitleBarBtn } from '../view/SafeView';
|
|
import { GlobalContext } from '../ContextConfig';
|
|
import { common } from '@kit.AbilityKit';
|
|
import { LogHelper } from '../utils/LogHelper';
|
|
|
|
@Entry({ routeName: 'XWebview' })
|
|
@Component
|
|
export struct XWebview {
|
|
@LocalStorageLink('refresh_web_base') @Watch('onRefresh') refresh_web_base: number = -1
|
|
// 手机号
|
|
@State headers?: Array<WebHeader> = (router.getParams() as XWebParams).headers
|
|
@State url?: string = (router.getParams() as XWebParams).url
|
|
@State jsParams?: JsParams = (router.getParams() as XWebParams).jsParams
|
|
@State zoomAccess?: boolean = (router.getParams() as XWebParams).zoomAccess
|
|
@State content?: string = (router.getParams() as XWebParams).content
|
|
@State title?: string = (router.getParams() as XWebParams).title
|
|
@State xController?: XWebController = (router.getParams() as XWebParams).controller
|
|
// @State xJsController?: XWebController = (router.getParams() as XWebParams).jsController
|
|
@State closeTag?: string = (router.getParams() as XWebParams).closeTag
|
|
@State showMenu: boolean = (router.getParams() as XWebParams).showMenu ?? false
|
|
@State clickMenu?: TitleBarBtn = (router.getParams() as XWebParams).clickMenu
|
|
@State errorInfo: string | null = null
|
|
@State progress: number = 0
|
|
@State _uuid?: string = (router.getParams() as XWebParams)._uuid
|
|
@State _uuidToHtml?: string = (router.getParams() as XWebParams)._uuidToHtml
|
|
controller: web_webview.WebviewController = new web_webview.WebviewController();
|
|
dialogController: XDialogController = {} as XDialogController
|
|
ports: webview.WebMessagePort[] = [];
|
|
@State isDownload: boolean = false
|
|
@State receivedSize: number = 0
|
|
@State totalSize: number = 0
|
|
|
|
onRefresh() {
|
|
if (this.refresh_web_base !== -1) {
|
|
this.controller.refresh()
|
|
}
|
|
|
|
}
|
|
|
|
aboutToAppear(): void {
|
|
XWebManager.onClose(() => {
|
|
router.back()
|
|
})
|
|
XWebManager.onGetUrl = () => {
|
|
return this.controller.getUrl()
|
|
}
|
|
XWebManager.onGetTitle = () => {
|
|
return this.controller.getTitle()
|
|
}
|
|
XWebManager.onRefresh = () => {
|
|
this.controller.refresh()
|
|
}
|
|
|
|
|
|
SZYXLocalStorageHelper.storage.setOrCreate('refresh_web_base', -1)
|
|
SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, undefined)
|
|
webview.WebviewController.setWebDebuggingAccess(true);
|
|
if (this._uuidToHtml) {
|
|
XWebManager.addOnMessageToHtml(this._uuidToHtml, (msg) => {
|
|
if (this.ports && this.ports[1]) {
|
|
this.ports[1].postMessageEvent(msg);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
aboutToDisappear(): void {
|
|
if (this.closeTag !== undefined) {
|
|
SZYXLocalStorageHelper.storage.setOrCreate(SZYXLocalStorageKeys.XWebViewCLose, this.closeTag)
|
|
}
|
|
XWebManager.removeOnMessageToWeb(this._uuidToHtml)
|
|
XWebManager.removeOnMessage(this._uuid)
|
|
XWebManager.removeOnMessageToHtml(this._uuidToHtml)
|
|
if (this._uuidToHtml) {
|
|
XWebManager.objs.delete(this._uuidToHtml)
|
|
}
|
|
try {
|
|
this.controller.deleteJavaScriptRegister(this.jsParams?.name);
|
|
} catch (error) {
|
|
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
|
|
}
|
|
}
|
|
|
|
onBackPress(): boolean | void {
|
|
if (this.controller.accessBackward()) {
|
|
this.controller.backward()
|
|
} else {
|
|
ToolsHelper.doubleAndExit(() => {
|
|
router.back()
|
|
})
|
|
}
|
|
return true
|
|
}
|
|
|
|
build() {
|
|
Stack() {
|
|
Column() {
|
|
Row() {
|
|
Row() {
|
|
Button({ buttonStyle: ButtonStyleMode.TEXTUAL }) {
|
|
Image($r('sys.media.ohos_ic_back'))
|
|
.width(26).height(26)
|
|
}.onClick(() => {
|
|
this.onBackPress()
|
|
})
|
|
|
|
Button({ buttonStyle: ButtonStyleMode.TEXTUAL }) {
|
|
Image($r('sys.media.ohos_ic_public_close'))
|
|
.width(26).height(26)
|
|
}.margin({ left: 12 })
|
|
.onClick(() => {
|
|
router.back()
|
|
})
|
|
}.width(65)
|
|
|
|
Text(this.title)
|
|
.maxLines(1)
|
|
.fontColor('#222222')
|
|
.fontSize(18)
|
|
.textAlign(TextAlign.Center)
|
|
.width('50%')
|
|
.ellipsisMode(EllipsisMode.END)
|
|
.textOverflow({
|
|
overflow: TextOverflow.Ellipsis
|
|
})
|
|
|
|
Button({ buttonStyle: ButtonStyleMode.TEXTUAL }) {
|
|
if (this.clickMenu?.img) {
|
|
Image(this.clickMenu?.img)
|
|
.width(15).height(15).objectFit(ImageFit.Contain)
|
|
} else if (this.clickMenu?.text) {
|
|
Text(this.clickMenu.text)
|
|
.fontColor(this.clickMenu?.color ?? '#17171A')
|
|
.fontSize(13)
|
|
.textAlign(TextAlign.Center)
|
|
.ellipsisMode(EllipsisMode.END)
|
|
.textOverflow({
|
|
overflow: TextOverflow.Ellipsis
|
|
})
|
|
} else {
|
|
Image($r('sys.media.ohos_ic_public_more'))
|
|
.width(26).height(26)
|
|
}
|
|
}.width(65)
|
|
.onClick(() => {
|
|
if (this.clickMenu) {
|
|
XWebManager.menuClick()
|
|
return
|
|
}
|
|
if (this.dialogController != null) {
|
|
this.dialogController.open()
|
|
}
|
|
}).visibility(this.showMenu || this.clickMenu ? Visibility.Visible : Visibility.Hidden)
|
|
}
|
|
.width('100%')
|
|
.height(45)
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
.padding({ left: 15, right: 15 })
|
|
|
|
Row().backgroundColor('#CCCCCC').height(2).width('100%')
|
|
Progress({ value: this.progress, type: ProgressType.Linear })
|
|
.visibility(this.progress > 95 || this.progress == 0 ? Visibility.None : Visibility.Visible)
|
|
.width('100%')
|
|
|
|
Web({ src: this.url ?? '', controller: this.controller })
|
|
.javaScriptAccess(true)
|
|
.javaScriptProxy({
|
|
object: XWebManager.objs.get(this._uuidToHtml),
|
|
name: this.jsParams?.name,
|
|
methodList: this.jsParams?.methodList,
|
|
controller: this.controller
|
|
})
|
|
.domStorageAccess(true)
|
|
.geolocationAccess(true)
|
|
.width('100%')
|
|
.height('100%')
|
|
.visibility(this.errorInfo == null ? Visibility.Visible : Visibility.None)
|
|
.mixedMode(MixedMode.All)//允许加载HTTP和HTTPS混合内容
|
|
.zoomAccess(this.zoomAccess ?? false)//不支持手势进行缩放
|
|
.mediaPlayGestureAccess(false)//有声视频播放不需要用户手动点击
|
|
.cacheMode(CacheMode.None)//设置缓存模式
|
|
.onConfirm((event) => { // 自定义Confirm弹窗
|
|
if (event) {
|
|
console.log("event.url:" + event.url)
|
|
console.log("event.message:" + event.message)
|
|
AlertDialog.show({
|
|
title: '提示',
|
|
message: event.message,
|
|
primaryButton: {
|
|
value: '取消',
|
|
action: () => {
|
|
event.result.handleCancel()
|
|
}
|
|
},
|
|
secondaryButton: {
|
|
value: '确定',
|
|
action: () => {
|
|
event.result.handleConfirm()
|
|
}
|
|
},
|
|
cancel: () => {
|
|
event.result.handleCancel()
|
|
}
|
|
})
|
|
}
|
|
return true
|
|
})
|
|
.onAlert((event) => { // 自定义Alert弹窗
|
|
if (event) {
|
|
console.log("event.url:" + event.url)
|
|
console.log("event.message:" + event.message)
|
|
AlertDialog.show({
|
|
title: '提示',
|
|
message: event.message,
|
|
secondaryButton: {
|
|
value: '确定',
|
|
action: () => {
|
|
event.result.handleConfirm()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
return true
|
|
})
|
|
.onDownloadStart((event) => { // 下载文件
|
|
if (event) {
|
|
this.isDownload = true
|
|
let context = getContext(this) as common.UIAbilityContext;
|
|
|
|
let filesDir = context.filesDir;
|
|
const filePath =
|
|
`${filesDir}/${ToolsHelper.getUuid()}.${event.mimetype ? event.mimetype.split('/')[1] : ''}`
|
|
|
|
try {
|
|
request.downloadFile(context, {
|
|
url: event.url,
|
|
filePath: filePath
|
|
}).then((downloadTask: request.DownloadTask) => {
|
|
downloadTask.on('progress', (receivedSize: number, totalSize: number) => {
|
|
this.receivedSize = receivedSize
|
|
this.totalSize = totalSize
|
|
})
|
|
downloadTask.on('complete', () => {
|
|
this.isDownload = false
|
|
LogHelper.info(filePath);
|
|
GlobalContext.getContext().startAbility({
|
|
uri: fileUri.getUriFromPath(filePath),
|
|
type: event.mimetype,
|
|
flags: 0x00000002
|
|
})
|
|
})
|
|
downloadTask.on('fail', () => {
|
|
this.isDownload = false
|
|
ToolsHelper.showMessage('下载失败')
|
|
})
|
|
}).catch((err: BusinessError) => {
|
|
this.isDownload = false
|
|
LogHelper.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
|
|
ToolsHelper.showMessage(err.message)
|
|
});
|
|
} catch (error) {
|
|
this.isDownload = false
|
|
let err: BusinessError = error as BusinessError;
|
|
LogHelper.error(`Invoke downloadFile failed, code is ${err.code}, message is ${err.message}`);
|
|
ToolsHelper.showMessage(err.message)
|
|
}
|
|
// ToolsHelper.log("")
|
|
// ToolsHelper.log('url:' + event.url)
|
|
// ToolsHelper.log('userAgent:' + event.userAgent)
|
|
// ToolsHelper.log('contentDisposition:' + event.contentDisposition)
|
|
// ToolsHelper.log('contentLength:' + event.contentLength)
|
|
// ToolsHelper.log('mimetype:' + event.mimetype)
|
|
|
|
}
|
|
})
|
|
.onPageEnd((url) => {
|
|
ToolsHelper.log(url.url)
|
|
// 1、创建两个消息端口。
|
|
this.ports = this.controller.createWebMessagePorts();
|
|
this.ports[1].onMessageEvent((result: webview.WebMessage) => {
|
|
if (typeof (result) === 'string') {
|
|
// ToolsHelper.log(result, typeof (result))
|
|
XWebManager.sendMessage(result)
|
|
}
|
|
})
|
|
this.controller.postMessage('__init_port__', [this.ports[0]], '*');
|
|
})
|
|
.onControllerAttached(() => {
|
|
if (this.jsParams?.controller && this._uuidToHtml) {
|
|
XWebManager.addOnMessageToWeb(this._uuidToHtml, (msg) => {
|
|
this.controller.runJavaScript(msg)
|
|
})
|
|
}
|
|
if (this.content) {
|
|
try {
|
|
this.controller.loadData(this.content, 'text/html', 'UTF-8', " ", " ")
|
|
} catch (e) {
|
|
ToolsHelper.showAlertDialog({
|
|
title: '警告',
|
|
msg: e.message ?? '加载内容失败',
|
|
action: {
|
|
onClick: () => {
|
|
router.back()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
} else if (this.url) {
|
|
if (this.headers) {
|
|
this.controller.loadUrl(this.url, this.headers);
|
|
} else {
|
|
this.controller.loadUrl(this.url);
|
|
}
|
|
} else {
|
|
ToolsHelper.showAlertDialog({
|
|
title: '警告',
|
|
msg: '请传入url或content',
|
|
action: {
|
|
onClick: () => {
|
|
router.back()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
try {
|
|
let userAgent = this.controller.getUserAgent() + '/szyx_sdk';
|
|
this.controller.setCustomUserAgent(userAgent);
|
|
|
|
} catch (error) {
|
|
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
|
|
}
|
|
})
|
|
.onErrorReceive((event) => { // 加载失败
|
|
if (this.progress > 65) {
|
|
return
|
|
}
|
|
if (event) {
|
|
this.errorInfo = `错误码：${event.error.getErrorCode()}\n${event.error.getErrorInfo()}`
|
|
} else {
|
|
this.errorInfo = '错误码：-1\n未知错误'
|
|
}
|
|
ToolsHelper.log(JSON.stringify(event), this.url)
|
|
})
|
|
.onHttpErrorReceive((event) => { // 加载失败
|
|
if (this.progress > 65) {
|
|
return
|
|
}
|
|
if (event) {
|
|
this.errorInfo = `错误码：${event.response.getResponseCode()}\n${event.response.getReasonMessage()}`
|
|
} else {
|
|
this.errorInfo = '错误码：-1\n未知错误'
|
|
}
|
|
ToolsHelper.log(this.errorInfo, this.url)
|
|
})
|
|
.onProgressChange((event) => { // 加载进度
|
|
if (event) {
|
|
console.log('newProgress:' + event.newProgress)
|
|
this.progress = event.newProgress
|
|
}
|
|
})
|
|
.onTitleReceive((event) => {
|
|
// 如果没有传输title，则从H5获取title赋值
|
|
if (event && !this.title) {
|
|
this.title = event.title
|
|
}
|
|
})
|
|
.onShowFileSelector((event) => { // 选择文件
|
|
console.log('MyFileUploader onShowFileSelector invoked')
|
|
const documentSelectOptions = new picker.DocumentSelectOptions()
|
|
let uri: string | null = null;
|
|
const documentViewPicker = new picker.DocumentViewPicker();
|
|
documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
|
|
uri = documentSelectResult[0];
|
|
console.info('documentViewPicker.select to file succeed and uri is:' + uri);
|
|
if (event) {
|
|
event.result.handleFileList([uri]);
|
|
}
|
|
}).catch((err: BusinessError) => {
|
|
if (event) {
|
|
event.result.handleFileList([])
|
|
}
|
|
ToolsHelper.showMessage(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`)
|
|
console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
|
|
})
|
|
return true
|
|
})
|
|
Column() {
|
|
Text(this.errorInfo)
|
|
Button('点击重试')
|
|
.onClick(() => {
|
|
this.controller.refresh()
|
|
this.errorInfo = null
|
|
this.progress = 0
|
|
})
|
|
.margin({ top: 30 })
|
|
}
|
|
.visibility(this.errorInfo == null ? Visibility.None : Visibility.Visible)
|
|
.width('100%')
|
|
.height('100%')
|
|
.justifyContent(FlexAlign.Center)
|
|
.padding({ bottom: 80 })
|
|
|
|
XDialogList({
|
|
// 控制器
|
|
controller: this.dialogController,
|
|
// 标题(可选)
|
|
title: '选择您的操作',
|
|
// 选择内容列表
|
|
values: ['刷新', '浏览器打开', '复制地址'],
|
|
// 用户选择事件
|
|
onSelected: (index: number, value: string) => {
|
|
if (index === 0) {
|
|
this.controller.refresh()
|
|
} else if (index === 1) {
|
|
GlobalContext.getContext().openLink(this.controller.getUrl())
|
|
} else {
|
|
pasteboard.getSystemPasteboard()
|
|
.setData(pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, this.controller.getUrl()), () => {
|
|
ToolsHelper.showMessage('已复制到剪切板')
|
|
})
|
|
}
|
|
},
|
|
// 用户取消事件
|
|
onCancel: () => {
|
|
// ToolsHelper.showMessage('用户取消操作')
|
|
},
|
|
// 是否可取消(点击空白处，或者物理返回键)
|
|
autoCancel: true
|
|
})
|
|
|
|
}.width('100%').height('100%')
|
|
.padding({
|
|
top: WindowHelper.topRectHeight,
|
|
bottom: WindowHelper.bottomRectHeight
|
|
})
|
|
|
|
Column() {
|
|
LoadingProgress()
|
|
.color(Color.White)
|
|
.width(80).height(80)
|
|
Text(`努力下载中(${Math.floor(this.receivedSize / this.totalSize * 100)}%)..`)
|
|
.fontSize(16)
|
|
.fontColor(Color.White)
|
|
}
|
|
.visibility(this.isDownload ? Visibility.Visible : Visibility.None)
|
|
.width('100%')
|
|
.height('100%')
|
|
.backgroundColor('#40000000')
|
|
.justifyContent(FlexAlign.Center)
|
|
}
|
|
.align(Alignment.Top)
|
|
.width('100%')
|
|
.height('100%')
|
|
}
|
|
}
|
|
|
