Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（下）

最新推荐文章于 2024-05-04 03:28:22 发布
最新推荐文章于 2024-05-04 03:28:22 发布
阅读量587 收藏
点赞数
分类专栏： 编程小技能 文章标签： webview javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40575646/article/details/122841217
版权

WebviewTransform

一组用于定义页面或控件变形的属性

WebviewTransition

一组用于定义页面或控件转换效果的属性

属性：

  • property: (String 类型 )产生变换效果的属性

    默认值为"all"，暂不支持其它值。

    平台支持

    • Android - 2.2+ (支持)
    • iOS - 4.3+ (支持)
  • duration: (String 类型 )变换持续的时间

    默认值为0，即无动画效果。

    平台支持

    • Android - 2.2+ (支持)
    • iOS - 4.3+ (支持)
  • timingfunction: (String 类型 )窗口变换效果

    可取值： "linear"：匀速变化，匀速动画效果； "ease-in"：匀加速变化，逐渐变快的动画效果； "ease-out"：匀减速变化，逐渐变慢的动画效果； "ease-in-out"：先加速后减速变化，先变快后变慢的动画效果。 默认值为"ease-in-out"。

    平台支持

    • Android - 2.2+ (支持)
    • iOS - 4.3+ (支持)

WebviewOverrideResourceOptions

拦截Webview窗口资源请求的参数

属性：

  • match: (String 类型 )区配需要拦截请求资源的URL地址

    支持正则表达式，默认值为空字符串（即不拦截）。

  • redirect: (String 类型 )拦截重定向的资源地址

    仅支持本地资源地址，如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径。

  • mime: (String 类型 )重定向的资源数据类型

    RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型。 如普通文本（text/plain）、PNG图像(image/png)、GIF图形(image/gif)、JPEG图形(image/jpeg)。 如果未指定mime类型，则根据重定向资源路径自动区配。

  • encoding: (String 类型 )重定向的资源数据编码

    如未设置，则使用默认值"UTF-8"。

  • header: (JSON 类型 )设置重定向资源数据的http头数据

    可设置标注http头数据（如Content-type）,也可设置自定义数据。 通常可通过此属性来设置拦截资源的缓存策略（如Cache-control）。

WebviewOverrideUrlOptions

拦截Webview窗口URL请求的属性

属性：

  • effect: (String 类型 )拦截URL请求生效时机

    可取值： "instant" - 表示立即生效，即调用overrideUrlLoading方法后立即生效； "touchstart" - 表示用户操作Webview窗口（触发touchstart事件）后生效，如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。 默认值为"instant"。

  • mode: (String 类型 )拦截模式

    可取值： "allow"表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调； "reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。 默认值为"reject"。

  • match: (String 类型 )区配是否需要处理的URL请求

    支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。 如果mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。

  • exclude: (String 类型 )排除拦截处理请求类型

    不拦截处理指定类型的URL请求，直接使用系统默认处理逻辑。 可取值： "none"表示不排除任何URL请求（即拦截处理所有URL请求）； "redirect"表示排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）。 默认值为"none"。

WebviewListenResourceOptions

监听Webview窗口资源加载的属性

属性：

  • match: (String 类型 )区配是否需要处理的URL资源

    支持正则表达式，默认值为对所有URL资源请求生效（相当于正则表达式“.*”）。 如果Webview加载的资源区配条件，则触发回调事件。

BounceEventCallback

