华为web组件无法响应事件

jy

在华为快应用加载器中，web组件无法触发 titlereceive、pagefinish等事件，快应用官方调试器没有这个问题 下面是代码：

1. <template>
2. <!-- template里只能有一个根节点 -->
3. <div class="container">
4. <text class="title">
5. Hello {{title}}
6. </text>
7. <input type="button" value="网页" onclick="onWebShow()"></input>
8. <web id="web" ontitlereceive="onWebTitChange" onpagefinish="onWebLoaded" src="{{webUrl}}" style="display:{{webShow ? 'flex':'none'}};"></web>
9. </div>
10. </template>
12. <style>
13. web{position:fixed;left:0;top:0;right:0;bottom:0;display:none;width:100%;height:100%;}
14. .container {
15. flex-direction: column;
16. justify-content: center;
17. align-content: center;
18. align-items: center;
19. }
21. .title {
22. font-size: 100px;
23. }
24. </style>
26. <script>
27. import prompt from '@system.prompt'
28. import shortcut from '@system.shortcut'
29. import webview from '@system.webview'
31. module.exports = {
32. data: {
33. title: 'World',
34. webUrl:'',
35. webShow:false
36. },
37. onWebShow(){
38. var url = 'http://www.baidu.com';
39. var url1 = 'https://quickapp.cn';
40. if(this.webUrl && this.webUrl == url){url = url1}
42. if(url != this.webUrl){
43. this.webShow = true;
44. this.webUrl = url;
45. }else{
46. this.webShow = true;
47. }
48. return;
49. },
50. onWebLoaded(){
51. prompt.showDialog({
52. title: '提示',
53. message: "网页加载完成",
54. buttons: [
55. {
56. text: '确定',
57. color: '#33dd44'
58. }
59. ]
60. });
61. },
62. onWebTitChange(tobj){
63. prompt.showDialog({
64. title: '提示',
65. message: tobj.title,
66. buttons: [
67. {
68. text: '确定',
69. color: '#33dd44'
70. }
71. ]
72. });
73. },
74. onInit() {
75. this.$page.setTitleBar({
76. text: 'menu',
77. textColor: '#ffffff',
78. backgroundColor: '#007DFF',
79. backgroundOpacity: 0.5,
80. menu: true
81. })
82. },
83. onMenuPress() {
84. var that = this;
85. prompt.showContextMenu({
86. itemList: ['关闭网页','添加到桌面'],
87. success: function (data) {
88. if(data.index == 0){
89. that.webShow = false;
90. }else if(data.index == 1){
91. shortcut.install({
92. success: function () {
93. // 使用应用加载器时，请先在设置中打开应用加载器的桌面快捷方式
94. prompt.showToast({
95. message: "桌面图标创建成功"
96. })
97. },
98. fail: function (erromsg, errocode) {
99. prompt.showToast({message: "创建失败" + errocode + ': ' + erromsg})
100. },
101. complete: function () {
102. console.log('shortcut complete');
103. }
104. })
105. }
106. },
107. fail: function (data, code) {
108. console.log("handling fail, code=" + code);
109. },
110. cancel: function (data) {
111. console.log("handling cancel");
112. },
113. complete: function () {
114. console.log("handling complete");
115. },
116. })
118. }
119. }
120. </script>

复制代码

华为渲染器效果： http://u2988804.ctcontents.com/drfiles/2988804/294379386/hw.mp4 快应用官方渲染器效果： http://u2988804.ctcontents.com/d ... 379389/quickapp.mp4

军军2000

我们尽快排查，另外建议加我微信junjun360422，通过微信联调验证结果。

jy

华为官方人员已经找到问题了： 在华为的渲染器下，web组件的position设置为fixed时，将无法触发web的事件 华为新版渲染器将会修复该bug