|
@@ -0,0 +1,233 @@
|
|
|
+import web_webview from '@ohos.web.webview';
|
|
|
+import { router } from '@kit.ArkUI';
|
|
|
+import { XDialogController } from '../dialog/XDialogController';
|
|
|
+import { XDialogList } from '../dialog/XDialogList';
|
|
|
+import { picker } from '@kit.CoreFileKit';
|
|
|
+import { BusinessError } from '@kit.BasicServicesKit';
|
|
|
+import { ToolsHelper } from '../utils/ToolsHelper';
|
|
|
+import { XWebParams } from '../utils/XWebHelper';
|
|
|
+
|
|
|
+@Entry({ routeName: 'XWebview' })
|
|
|
+@Preview
|
|
|
+@Component
|
|
|
+export struct XWebview {
|
|
|
+ // 手机号
|
|
|
+ @State url: string = (router.getParams() as XWebParams).url
|
|
|
+ @State title?: string = (router.getParams() as XWebParams).title
|
|
|
+ @State errorInfo: string | null = null
|
|
|
+ @State progress: number = 0
|
|
|
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
|
|
|
+ dialogController: XDialogController = {} as XDialogController
|
|
|
+
|
|
|
+ aboutToAppear(): void {
|
|
|
+ }
|
|
|
+
|
|
|
+ aboutToDisappear(): void {
|
|
|
+ }
|
|
|
+
|
|
|
+ onBackPress(): boolean | void {
|
|
|
+ if (this.controller.accessBackward()) {
|
|
|
+ this.controller.backward()
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ build() {
|
|
|
+ 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 }) {
|
|
|
+ Image($r('sys.media.ohos_ic_public_more'))
|
|
|
+ .width(26).height(26)
|
|
|
+ }.width(65)
|
|
|
+ .onClick(() => {
|
|
|
+ if (this.dialogController != null) {
|
|
|
+ this.dialogController.open()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height(45)
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ .padding({ left: 15, right: 15 })
|
|
|
+
|
|
|
+ Divider().height(2).color(0xCCCCCC)
|
|
|
+ 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 })
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .visibility(this.errorInfo == null ? Visibility.Visible : Visibility.None)
|
|
|
+ .mixedMode(MixedMode.All)//允许加载HTTP和HTTPS混合内容
|
|
|
+ .zoomAccess(false)//不支持手势进行缩放
|
|
|
+ .mediaPlayGestureAccess(false)//有声视频播放不需要用户手动点击
|
|
|
+ .cacheMode(CacheMode.Default)//设置缓存模式
|
|
|
+ .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) {
|
|
|
+ console.log('url:' + event.url)
|
|
|
+ console.log('userAgent:' + event.userAgent)
|
|
|
+ console.log('contentDisposition:' + event.contentDisposition)
|
|
|
+ console.log('contentLength:' + event.contentLength)
|
|
|
+ console.log('mimetype:' + event.mimetype)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .onErrorReceive((event) => { // 加载失败
|
|
|
+ if (this.progress > 65) return
|
|
|
+ if (event) {
|
|
|
+ this.errorInfo = `错误码:${event.error.getErrorCode()}\n${event.error.getErrorInfo()}`
|
|
|
+ } else {
|
|
|
+ this.errorInfo = '错误码:-1\n未知错误'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .onHttpErrorReceive((event) => { // 加载失败
|
|
|
+ if (this.progress > 65) return
|
|
|
+ if (event) {
|
|
|
+ this.errorInfo = `错误码:${event.response.getResponseCode()}\n${event.response.getReasonMessage()}`
|
|
|
+ } else {
|
|
|
+ this.errorInfo = '错误码:-1\n未知错误'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .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) => {
|
|
|
+ ToolsHelper.showMessage(`用户选择了第${index}个,内容为:${value}`)
|
|
|
+ },
|
|
|
+ // 用户取消事件
|
|
|
+ onCancel: () => {
|
|
|
+ ToolsHelper.showMessage('用户取消操作')
|
|
|
+ },
|
|
|
+ // 是否可取消(点击空白处,或者物理返回键)
|
|
|
+ autoCancel: true
|
|
|
+ })
|
|
|
+
|
|
|
+ }.width('100%').height('100%')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|