Webview窗口回弹事件的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onEvent</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Event ) 必选 Webview窗口回弹事件触发时事件数据

    Event对象包含以下属性： status - 表示回弹位置状态，设置顶部下拉回弹changeoffset属性后可取值："beforeChangeOffset"表示可继续拖拽，此时松开拖拽窗口会回弹到其初始位置； "afterChangeOffset"表示回弹可停靠，此时松开拖拽窗口会回弹到停靠位置； "dragEndAfterChangeOffset"表示已进松开拖拽，并且窗口回弹到停靠位置。 设置左右侧侧滑slideoffset属性后可取值："beforeSlide"表示未侧滑状态；"afterSlide"表示已侧滑状态。 offset - 表示回弹方向，可取值："left"表示左侧滑动，"right"表示右侧滑动，"top"表示上侧下拉滑动。 target - 保存触发回弹此事件的Webview窗口对象。

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Webview Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> ws</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// H5 plus事件处理</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">currentWebview</span><span style="color:#ffffff">();</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setBounce</span><span style="color:#ffffff">({</span><span style="color:#ffffff">position</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100px'</span><span style="color:#ffffff">},</span><span style="color:#ffffff">changeoffset</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'44px'</span><span style="color:#ffffff">}});</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'dragBounce'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> onPullStateChange</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	plusReady</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span><span style="color:#f0e68c"><strong>else</strong></span><span style="color:#ffffff">{</span><span style="color:#ffffff">
	document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'plusready'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 下拉状态改变</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> onPullStateChange</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span>
	<span style="color:#f0e68c"><strong>switch</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">status</span><span style="color:#ffffff">){</span>
		<span style="color:#f0e68c"><strong>case</strong></span> <span style="color:#ffa0a0">'beforeChangeOffset'</span><span style="color:#ffffff">:</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'顶部回弹：可继续往下拖拽'</span><span style="color:#ffffff">);</span>
		<span style="color:#f0e68c"><strong>break</strong></span><span style="color:#ffffff">;</span>
		<span style="color:#f0e68c"><strong>case</strong></span> <span style="color:#ffa0a0">'afterChangeOffset'</span><span style="color:#ffffff">:</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'顶部回弹：松开会重置回弹位置'</span><span style="color:#ffffff">);</span>
		<span style="color:#f0e68c"><strong>break</strong></span><span style="color:#ffffff">;</span>
		<span style="color:#f0e68c"><strong>case</strong></span> <span style="color:#ffa0a0">'dragEndAfterChangeOffset'</span><span style="color:#ffffff">:</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'顶部回弹：松开停靠回弹'</span><span style="color:#ffffff">);</span>
		<span style="color:#f0e68c"><strong>break</strong></span><span style="color:#ffffff">;</span>
		<span style="color:#f0e68c"><strong>default</strong></span><span style="color:#ffffff">:</span>
		<span style="color:#f0e68c"><strong>break</strong></span><span style="color:#ffffff">;</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 重置窗口回弹位置</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> resetBounce</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">resetBounce</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body</strong></span> <span style="color:#bdb76b"><strong>style</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">text</span><span style="color:#ffffff">-</span><span style="color:#ffffff">align</span><span style="color:#ffffff">:</span><span style="color:#ffffff">center</span><span style="color:#ffffff">;</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span>
		<span style="color:#f0e68c"><strong><br/><br/><br/></strong></span><span style="color:#ffffff">
		设置Webview窗口的回弹效果</span><span style="color:#f0e68c"><strong><br/></strong></span><span style="color:#ffffff">
		回弹后显示停靠到44px的位置</span><span style="color:#f0e68c"><strong><br/><br/></strong></span>
		<span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">resetBounce</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">重置回弹位置</span><span style="color:#f0e68c"><strong></button></strong></span>
		<span style="color:#f0e68c"><strong><br/><br/><br/></strong></span><span style="color:#ffffff">
		*暂仅支持顶部的回弹效果*
	</span><span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

EventCallback

Webview窗口事件的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onEvent</span><span style="color:#ffffff">(</span><span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Object ) 可选 Webview窗口事件触发时事件数据

    回调参数包含以下属性： target：保存触发此事件的Webview窗口对象； progress：保存窗口页面加载进度，仅"progressChanged"事件时有此属性。

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Webview Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// H5 plus事件处理</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span>
<span style="color:#ffffff">}</span>
<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	plusReady</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span><span style="color:#f0e68c"><strong>else</strong></span><span style="color:#ffffff">{</span><span style="color:#ffffff">
	document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'plusready'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>

<span style="color:#87ceeb">// 监听Webview窗口页面加载完成事件</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> eventTest</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// 打开新窗口</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">create</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">''</span><span style="color:#ffffff">,</span> <span style="color:#ffa0a0">''</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'46px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">bottom</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">);</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'loaded'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Loaded: '</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">target</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getURL</span><span style="color:#ffffff">());</span>
	<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</span><span style="color:#ffffff">();</span> <span style="color:#87ceeb">// 显示窗口</span>
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span><span style="color:#ffffff">
		Webview窗口页面加载完成事件
		</span><span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">eventTest</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">start</span><span style="color:#f0e68c"><strong></button></strong></span>
		<span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">loadURL</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'http://m.weibo.cn/u/3196963860'</span><span style="color:#ffffff">)</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">loaded</span><span style="color:#f0e68c"><strong></button></strong></span>
	<span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

PopGestureCallback

Webview窗口侧滑事件的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onEvent</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">PopGestureEvent</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( PopGestureEvent ) 必选 Webview窗口事件触发时事件数据

    PopGestureEvent对象包含以下属性： target：保存侧滑操作的Webview窗口对象。 type：保存侧滑事件类型，"start"表示开始侧滑返回，用户按下滑动时触发； “end”表示结束侧滑返回，用户松手时触发； “move"表示侧滑返回动作结束，用户移动侧滑时触发。 result：保存操作结果，仅在e.type为end时有效，boolean类型， true表示侧滑返回执行，false表示侧滑返回取消；否则为undefined。 progress：保存侧滑位置，Number类型，可带小数点，范围为0-100。

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Webview Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// H5 plus事件处理</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	createWebview</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span>
<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	plusReady</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span><span style="color:#f0e68c"><strong>else</strong></span><span style="color:#ffffff">{</span><span style="color:#ffffff">
	document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'plusready'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>

<span style="color:#87ceeb">// 创建Webview窗口监听侧滑返回事件</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> createWebview</span><span style="color:#ffffff">(){</span>
	<span style="color:#87ceeb">// 打开新窗口</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">create</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'http://m.weibo.cn/u/3196963860'</span><span style="color:#ffffff">,</span> <span style="color:#ffa0a0">''</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">bottom</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">popGesture</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'hide'</span><span style="color:#ffffff">});</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'popGesture'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		poplog</span><span style="color:#ffffff">.</span><span style="color:#ffffff">innerText</span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">'popGesture: '</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">type</span><span style="color:#ffffff">+</span><span style="color:#ffa0a0">','</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">result</span><span style="color:#ffffff">+</span><span style="color:#ffa0a0">','</span><span style="color:#ffffff">+</span><span style="color:#ffffff">e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">progress</span><span style="color:#ffffff">;</span>
	<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 显示Webview窗口</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> showWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'slide-in-right'</span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 隐藏Webview窗口</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> hideWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">hide</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 关闭窗口</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> closeWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">close</span><span style="color:#ffffff">();</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">currentWebview</span><span style="color:#ffffff">().</span><span style="color:#ffffff">close</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span><span style="color:#ffffff">
		Webview窗口侧滑返回事件
		</span><span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">closeWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Close</span><span style="color:#f0e68c"><strong></button></strong></span>
		<span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">showWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Show</span><span style="color:#f0e68c"><strong></button></strong></span>
		<span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">hideWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Hide</span><span style="color:#f0e68c"><strong></button></strong></span>
		<span style="color:#f0e68c"><strong><div</strong></span> <span style="color:#bdb76b"><strong>id</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"poplog"</span><span style="color:#f0e68c"><strong>></div></strong></span>
	<span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

HistoryQueryCallback

历史记录查询的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onHistoryQuery</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Event handled code.</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> canBack </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">.</span><span style="color:#ffffff">canBack</span><span style="color:#ffffff">;</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> canForward </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">.</span><span style="color:#ffffff">canForward</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Event ) 必选 查询Webview窗口历史记录操作事件数据

    可通过event的canBack属性获取Webview窗口是否可后退，通过event的canForward属性获取Webview窗口是否可前进。

返回值：

void : 无

ListenResourceLoadingCallback

Webview窗口加载资源事件的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onLoadingResource</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Event handled code.</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> url </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">.</span><span style="color:#ffffff">url</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Event ) 必选 Webview窗口加载资源事件数据

    可通过event的url属性获取要加载的资源URL地址。

返回值：

void : 无

OverrideUrlLoadingCallback

Webview窗口拦截URL链接跳转的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onOverride</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Event handled code.</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> url </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">.</span><span style="color:#ffffff">url</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Event ) 必选 Webview窗口拦截URL跳转事件数据

    可通过event的url属性获取拦截的URL地址。

返回值：

void : 无

TitleUpdateCallback

Webview窗口加载页面标题更新的回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onQuery</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Event ) 必选 Webview窗口加载页面标题更新事件数据

    可通过event的title属性获取Webview窗口的标题。

返回值：

void : 无

WebviewAnimationCallback

Webview窗口组合动画回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onAnimationFinished</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • event: ( Event ) 必选 Webview窗口动画完成事件数据

    可通过event的id属性获取对应Webview窗口的标识，如果操作的窗口未设置id，则返回空字符串； 可通过event的target属性获取对应Webview窗口对象。

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Webview Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> ws</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff">wn</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// H5 plus事件处理</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">currentWebview</span><span style="color:#ffffff">();</span>
	<span style="color:#87ceeb">// 预创建新窗口（显示在可视区域外）</span><span style="color:#ffffff">
	wn</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">create</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'http://m.weibo.cn/u/3196963860'</span><span style="color:#ffffff">,</span> <span style="color:#ffa0a0">'newdrag'</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">left</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">render</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'always'</span><span style="color:#ffffff">});</span><span style="color:#ffffff">
	wn</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'none'</span><span style="color:#ffffff">);</span>
	<span style="color:#87ceeb">// 右滑隐藏新窗口</span><span style="color:#ffffff">
	wn</span><span style="color:#ffffff">.</span><span style="color:#ffffff">drag</span><span style="color:#ffffff">({</span><span style="color:#ffffff">direction</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'right'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">moveMode</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'followFinger'</span><span style="color:#ffffff">},</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">view</span><span style="color:#ffffff">:</span><span style="color:#ffffff">ws</span><span style="color:#ffffff">,</span><span style="color:#ffffff">moveMode</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'follow'</span><span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Right drag event: '</span><span style="color:#ffffff">+</span><span style="color:#ffffff">JSON</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stringify</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">));</span>
	<span style="color:#ffffff">});</span>
<span style="color:#ffffff">}</span>
<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	plusReady</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span><span style="color:#f0e68c"><strong>else</strong></span><span style="color:#ffffff">{</span><span style="color:#ffffff">
	document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'plusready'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
<span style="color:#87ceeb">// 窗口组合动画</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> webviewAnimation</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">startAnimation</span><span style="color:#ffffff">({</span><span style="color:#ffffff">view</span><span style="color:#ffffff">:</span><span style="color:#ffffff">ws</span><span style="color:#ffffff">,</span><span style="color:#ffffff">styles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">fromLeft</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">toLeft</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'-100%'</span><span style="color:#ffffff">},</span><span style="color:#ffffff">action</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'none'</span><span style="color:#ffffff">},</span>
	<span style="color:#ffffff">{</span><span style="color:#ffffff">view</span><span style="color:#ffffff">:</span><span style="color:#ffffff">wn</span><span style="color:#ffffff">,</span><span style="color:#ffffff">styles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">fromLeft</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">toLeft</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0%'</span><span style="color:#ffffff">},</span><span style="color:#ffffff">action</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'none'</span><span style="color:#ffffff">},</span>
	<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Animation finished: '</span><span style="color:#ffffff">+</span><span style="color:#ffffff">JSON</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stringify</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">));</span>
	<span style="color:#ffffff">});</span>
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span>
		<span style="color:#f0e68c"><strong><br/><br/></strong></span>
		<span style="color:#f0e68c"><strong><button</strong></span> <span style="color:#bdb76b"><strong>onclick</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"</span><span style="color:#ffffff">webviewAnimation</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">窗口组合动画显示新窗口</span><span style="color:#f0e68c"><strong></button></strong></span>
		<span style="color:#f0e68c"><strong><br/><br/></strong></span><span style="color:#ffffff">
		在新窗口中可以右滑返回（新窗口移动到屏幕外）
	</span><span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

WebviewDragCallback

Webview窗口滑屏操作事件回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onDrag</span><span style="color:#ffffff">(</span> <span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span> <span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明：

在窗口开始滑动、滑动过程、滑动结束时触发，其中滑动过程中会触发多次，滑动过程中触发次数由WebviewDragOptions对象的callbackStep决定。

参数：

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Webview Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> ws</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff">wn</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span>
<span style="color:#87ceeb">// H5 plus事件处理</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">currentWebview</span><span style="color:#ffffff">();</span>
	<span style="color:#87ceeb">// 预创建新窗口（显示在可视区域外）</span><span style="color:#ffffff">
	wn</span><span style="color:#ffffff">=</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">create</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'http://m.weibo.cn/u/3196963860'</span><span style="color:#ffffff">,</span> <span style="color:#ffa0a0">'newdrag'</span><span style="color:#ffffff">,{</span><span style="color:#ffffff">left</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100%'</span><span style="color:#ffffff">});</span><span style="color:#ffffff">
	wn</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'none'</span><span style="color:#ffffff">);</span>
	<span style="color:#87ceeb">// 左滑显示新窗口</span><span style="color:#ffffff">
	ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">drag</span><span style="color:#ffffff">({</span><span style="color:#ffffff">direction</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'left'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">moveMode</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'followFinger'</span><span style="color:#ffffff">},</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">view</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'newdrag'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">moveMode</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'follow'</span><span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Left drag event: '</span><span style="color:#ffffff">+</span><span style="color:#ffffff">JSON</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stringify</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">));</span>
	<span style="color:#ffffff">});</span>
	<span style="color:#87ceeb">// 右滑隐藏新窗口</span><span style="color:#ffffff">
	wn</span><span style="color:#ffffff">.</span><span style="color:#ffffff">drag</span><span style="color:#ffffff">({</span><span style="color:#ffffff">direction</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'right'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">moveMode</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'followFinger'</span><span style="color:#ffffff">},</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">view</span><span style="color:#ffffff">:</span><span style="color:#ffffff">ws</span><span style="color:#ffffff">,</span><span style="color:#ffffff">moveMode</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'follow'</span><span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
		console</span><span style="color:#ffffff">.</span><span style="color:#ffffff">log</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Right drag event: '</span><span style="color:#ffffff">+</span><span style="color:#ffffff">JSON</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stringify</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">));</span>
	<span style="color:#ffffff">});</span>
<span style="color:#ffffff">}</span>
<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	plusReady</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span><span style="color:#f0e68c"><strong>else</strong></span><span style="color:#ffffff">{</span><span style="color:#ffffff">
	document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'plusready'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span><span style="color:#ffffff">
		左滑可打开新页面
	</span><span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

WebviewCustomButtonCallback

Webview窗口标题栏上自定义按钮点击事件回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onClicked</span><span style="color:#ffffff">(</span><span style="color:#98fb98">Event</span> <span style="color:#f0e68c"><strong>event</strong></span><span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// Event handled code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明：

用户点击自定义按钮时触发。

参数：

  • event: ( Event ) 必选 点击事件触发时的数据

    Event对象包含以下属性： target：触发此事件的WebviewBackButtonStyles对象。

返回值：

void : 无

SuccessCallback

Webview窗口操作成功回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onSuccess</span><span style="color:#ffffff">(){</span>
	<span style="color:#87ceeb">// Success code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

说明：

Webview窗口业务操作成功后触发回调函数。

参数：

无

返回值：

void : 无

ErrorCallback

Webview窗口操作失败回调函数

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onError</span><span style="color:#ffffff">(</span><span style="color:#ffffff">error</span><span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// Handle the error</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> code </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> error</span><span style="color:#ffffff">.</span><span style="color:#ffffff">code</span><span style="color:#ffffff">;</span> <span style="color:#87ceeb">// 错误编码</span>
	<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> message </span><span style="color:#ffffff">=</span><span style="color:#ffffff"> error</span><span style="color:#ffffff">.</span><span style="color:#ffffff">message</span><span style="color:#ffffff">;</span> <span style="color:#87ceeb">// 错误描述信息</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

  • error: ( Exception ) 可选 Webview窗口操作错误信息

    可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描述信息。

返回值：

void : 无

低吟~浅唱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android笔记(十九)：WebView浏览器多标签页（多窗口）功能新的实现
ZBM来了
05-04 3221
背景 之前写过的文章——WebView+Fragment+ViewPager构建浏览器多标签页 虽然实现了多标签页的功能，但是有个弊端就是随着创建的标签页数量增加，viewpager的滑动会越来越卡。之前一直没有时间优化，最近尝试着优化了一下，对Dainty浏览器的多标签页功能抽取出来，进行改造。...
Android 一个Activity中实现多窗口WebView
热门推荐
QuietWake的博客
11-03 1万+
公司在弄一个类似浏览器的框架，主要页面功能都是用h5，但是领导说要弄成多窗口的，而且还是只在当前Activity中； 主体功能大概如此：头部标题栏实现 标题、菜单列表、多窗口显示等 头部以下就是一个WebView页面，js交互实现页面显示。 听到这个需求我挺头疼，因为在一个Activity中实现多窗口还要实时的保存每个页面的状态 查找了很多资料，跟我这个需求差
跨平台应用开发进阶(五十七)：uni-app 通过 overrideUrlLoading 实现拦截 webview 窗口的 URL 跳转请求(2)
最新发布
2401_84446787的博客
05-04 135
URLWebviewURLcallbackURLWebviewURLloadURLcss/js/pngoptionseffectURLinstanttouchstartWebviewtouchstartWebview默认值为"instant"。mode: (String 类型 ) 拦截模式。可取值： “allow”、"reject”，默认值为"rejectallowmatchmatchurlcallbackrejectmatchurlcallbackmatchurlmatch。
Android IOS 与Vue网页进行JS交互之三、使用IOS WKWebView与Vue网页进行交互
杨迪龙的博客
09-07 1388
Android IOS 与Vue网页进行JS交互之三、使用IOS WKWebView与Vue网页进行交互前言IOS与Vue交互新建IOS项目在SwiftUI中调用WKWebView编写页面显示设置弹窗设置JS交互设置页面地址运行GitHub完事 前言 Android IOS 与Vue网页进行JS交互之一、使用HBuilderX编写Vue页面 Android IOS 与Vue网页进行JS交互之二、使用Android WebView与Vue网页进行交互 这系列文章主要是为了展示如何在移动APP端调用同样的一
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中1）
casey的博客
02-23 677
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中1）
跨平台应用开发进阶(五十七)：uni-app 通过 overrideUrlLoading 实现拦截 webview 窗口的 URL 跳转请求
IT全栈 华强工作室
03-07 1949
项目需求：通过uni-app的webview嵌入H5页面，且webview的src为互联网页面访问地址，页面中涉及很多可点击链接，若不加限制，则可以在webview中随意跳转至其它外链地址，存在安全合规隐患。
Android底部滑动弹出窗口源码
11-06
综上所述，这个"Android底部滑动弹出窗口源码"项目涵盖了Android开发中的多个关键点：自定义视图动画、WebView交互、底部导航菜单和顶部滑动菜单的实现。通过研究这个项目，开发者不仅可以学习到如何实现底部滑出...
java + tauri + vue.js 做的一款通信软件，实现即时聊天.zip
11-08
在即时聊天应用中，Vue.js负责构建用户界面，实现动态数据绑定、组件化开发和响应式更新。开发者可以使用Vue.js轻松创建聊天窗口、消息列表、用户信息展示等组件，并通过WebSocket等技术实现实时通信。 综上所述，...
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
02-28
（1）针对多窗口类浏览器模式问题，指出并分析了该问题存在的原因，利用Activity的运行机制，通过Fragment栈对主要模块的Webview进行管理，实现对不同模块之间切换的控制。 （2）针对跨域数据交互问题，指出并分析了...
Android源码——Zirco浏览器源码.zip
10-08
如果Zirco支持多窗口浏览，那么源码中会有Tab管理的相关实现，如添加、删除、切换Tab的逻辑。 9. **用户设置与偏好**： 应用可能包含一个设置界面，让用户自定义浏览器的行为，如字体大小、夜间模式、广告拦截等...
Android 网页浏览器源码.zip
07-19
8. **多窗口与标签管理**：源码还会展示如何实现多窗口、多标签的切换和管理。 通过对"Android网页浏览器源码"的深入研究，开发者能够掌握更多关于Android系统、网络编程、性能调优等方面的知识，从而在实际项目中...
android 浏览器之多窗口方案详解
01-04
我们Android平台是一个又一个的Activity组成的，每一个Activity有一个或者多个View构成。所以说，当我们想显示一个界面的时候，我们首先想到的是建立一个Activity，然后所有的操作在Activity里面实现，或者是一个Dialog或者Toast。这种方式固然简单，但是在有些情况下，我们要求的只是简单的显示，用Activity显然是多余，这个时候，我们如何处理呢？ Android的一个应用在底层也是linux的一个进程，但在上层弱化了进程的概念，抽象出了Activity这样一种交互。代码直接控制的是Activity，用户的交互也是Activity。Activity是从用户
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（上）
casey的博客
02-14 761
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（上）
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中2）
casey的博客
02-23 448
Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中2）
Android浏览器多窗口webview界面截屏心得
wolfboy2的专栏
06-13 4904
做Android浏览器多窗口的时候，需要使用到浏览器的webview快照，当前有三种方法，都尝试过，对第二种方法做了一点改进，整理说一下他们各自的优势：
html5+mui app（一）
weixin_45338913的博客
03-05 2813
html+mui 本文仅用于个人学习，感谢批评指正 webview Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。 方法： all:获取所有Webview窗口 close:关闭Webview窗口 create：创建新的Webview窗口 currentWebview:获取当前窗口的WebviewObject对象 getDis...
android 2.3 webview transform,UGUI UniWebView适配
weixin_42365539的博客
05-26 139
using System.Collections;using System.Collections.Generic;using NxFish;using UnityEngine;using UnityEngine.UI;public class UniTest : MonoBehaviour {private UniWebView webView;public NxFish.Data.Accoun...
iOS Swift App用WKWebView加载h5, h5多页面手势返回，h5返回App
Lee坚武的博客
07-13 1920
本人亲测有效！更多交流可以家魏鑫：lixiaowu1129，公重好：iOS过审汇总，一起探讨iOS相关技术！ 1. 创建webView时使用：作用是允许h5多页面，手势滑动 wkWebView.allowsBackForwardNavigationGestures = true 2. 因为App系统自带侧滑手势返回，所以要这样做： //监听侧滑手势let swiperGesture = UISwipeGestureRecognizer(target:&nbs
使用 Swift 进行 iOS 开发中的 SwiftUI 和多窗口支持
code2day的博客
01-23 1054
SwiftUI 是一个现代的声明式 UI 框架，它为开发人员提供了一种更简单的方法来为 iOS、iPadOS 和 macOS 应用程序构建用户界面。凭借其直观的语法，SwiftUI 可以更轻松地编写代码并快速开发适用于多个平台的应用程序。SwiftUI 提供的功能之一是支持 iOS 上的多窗口应用程序。
使用WebView构建摄像头监控界面
移动应用开发中的摄像头监控界面创建是一个综合性的任务，涉及到网络通信、UI设计和用户交互等多个方面。开发者需要熟练掌握WebView的使用，理解HttpURLConnection类在处理HTTP请求中的作用，以及如何利用Android的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值