Set the Webview window rendered event parameter
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setRenderedEventOptions</span><span style="color:#ffffff">(</span><span style="color:#ffffff">options</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
You can set the criteria for judging the completion of page rendering, such as judging the top area, middle area, or bottom area of the page.
Parameters:
- options: ( WebviewRenderedEventOptions (required) Webview window rendered event parameter
Return value:
void: None
Platform support:
- Android - 2.2 + (supported)
- iOS - ALL (not supported)
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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 "> / / create a Webview window to listen for rendering events</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> createWebview</span><span style="color:#ffffff">(){</span> <span style="color:#87ceeb">// Open a new window < / 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:#ffffff"> nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'rendered'</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">'Webview rendered'</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">setRenderedEventOptions</span><span style="color:#ffffff">({</span><span style="color:#ffffff">type</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'bottom'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">interval</span><span style="color:#ffffff">:</span><span style="color:#cd5c5c">100</span><span style="color:#ffffff">});</span><span style="color:#87ceeb">// Check whether the bottom area is finished rendering, and check every 100 milliseconds < / 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:#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 Window rendering completion event </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">createWebview</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></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Temporarily set the pop-up system soft keyboard style
explain:
It only takes effect once. It takes effect when the soft keyboard pops up for the first time after setting.
Parameters:
- Mode: (String) optional soft keyboard mode
- Position: (Object) optional: trigger the position information of the edit box of the pop-up soft keyboard
The following attributes can be set: Top - the distance between the edit box and the top of the window; Height - the height of the edit box.
Return value:
void: None
Set the style of the Webview window
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setStyle</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> styles </span><span style="color:#ffffff">);</span> </code></span></span>
explain:
Update the style of Webview window, such as window position, size, background color, etc.
Parameters:
- styles: ( WebviewStyles (required) the window style to be set
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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"> embed</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">'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"> ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">embed</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 "> / / set the style of the Webview window</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> updateStyle</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setStyle</span><span style="color:#ffffff">({</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'92px'</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"> set up Webview The style of the window </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">updateStyle</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">setStyle</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>
Precautions for using plus in uni app
Set sharing parameters of Webview window
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setShareOptions</span><span style="color:#ffffff">(</span><span style="color:#ffffff">options</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
Only valid in streaming application environment (streaming application / 5 + browser): parameters used when users click the share button of streaming application environment, such as setting the title and link address of sharing.
Parameters:
- options: ( WebviewShareOptions (required) Webview window sharing parameters
You can set the shared title, link address and other information.
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">setShareOptions</span><span style="color:#ffffff">({</span><span style="color:#ffffff">title</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'Shared title'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">href</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'http://www.dcloud.io/'</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:#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:#ffffff"> set up Webview Window sharing parameters </span><span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Set the corner mark of the button on the title bar
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setTitleNViewButtonBadge</span><span style="color:#ffffff">(</span><span style="color:#ffffff">options</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
It only takes effect when the window uses the native title bar (titleNView). When the native title bar is not displayed, operating this interface has no effect.
Parameters:
The options parameter is of json type and contains the following properties:
- Index: (Number) the index value of the required button
This value is the array index value in the buttons property of WebviewTitleNViewButtonStyles to operate the corresponding button, starting from 0.
- Text: (String) required; corner mark text content
Up to 3 characters are displayed. If it exceeds, it will display.
Return value:
void: None
Style the buttons on the title bar
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setTitleNViewButtonStyle</span><span style="color:#ffffff">(</span><span style="color:#ffffff">index</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
It only takes effect when the window uses the native title bar (titleNView). When the native title bar is not displayed, operating this interface has no effect.
Parameters:
- Index: (Number) the index value of the required button
This value is the array index value in the buttons property of WebviewTitleNViewButtonStyles to operate the corresponding button, starting from 0.
- styles: ( WebviewTitleNViewButtonStyles (required) button style to be set
Only the newly set property values are updated, and the previously set properties remain unchanged.
Return value:
void: None
Sets whether the input box on the title bar gets input focus
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setTitleNViewSearchInputFocus</span><span style="color:#ffffff">(</span><span style="color:#ffffff">focus</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
It only takes effect when the window uses the native title bar (titleNView) and is configured to display the search input. When the native title bar is not displayed, operating this interface has no effect.
Parameters:
- Focus: (Boolean) required; whether to obtain the input focus
true means to get the input focus (open the soft keyboard), and false means to lose the input focus (close the soft keyboard).
Return value:
void: None
Set the contents of the input box on the title bar
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setTitleNViewSearchInputText</span><span style="color:#ffffff">(</span><span style="color:#ffffff">text</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
If you want to clear the user's input, you can set it to an empty string. It only takes effect when the window uses the native title bar (titleNView) and is configured to display the search input. When the native title bar is not displayed, operating this interface has no effect.
Parameters:
- Text: (String) required text content to be set
Return value:
void: None
Set whether the Webview window is visible
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setVisible</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> visible </span><span style="color:#ffffff">);</span> </code></span></span>
explain:
Modifying whether the window is visible or not does not affect the display stack order of the window, and the display and hiding of the window will not have animation effect.
Parameters:
- Visible: (Boolean) required. Set whether the Webview window is visible. true means visible and false means invisible
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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"> embed</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">'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"> ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">embed</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 "> / / set whether the Webview window is visible</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> setVisible</span><span style="color:#ffffff">(</span><span style="color:#ffffff">v</span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">setVisible</span><span style="color:#ffffff">(</span><span style="color:#ffffff">v</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"> set up Webview Is the window visible</span><span style="color:#f0e68c"><strong><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">setVisible</span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">)</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">so</span><span style="color:#f0e68c"><strong></button><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">setVisible</span><span style="color:#ffffff">(</span><span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">)</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">invisible</span><span style="color:#f0e68c"><strong></button><br/></strong></span> <span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Show Webview window
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> aniShow</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> duration</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> showedCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> extras </span><span style="color:#ffffff">);</span> </code></span></span>
explain:
When calling plus Webview. After the Create method creates a Webview window, you need to call its show method to display it, and you can set the window display animation and animation time. This method can also be called to redisplay the Webview window after it is hidden.
Parameters:
- aniShow: ( AnimationTypeShow (optional) the Webview window displays the animation type
If no window animation type is specified, the default value "none" is used, i.e. no animation.
- Duration: (Number) optional. The Webview window displays the animation duration
The unit is ms, and the default time corresponding to the animation type is used by default.
- showedCB: ( SuccessCallback (optional) the Webview window displays the completed callback function
The callback function will be triggered when the specified Webview window display animation is completed. This callback will also be triggered when the window has no animation effect (such as "none" animation effect).
- extras: ( WebviewExtraOptions (optional) display Webview window extension parameters
Can be used to specify whether Webview window animation uses picture acceleration.
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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">}</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 "> / / create and display the Webview window</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> showWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> embed</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">'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"> embed</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:#cd5c5c">300</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"> display Webview window </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></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Display after specifying the Webview window
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">showBehind</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> webview </span><span style="color:#ffffff">);</span> </code></span></span>
explain:
When calling plus Webview. After the Create method creates a Webview window, you can call its showBehind method to display it after the specified Webview window. This display method will not have animation effect. When the specified Webview window is closed, its own window will be displayed automatically.
Parameters:
- webview: ( WebviewObject (optional) specifies the Webview window object
If no Webview window object is specified or the specified Webview window object is invalid (if it has been closed), its own window will be directly displayed without animation.
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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">}</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 "> / / create and display after the current Webview window</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> showWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> embed</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">'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"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">showBehind</span><span style="color:#ffffff">(</span><span style="color:#ffffff">ws</span><span style="color:#ffffff">);</span> <span style="color:#87ceeb "> / / display after the current window</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"> In specified Webview Display after window </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><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">ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">close</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></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Set the red dot of the button on the title bar
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">showTitleNViewButtonRedDot</span><span style="color:#ffffff">(</span><span style="color:#ffffff">options</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
It only takes effect when the window uses the native title bar (titleNView). When the native title bar is not displayed, operating this interface has no effect. Note: after setting the corner mark of the display button, the red dot will not be displayed.
Parameters:
The options parameter is of json type and contains the following properties:
- Index: (Number) the index value of the required button
This value is the array index value in the buttons property of WebviewTitleNViewButtonStyles to operate the corresponding button, starting from 0.
Return value:
void: None
Stop loading HTML page content
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stop</span><span style="color:#ffffff">();</span> </code></span></span>
explain:
Trigger the Webview window to stop loading the page content. If part of the content has been loaded, part of the content will be displayed. If the loading is completed, all the content will be displayed.
Parameters:
nothing
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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"> embed</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">'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"> ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">embed</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 "> / / stop loading HTML page content</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> stopWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">stop</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"> Stop loading HTML Page content </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">stopWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">stop</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>
Precautions for using plus in uni app
Update the original child View control object of the Webview window
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> wobj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">updateSubNViews</span><span style="color:#ffffff">(</span><span style="color:#98fb98">Array</span><span style="color:#ffffff">[</span><span style="color:#98fb98">WebviewSubNViewStyles</span><span style="color:#ffffff">]</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">);</span> </code></span></span>
explain:
Update the drawing content by matching the child View control with the id attribute value in WebviewSubNViewStyles. If the child View control with the corresponding id is not found, it will be ignored. This operation only updates the content drawn on the child View control and does not add or delete the original child View control object.
Parameters:
- styles: ( Array[WebviewSubNViewStyles ]) required. Select the child View control style to update
Child View control styles that do not need to be updated are not included.
Return value:
void: None
Example:
<span style="background-color:#333333"><span style="color:#474747"><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><meta</strong></span> <span style="color:#bdb76b"><strong>name</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"viewport"</span> <span style="color:#bdb76b"><strong>content</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"</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:#87ceeb "> / / H5 plus event handling</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">key</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'backbutton'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">&&</span><span style="color:#ffffff">nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">isVisible</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:#ffa0a0">'pop-out'</span><span style="color:#ffffff">):</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">runtime</span><span style="color:#ffffff">.</span><span style="color:#ffffff">quit</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:#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>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 "> / / create a Webview window with an original child View control</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> createWebview</span><span style="color:#ffffff">(){</span> <span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> styles </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"> subNViews</span><span style="color:#ffffff">:[{</span><span style="color:#ffffff"> id</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'subnview1'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">height</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">backgroundColor</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'#FF0000'</span><span style="color:#ffffff">},</span><span style="color:#ffffff"> tags</span><span style="color:#ffffff">:[{</span><span style="color:#ffffff">tag</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'font'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">id</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'font'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">text</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'Protozoa View control'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">textStyles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">size</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'18px'</span><span style="color:#ffffff">}}]</span> <span style="color:#ffffff">}]</span> <span style="color:#ffffff">};</span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">||(</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">'test'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</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">'close'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</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:#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:#ffa0a0">'pop-in'</span><span style="color:#ffffff">);</span> <span style="color:#ffffff">}</span> <span style="color:#87ceeb "> / / update the original child View control</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> updateSubNViews</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">updateSubNViews</span><span style="color:#ffffff">([{</span><span style="color:#ffffff"> id</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'subnview1'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> tags</span><span style="color:#ffffff">:[{</span><span style="color:#ffffff">tag</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'font'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">id</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'font'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">text</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'Updated primordial child View control'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">textStyles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">size</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'18px'</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:#ffffff"> Webview Child of window View control</span><span style="color:#f0e68c"><strong><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">createWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Create</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">updateSubNViews</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Update</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>
Precautions for using plus in uni app
Webview window closing event
explain:
EventCallback Type
This event is triggered when the Webview window is closed. The type is EventCallback.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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"> embed</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">'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"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onclose</span><span style="color:#ffffff">=</span><span style="color:#ffffff">embedClose</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">embed</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 "> / / page closing event callback function</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> embedClose</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff"> alert</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"Closed!"</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 Window closing event </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">embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">close</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">onclose</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>
Precautions for using plus in uni app
Webview window error event
explain:
EventCallback Type
This event is triggered when the Webview window is loaded incorrectly. The type is EventCallback.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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">embed</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 event handling</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"> embed</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">'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"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onerror</span><span style="color:#ffffff">=</span><span style="color:#ffffff">embedError</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">append</span><span style="color:#ffffff">(</span><span style="color:#ffffff">embed</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 "> / / page error event callback function</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> embedError</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff"> alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Error!'</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 Window error event <button onclick="embed.loadData('</span><span style="color:#f0e68c"><strong><xml></strong></span><span style="color:#ffffff">Not html</span><span style="color:#f0e68c"><strong></xml></strong></span><span style="color:#ffffff">')">onerror</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>
Precautions for using plus in uni app
Webview window page loading completion event
explain:
EventCallback Type
This event is triggered when the Webview window page is loaded. The type is EventCallback.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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"> embed</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 event handling</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> embed</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">'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"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onloaded</span><span style="color:#ffffff">=</span><span style="color:#ffffff">embedLoaded</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</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 "> / / page loading completion event callback function</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> embedLoaded</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">nativeUI</span><span style="color:#ffffff">.</span><span style="color:#ffffff">alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Loaded!'</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 Window page loading completion event </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">embed</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'</span><span style="color:#ffffff">)</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">onloaded</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>
Precautions for using plus in uni app
Webview window page start loading event
explain:
EventCallback Type
This event is triggered when the Webview window starts loading a new page. The type is EventCallback.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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"> embed</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 event handling</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> embed</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">'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"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">onloading</span><span style="color:#ffffff">=</span><span style="color:#ffffff">embedLoading</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> embed</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</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 "> / / the page starts loading the event callback function</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> embedLoading</span><span style="color:#ffffff">(</span><span style="color:#ffffff">e</span><span style="color:#ffffff">){</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">nativeUI</span><span style="color:#ffffff">.</span><span style="color:#ffffff">alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'Loading!'</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 Window page start loading event </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">embed</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'</span><span style="color:#ffffff">)</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">onloading</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>
Precautions for using plus in uni app
Webview window animation parameters
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>interface</strong></span> <span style="color:#98fb98">WebviewAnimationOptions</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">WebviewObject</span><span style="color:#ffffff"> view</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">WebviewAnimationStyles</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">String</span><span style="color:#ffffff"> action</span><span style="color:#ffffff">;</span> <span style="color:#ffffff">}</span> </code></span></span>
explain:
Used to specify the animation target window, starting position, target position and other information.
Properties:
- view: (WebviewObject | String | plus.nativeObj.View Type) the window object that performs the animation
It can take Webview window object, Webview window id (String type) and native view window object (plus.nativeObj.View).
- styles: (WebviewAnimationStyles (type) animation style
Used to specify the starting position and target position of the animation window.
- action: (String type) the behavior after the window animation is completed
Available value: "None" - no operation after the animation is completed; "Hide" - hide the window after the animation is completed; "Close" - close the window when the animation is complete. The default value is none.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">// Pre create new window (displayed outside the visual area) < / 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">// Slide right to hide new window < / 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 "> / / window combination animation</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">Window combination animation displays a new window</span><span style="color:#f0e68c"><strong></button></strong></span> <span style="color:#f0e68c"><strong><br/><br/></strong></span><span style="color:#ffffff"> You can slide right back in a new window (the new window moves out of the screen) </span><span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Webview window animation style
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>interface</strong></span> <span style="color:#98fb98">WebviewAnimationStyles</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">String</span><span style="color:#ffffff"> fromLeft</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">String</span><span style="color:#ffffff"> toLeft</span><span style="color:#ffffff">;</span> <span style="color:#ffffff">}</span> </code></span></span>
explain:
Used to specify the starting position, target position and other information of the animation window.
Properties:
- fromLeft: (String type) the starting left position of the drawing window
Support percentage and pixel values. The default value is the position of the current window.
- toLeft: (String type) draw the left position of the target of the window
Holding percentage, pixel value. Note: if the set position is the same as the starting position, there is no animation effect.
Webview window rebound style
Properties:
- position: (JSON} type) Webview window supports the direction of rebound effect
This parameter can be used to set which direction of Webview supports rebound effect. The following attributes are supported: Top: indicates that the rebound effect is supported at the top of the window; Left: indicates that the rebound effect is supported on the left side of the window; Right: indicates that the right side of the window supports the rebound effect; Bottom: indicates that the bottom of the window supports the rebound effect** At present, only the top attribute * * attribute value is supported: used to specify the range that can be dragged, and the percentage can be taken, such as "10%"; Pixel value, such as "100px"; Automatically calculate the value, such as "auto"; No rebound effect value, such as "none";
- changeoffset: (JSON # type) the position where the Webview window stops when it rebounds
After the window rebound effect is turned on, when the content displayed in the window rolls to the head (top or bottom), the overall content of the window will move with the drag. The "dragBounce" event will be triggered in the drag process, and it will automatically rebound to the docking position after being released. The following attributes are supported: Top: indicates the position to dock when the top of the window rebounds. Attribute value: used to specify the rebound position of the window. It can take a percentage, such as "5%"; Pixel value, such as "100px"; Automatically calculate the value, such as "auto", which defaults to half of the range value that can be dragged;
- slideoffset: (JSON} type) the position where the Webview window is docked when it slides sideways
After the window rebound effect is turned on, when the content displayed in the window rolls to the end (left or right), the overall content of the window will move with it during dragging, the side sliding position that will automatically stop after being released, and the "slideBounce" event will be triggered. The following attributes are supported: left: indicates the position of sideslip on the left side of the window; Right: indicates the position of the sideslip on the right side of the window. Attribute value: used to specify the distance of docking after sliding. It can be taken as a percentage (left/right relative to the width of the window, top/bottom relative to the height of the window), such as "30%"; Pixel value, such as "100px"; Automatically calculate the value, which can be dragged, such as "auto".
- Offset: (JSON} type) the position of the Webview window drag offset
After opening the window rebound effect, you can actively set the drag offset position through this attribute value, which is consistent with the logic after manually dragging to this offset position. The following attributes are supported: Top: indicates the offset position of the top of the window; Left: indicates the offset position of the left side of the window; Right: indicates the offset position of the right side of the window; Bottom: indicates the offset position of the bottom of the window. Attribute value: used to specify the position of the offset. It can take a percentage, such as "5%"; Pixel value, such as "100px"; Valid values range from 0 to the position defined by the position property.
- preventTouchEvent: (Boolean} type) whether the Webview window prevents the touch event from being passed to the DOM element
Set to true to block touch events, and set to false to not block touch events. The default value is true when the side sliding function (left sliding and right sliding) is enabled, otherwise it is false.
Platform support
- Android - 2.3 + (supported):
Due to the conflict of touch events, if Webview uses the sideslip function, Webview needs to be set to prevent the transmission of touch events. When the html page content needs to deal with horizontal scrolling and sideslip effect, it needs to be set not to prevent the transmission of touch event during initialization: Webview setBounce({position:{left:'100px'},solideoffset:{left:'auto'},preventTouchEvent:false});. When operating non horizontal scrolling elements, timely and dynamically set to prevent the transmission of touch events to trigger the sideslip effect: Webview setBounce({preventTouchEvent:true});.
- iOS - 5.1 + (not supported):
Touch events do not conflict and this feature is not supported.
- Android - 2.3 + (supported):
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">}</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 "> / / reset the rebound position of the window</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"> set up Webview Rebound effect of window</span><span style="color:#f0e68c"><strong><br/></strong></span><span style="color:#ffffff"> Display docked to 44 After rebound px Location of</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">Reset rebound position</span><span style="color:#f0e68c"><strong></button></strong></span> <span style="color:#f0e68c"><strong><br/><br/><br/></strong></span><span style="color:#ffffff"> *Only the rebound effect of the top is supported temporarily* </span><span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Webview window content animation parameters
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#f0e68c"><strong>interface</strong></span> <span style="color:#98fb98">WebviewAnimationOptions</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">String</span><span style="color:#ffffff"> type</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">Number</span><span style="color:#ffffff"> duration</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">Number</span><span style="color:#ffffff"> frames</span><span style="color:#ffffff">;</span><span style="color:#ffffff"> attribute </span><span style="color:#98fb98">Rect</span><span style="color:#ffffff"> region</span><span style="color:#ffffff">;</span> <span style="color:#ffffff">}</span> </code></span></span>
explain:
Specify the type, duration, and other information of the animation.
Properties:
- Type: (String type) animation type
Available values: "shrink" - shrink and clear window animation from top to bottom.
- Duration: (type Number) animation duration
The unit is milliseconds, and the default value is 200ms.
- Frames: (Number type) Number of animation frames
Must be an integer greater than 0. The default value is 12.
- Region: (json # type) animation region
The following attributes are supported: Top - the offset of the area from the top of the control. The attribute value can take the pixel value (such as "100px"), the percentage (such as "10%", and the height relative to the control). The default value is' 0px '; Bottom - the offset of the area from the bottom of the control. The attribute value can take the pixel value (such as "100px"), the percentage (such as "10%", the height relative to the control), and the default value is' 0px '; Left - the offset of the area from the left side of the control. The attribute value can take the pixel value (such as "100px"), the percentage (such as "10%", relative to the width of the control), and the default value is' 0px '; Right - the offset of the area from the right side of the control. The attribute value can take the pixel value (such as "100px") and the percentage (such as "10%", relative to the width of the control). The default value is' 0px '. Such as "{top:'44px',bottom:'48px'}".
Example:
<span style="background-color:#333333"><span style="color:#474747"><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><meta</strong></span> <span style="color:#bdb76b"><strong>name</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"viewport"</span> <span style="color:#bdb76b"><strong>content</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</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"> wv</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 event handling</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> wv </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">}</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 window animation</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> animateWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> wv</span><span style="color:#ffffff">.</span><span style="color:#ffffff">animate</span><span style="color:#ffffff">({</span><span style="color:#ffffff">type</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'shrink'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">frames</span><span style="color:#ffffff">:</span><span style="color:#cd5c5c">20</span><span style="color:#ffffff">,</span><span style="color:#ffffff">region</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">bottom</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'48px'</span><span style="color:#ffffff">},</span><span style="color:#ffffff">duration</span><span style="color:#ffffff">:</span><span style="color:#cd5c5c">1000</span><span style="color:#ffffff">},</span><span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> wv</span><span style="color:#ffffff">.</span><span style="color:#ffffff">restore</span><span style="color:#ffffff">();</span> <span style="color:#87ceeb "> / / after the content animation is finished, you can call this animation to restore the displayed content</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 Window content animation</span><span style="color:#f0e68c"><strong><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">animateWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Content animation</span><span style="color:#f0e68c"><strong></button><br/></strong></span> <span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
How native controls dock in the window
Constant:
- "Top": (String type) controls are docked at the top of the page
- "Bottom": (String type) controls are docked at the bottom of the page
- "Right": (String type) controls are docked on the right side of the page
- "Left": (String type) controls are docked on the left side of the page
Webview window sliding event data
Properties:
- direction: (String type) gesture type
Available values: "rtl" - sliding gesture from right to left; "Left" - sliding gesture to the left, consistent with rtl; "ltr" - slide gesture from left to right; "Right" - slide gesture to the right, consistent with ltr.
- Type: (String type) window sliding type
Available values: "start" - indicates the start of sliding operation; "move" - indicates sliding; "End" - indicates the end of the sliding operation.
- Result: (String type) window sliding result
Available values: "true" - indicates that the sliding operation is successful; "false" - indicates that the sliding operation fails (restore to the state before sliding); "undefined" - stateless value (this value is returned when the type value is "end").
- id: (String type) current operation window id
When the type value is "start"/"move", save the identification of the current operation window (or View control); When the type value is "end", the identification of the display window (or View control) after saving the sliding operation (that is, if the result value is "true", it is considered that the associated window is displayed, and if the result value is false, it is considered that the main window is displayed).
- otherId: (String type) associated window ID
The identification of the window (or View control) associated with the slide operation.
- targetId: (String type) main window ID
The identification of the main window (or View control) of the sliding operation.
- Progress: (type Number) sliding progress
Sliding progress position information, the value range is 0-100. For example, 20 represents 20% of the total sliding distance: when the type value is "start", the progress value is 0; When the type value is "end", if the result is true, the progress value is 0; if the result is false, the progress value is 100; When the type value is "move", the progress information of the current sliding is saved (Note: the move event is triggered multiple times).
Window gesture operation parameters
Properties:
- callbackStep: (type Number): trigger step of sliding screen operation callback event
It is used to set the trigger frequency of sliding screen callback event. The value range is 1-100. The smaller the value, the higher the trigger frequency. The larger the value, the smaller the trigger frequency. The default value is 20. If the setting value is 20, it means that the moving distance of sliding screen operation exceeds 20% of the movable range, and a callback event will be triggered, which can be obtained through the progress attribute of the callback function parameter (WebviewDragEvent). Note: if the trigger frequency is too high, it will affect the efficiency. Developers should set this value carefully.
- direction: (String type) the type of gesture set
Available values: available values: "rtl" - sliding gesture from right to left; "Left" - sliding gesture to the left, consistent with rtl; "ltr" - slide gesture from left to right; "Right" - slide gesture to the right, consistent with ltr.
- moveMode: (String type) sliding gesture mode
Available values: "followFinger" - the current Webview window slides with the finger; "silent" - the current Webview window does not slide with the finger; "bounce" - the current Webview window automatically rebounds (the window returns to the position before dragging after letting go). Usually, this mode can be set to achieve the effect of automatic rebound when the Tab item cannot continue sliding.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">// Pre create new window (displayed outside the visual area) < / 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"> 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">// Slide left to display a new window < / 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">// Slide right to hide new window < / 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"> Slide left to open a new page </span><span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Gesture operation associated object parameters
Properties:
- view: (String | Webview | plus.nativeObj.View (type) gesture Association object
It can take the id (String type) of Webview window, Webview window object and native view window object (plus.nativeObj.View).
- moveMode: (String type) sliding mode
Available values: "follow" - synchronously follow the main Webview window to slide; "Slide window" - do not follow the main window.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">// Pre create new window (displayed outside the visual area) < / 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"> 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">// Slide left to display a new window < / 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">// Slide right to hide new window < / 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"> Slide left to open a new page </span><span style="color:#f0e68c"><strong></body></strong></span> <span style="color:#f0e68c"><strong></html></strong></span> </code></span></span>
Precautions for using plus in uni app
Screenshot drawing operation parameters
Properties:
- Bit: (String type) the bit depth of the screenshot
Available values: "RGB565" - RGB565 color mode, one pixel accounts for two bytes; "ARGB" - ARGB color mode to save transparency information.
Platform support
- Android - ALL (supported):
"RGB565" mode is used by default. Note: the "ARGB" mode is in Android 4 Before 4, a pixel occupies two bytes, which is in Android 4 After 4, a pixel occupies 4 bytes. Due to the large memory consumption, developers should use it with caution.
- iOS - ALL (not supported):
Ignore this attribute and use the "ARGB" mode (4 bytes per pixel).
- Android - ALL (supported):
- Check: (Boolean} type) check whether the screenshot is blank
Available values: true - indicates that the operation fails when a screen capture is detected and a blank picture is found (trigger the error callback function); False - indicates no detection. Even if the picture is blank, it still returns success. The default value is false.
- clip: (plus.nativeObj.Rect Type) set screen capture area
Relative to the area information of the Webview window, the default value is {top:'0px',left:'0px',width:'100%',height:'100%'}.
- checkKeyboard: (Boolean # type) whether to check whether the current soft keyboard pops up
Available values: true - indicates that the screen capture operation fails when the pop-up soft keyboard is detected (trigger the error callback function); False - indicates that the state of the soft keyboard is not detected, and the screen is taken directly. The default value is false.
Platform support
- Android - ALL (supported):
When the soft keyboard pops up, the Webview window size will be adjusted (to ensure that the editing area is visible). At this time, the picture obtained from the screenshot is the adjusted window size.
- iOS - ALL (not supported):
Ignoring this attribute, the Webview window size will not be adjusted when the soft keyboard pops up, and the screen is still full.
- Android - ALL (supported):
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">}</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 "> / / screenshot drawing</span> <span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> bitmap</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> captureWebview</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> bitmap </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>new</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">nativeObj</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Bitmap</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'test'</span><span style="color:#ffffff">);</span> <span style="color:#87ceeb">// Draw webview content into Bitmap object < / span > < span style = "color: #ffffff" > ws</span><span style="color:#ffffff">.</span><span style="color:#ffffff">draw</span><span style="color:#ffffff">(</span><span style="color:#ffffff">bitmap</span><span style="color:#ffffff">,</span><span style="color:#f0e68c"><strong>function</strong></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">'Screenshot drawing succeeded'</span><span style="color:#ffffff">);</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">'Screenshot drawing failed:'</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">check</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">,</span> <span style="color:#87ceeb">// Set to detect white screen < / span > < span style = "color: #ffffff" > clip</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'50%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">left</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">height</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'50%'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">width</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100%'</span><span style="color:#ffffff">}</span> <span style="color:#87ceeb "> / / set the screen capture area</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"> Screenshot drawing Webview window</span><span style="color:#f0e68c"><strong><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">captureWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Draw</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>
Precautions for using plus in uni app
Window favorite parameters
explain:
The parameters used when calling collection function in a streaming application environment.
Properties:
- Icon: (String type) the icon displayed when collecting
The icon displayed in the favorite list uses the application icon by default.
- Title: (String type) the title displayed when collecting
The title string displayed in the favorites list.
- href: (String type) favorite page address
Must be a network address.
Create and load HTML data parameters
Properties:
- baseURL: (String type) the Base URL of the page
- mimeType: (String type) the data type of HTML data
The default value is "text/html".
- Encoding: (String type) encoding type of HTML data
The default value is "utf-8".
Window sharing parameters
explain:
The parameters used when calling shared functions in a streaming application environment.
Properties:
- Icon: (String type) the icon used when sharing
The application icon is used by default.
- Title: (String type) the title used when sharing
- href: (String type) the link address used when sharing
Must be a network address.
Window primitive child View control style
explain:
You can set the identification, size, position and drawn content of the native control.
Properties:
- id: (String type) the id of the original child View control
Available via plus nativeObj. View. The getviewbyid (ID) method passes in this ID to get the child view control object.
- Type: (String type) the type of the original child View control
Available values: "NView" - original child View control (plus.nativeObj.NView); "ImageSlider" - native picture rotation control (plus.nativeObj.ImageSlider). The default value is NView.
- styles: (plus.nativeObj.ViewStyles | plus.nativeObj.ImageSliderStyles Type) the style of the original child View control
You can set the location, size and other information of the native control.
- tags: (Array[plus.nativeObj.ViewDrawTagStyles ]Type) the initial drawing content of the original child View control
You can set drawing pictures, rectangular areas, text and other contents.
Example:
<span style="background-color:#333333"><span style="color:#474747"><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><meta</strong></span> <span style="color:#bdb76b"><strong>name</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"viewport"</span> <span style="color:#bdb76b"><strong>content</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"</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:#87ceeb "> / / H5 plus event handling</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">key</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'backbutton'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">&&</span><span style="color:#ffffff">nw</span><span style="color:#ffffff">.</span><span style="color:#ffffff">isVisible</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:#ffa0a0">'pop-out'</span><span style="color:#ffffff">):</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">runtime</span><span style="color:#ffffff">.</span><span style="color:#ffffff">quit</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:#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>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 "> / / create a Webview window with an original child View control</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> createWebview</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> nw</span><span style="color:#ffffff">=</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">'test'</span><span style="color:#ffffff">,</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">subNViews</span><span style="color:#ffffff">:[{</span><span style="color:#ffffff"> id</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'subnview1'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">top</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'0px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">height</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'100px'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">backgroundColor</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'#FF0000'</span><span style="color:#ffffff">},</span><span style="color:#ffffff"> tags</span><span style="color:#ffffff">:[{</span><span style="color:#ffffff">tag</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'font'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">id</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'font'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">text</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'Protozoa View control'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">textStyles</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">size</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'18px'</span><span style="color:#ffffff">}}]</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">'close'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</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:#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:#ffa0a0">'pop-in'</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 Child of window View control</span><span style="color:#f0e68c"><strong><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">createWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">Create</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>
Precautions for using plus in uni app
Window title bar control style
explain:
The fixed height of the title bar control is 44px, and the title bar native control object can be obtained through the getTitleNView method of the Webview window object plus.nativeObj.View , call its method to draw custom content. You can update the style by passing in the titlenview property through the setstyle method of the WebviewObject object, such as wobj setStyle({titleNView:{titleColor:'#FF0000'}}).
Properties:
- autoBackButton: (Boolean} type) whether the title bar control displays the left return button
Available values: "true" - display the return button; "False" - the return button is not displayed. The default value is "false". The color of the return button is the text color of the window title. When pressed, the color will automatically adjust the transparency to 0.3. The logic of clicking the return button is consistent with that of pressing the system return key.
- backButton: (WebviewTitleNViewBackButtonStyles Type) the style of the return button of the title bar control
Takes effect when autoBackButton is set to true. This attribute allows you to customize the style of the return button, such as icon size, red dot, corner marker, title, etc.
Note: hbuilderx2 6.3 + version support. - backgroundColor: (String type) the background color of the title bar control
The format of color value is "#RRGGBB", for example "#FF0000" indicates a red background; "rgba(R,G,B,A)", for example, rgba(255,0,0,0.5) represents a translucent red background. The default is "#F7F7F7".
- backgroundImage: (String type) sets the background image of the title bar
The following types are supported: background image path - such as ". / img/t.png", only local file path is supported, relative path, relative to the host position of the current page, drawn according to the actual width and height of the title bar; Gradient - only linear gradients are supported. For example, "linear gradient (to top, #a80077, #66ff00)", the first parameter is gradient direction, which can be taken as a value: "to right" means gradient from left to right, "To left" means gradient from right to left, "to bottom" means gradient from top to bottom, "to top right" means gradient from top left corner to bottom right corner, "to top left" means gradient from bottom right corner to top left corner. There is no gradient effect by default, and there is no gradient effect for incorrectly formatted data.
Note: hbuilderx2 6.3 + version support. - backgroundRepeat: (String type) sets the background tile method of the title bar
Valid only when backgroundImage is set to image path. Available values:
- "repeat" - the background picture is tiled vertically and horizontally
- "repeat-x" - the background picture is tiled horizontally and stretched vertically
- "repeat-y" - the background picture is tiled vertically and stretched horizontally
- "No repeat" - the background picture is stretched in both vertical and horizontal directions
Note: hbuilderx2 6.3 + version support. - blurEffect: (String type) blur (ground glass) effect
This effect will Gaussian blur the content behind the title bar, which is only effective when the type is "transparent" or "float". Available values:
- "dark" - dark style blur, corresponding to iOS native UIBlurEffectStyleDark effect
- "extralight" - highlight style blur, corresponding to iOS native UIBlurEffectStyleExtraLight effect
- "Light" - light style is fuzzy, corresponding to iOS native UIBlurEffectStyleLight effect
- "none" - no blur effect
Note: avoid setting the background color when using the blur effect. Setting the background color may overwrite the blur effect.Platform support
- Android - ALL (not supported):
Ignore this property.
- iOS - 8.0 + (supported)
- buttons: (Array[WebviewTitleNViewButtonStyles ]Type) custom button on title bar
There is no limit to the number of custom buttons created. In practical application, it is recommended to set up up up to 4 buttons (including the return button on the left). Note: this property does not support dynamic modification and is only valid when titleNView is created.
- coverage: (String type) change scope of title bar control
Only valid when the type value is transparent. The transparency of the title bar background will change when the page scrolls. When the page scrolls to the specified offset, the title bar background becomes completely opaque. Support percentage and pixel values. The default is' 132px '.
- homeButton: (Boolean} type) whether the title bar control displays the Home button
Available values: "true" - display the Home button; "False" - the Home button is not displayed. The default value is "false". The color of the Home button is the text color of the window title. When pressed, the color is automatically adjusted to 0.3 transparency. The logic of clicking the Home button is to close all non Home windows and display the Home window.
- padding: (String type) inner margin
The inner margin on the left and right of the title bar, in PX (logical pixel value). For example, "10px" represents 10 logical pixel value. The default value is "0px".
- Padding right: (String type) right inner margin
The inner margin on the right side of the title bar, in PX (logical pixel value). For example, "10px" represents 10 logical pixel value. The default value is "0px" and the priority is padding right > padding.
- Padding left: (String type) left inner margin
The left inner margin of the title bar, in PX (logical pixel value). For example, "10px" represents 10 logical pixel value. The default value is "0px", and the priority is padding left > padding.
- progress: (WebviewProgressStyles Type) the progress bar style of the title bar control
Set this property to display the progress bar at the bottom of the title bar control. You can configure the color value of the progress bar, that is, the height. Set this property value to undefined or null to hide the progress bar. The bottom progress bar is not displayed by default. Note: this property will be discarded. The progress of WebviewStyles is recommended.
- redDotColor: (String type) the red dot color of the button on the title bar control
Available values: "#RRGGBB" format string, such as "#FF0000" indicates drawing red return key; "rgba(R,G,B,A)", where R/G/B respectively represents red value / green value / blue value, positive integer type, value range is 0-255, A is transparency, floating-point type, value range is 0-1 (0 is fully transparent and 1 is opaque), such as "rgba(255,0,0,0.5)", indicating red translucency. The default is red.
- searchInput: (WebviewTitleNViewSearchInputStyles Type) search box style on the title bar
- splitLine: (WebviewSplitLineStyles Type) the bottom divider of the title block
Set this property to display the dividing line at the bottom of the title bar control, and the color value and height can be configured. Set this property value to undefined or null to hide the split line. The bottom split line is not displayed by default.
Note: hbuilderx2 6.6 + version support. - subtitleColor: (String type) subtitle text color
The color value format is "#RRGGBB" and "rgba(R,G,B,A)". For example, "#FF0000" indicates that the title text color is red. The default value is consistent with the main title text color.
Note: hbuilderx2 6.6 + version support. - subtitleSize: (String type) subtitle text font size
The unit of font size is pixels. For example, "14px" means that the font size is 14 pixels, and the default value is 12 pixels.
Note: hbuilderx2 6.6 + version support. - subtitleOverflow: (String type) the processing method when the title text exceeds the display area
Available values:
- "clip" - content cropping when out of display area
- "Ellipsis" - an ellipsis mark (...) is displayed at the end when the display area is exceeded
Note: hbuilderx2 6.6 + version support. - subtitleText: (String type) subtitle text content
After setting the subtitle, two lines of titles will be displayed, and the subtitle will be displayed below the main title (titleText).
Note: hbuilderx2 6.6 + version support. - tags: (Array[plus.nativeObj.ViewDrawTagStyles ]Type) initial custom drawing content on the title bar
It can be used to set custom drawing pictures, rectangular areas, text and other contents. Note: this property does not support dynamic modification. It is only valid when creating titleNView. If you need to update the drawing content, you can call the draw method according to the id of tags.
- titleAlign: (String type) Title Alignment
Available values:
- "Center" - center alignment
- "Left" - align left
- "auto" - automatically select according to the platform (align Android platform to the left and iOS platform to the center)
- titleColor: (String type) title text color
The color value format is "#RRGGBB" and "rgba(R,G,B,A)". For example, "#FF0000" indicates that the title text color is red. The default value is "#FFFFFF" when type=transparent, and "#000000" in other cases.
- titleIcon: (String type) Title Icon
Icon path, such as ". / img/t.png", relative path. Relative to the host position of the current page, the default width and height is the logical pixel value "34px".
HBuilderX2.6.9 + version supports network path (url link at the beginning of http/https);
HBuilderX2. Version 6.12 + supports base64 images.
Note: the width and height of the picture are required to be the same. - titleIconRadius: (String type) Title icon fillet
The value format is "XXpx", where XX is the pixel value (logical pixel). For example, "10px" means 10 pixel Radius Fillet. The default is no fillet.
- titleIconWidth: (String type) Title icon width
The value format is "XXpx", where XX is the pixel value (logical pixel). For example, "10px" means that the icon width is 10 pixels, and the icon height will automatically be consistent with the icon width. The default value is "34px".
HBuilderX2. The 7.6 + version supports setting the icon width.
Note: the icon is centered vertically in the title bar. - titleOverflow: (String type) the processing method when the title text exceeds the display area
Available values: "clip" - content clipping when it exceeds the display area; "Ellipsis" - an ellipsis mark (...) is displayed at the end when the display area is exceeded. The default value is "ellipsis".
- titleSize: (String type) the font size of the title text
The unit of font size is pixels. For example, "20px" means that the font size is 20 pixels, and the default value is 17 pixels.
- titleText: (String type) title text content
Display in the center of the title bar control (horizontal and vertical), the left and right margins are 88px, and if the text is too long, the tail will be cropped (plus three points "...") Display. When the titleText property is not set or the property value is undefined/null, the current Webview window is used to load the page title and automatically update the page title synchronously.
- Type: (String type) title bar control style
Available values:
- "Default" - default style, top docked display, squeezing the content display area of Webview page
- "Transparent" - transparent style. The top immersive display covers the content of the Webview page. The content on the title bar (except buttons) is transparent. When the page scrolls, the transparency changes gradually until it is opaque
- "float" - floating style, floating display at the top, and the title bar is covered on the Webview. At this time, the background color of the title bar should be set to translucent to see through the content covering the Webview
Note: this property is not supported for dynamic updates.
Example:
<span style="background-color:#333333"><span style="color:#474747"><code> <span style="color:#87ceeb "> / / Webview window with title bar control</span> <span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> webview </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> titleNViewWebview</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> webview </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">'test'</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> titleNView</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> backgroundColor</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'#D74B28'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> titleText</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'Title Block text'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> titleColor</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">'#CCCCCC'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> autoBackButton</span><span style="color:#ffffff">:</span> <span style="color:#f0e68c"><strong>true</strong></span> <span style="color:#ffffff">}</span> <span style="color:#ffffff">});</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'close'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span> <span style="color:#ffffff">});</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'titleUpdate'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</span><span style="color:#ffffff">();</span> <span style="color:#ffffff">});</span> <span style="color:#ffffff">}</span> </code></span></span>
Precautions for using plus in uni app
Window title bar custom return button style
explain:
The return button consists of a return icon (Font Icon) and a title. By default, only the return icon is displayed.
Note: hbuilderx2 6.3 + version support.
Properties:
- Background: (String type) the background color of the button
Effective only when the title bar type=transparent. The background color of the button when the title bar is transparent. It can take #RRGGBB and rgba format color strings. The default value is gray and translucent.
- badgeBackground: (String type) the background color of the corner marker displayed on the button
Available values: "#RRGGBB" format string, such as "#FF0000" indicates red; The default is red.
- badgeColor: (String type) the color of the corner mark text displayed on the button
Available values: "#RRGGBB" format string, such as "#FF0000" indicates red; The default is white.
- badgeSize: (String type) the font size of the corner mark displayed on the button
Available values: font height, pixel value, number plus "PX" format string, such as "22px". The default value is "16px".
- badgeText: (String type) the corner mark text displayed on the button
Up to 3 characters are displayed. If it exceeds, it will be displayed as. Note: the corner mark is displayed after the return icon and overlies the title of the return button.
- Color: (String type) returns the icon and title color on the button
Available values: "#RRGGBB" format string, such as "#FF0000" indicates red; "rgba(R,G,B,A)", where R/G/B respectively represents red value / green value / blue value, positive integer type, value range is 0-255, A is transparency, floating-point type, value range is 0-1 (0 is fully transparent and 1 is opaque), such as "rgba(255,0,0,0.5)", indicating red translucency. The default value is the title text color of the window title bar control.
- colorPressed: (String type) press the text color of the status button
Available values: "#RRGGBB" format string, such as "#FF0000" indicates red; "rgba(R,G,B,A)", where R/G/B respectively represents red value / green value / blue value, positive integer type, value range is 0-255, A is transparency, floating-point type, value range is 0-1 (0 is fully transparent and 1 is opaque), such as "rgba(255,0,0,0.5)", indicating red translucency. The default value is the color attribute value, and the transparency is automatically adjusted to 0.3.
- fontWeight: (String type) the thickness of the return icon on the button
Available values: "normal" - standard font; "Bold" - bold font. The default value is "normal". Note: the font icon of iOS platform does not support bold.
- fontSize: (String type) returns the icon text size on the button
Available values: font height, pixel value, number plus "PX" format string, such as "22px". When the window title bar is transparent (type="transparent"), the default value is "22px"; When the window title bar is the default style (type="default"), the default value is "27px".
- redDot: (Boolean} type) whether the red dot is displayed on the button
Set to true to display red dots, and false to not display red dots. The default value is false. Note: when corner mark text is set, the red dot is not displayed.
- Title: (String type) returns the title on the button
After the icon (Font Icon) is returned, it defaults to an empty string.
- titleWeight: (String type) returns the thickness of the title on the button
Available values: "normal" - standard font; "Bold" - bold font. The default value is "normal".
- titleSize: (String type) returns the font size of the title on the button
Available values: font height, pixel value, number plus "PX" format string, such as "22px". The default value is "16px".
Window title bar custom button style
Properties:
- Type: (String type) button style
The built-in button style in the running environment is used directly, and the built-in style ignores the fontSrc and text attributes. Available values: "forward" - forward button; "Back" - back button; "share" - share button; "Favorite" - favorite button; "home" - home button; "Menu" - menu button; "Close" - close button; "none" - no style. The default value is no style ("none"), you need to set the content displayed on the button through the text attribute and the font library used through the fontSrc attribute.
- Background: (String type) the background color of the button
Effective only when the title bar type=transparent. The background color of the button when the title bar is transparent. It can take #RRGGBB and rgba format color strings. The default value is gray and translucent.
- badgeText: (String type) the corner mark text displayed on the button
Up to 3 characters are displayed. If it exceeds, it will be displayed as.
- Color: (String type) the text color on the button
Available values: "#RRGGBB" format string, such as "#FF0000" indicates red; "rgba(R,G,B,A)", where R/G/B respectively represents red value / green value / blue value, positive integer type, value range is 0-255, A is transparency, floating-point type, value range is 0-1 (0 is fully transparent and 1 is opaque), such as "rgba(255,0,0,0.5)", indicating red translucency. The default value is the title text color of the window title bar control.
- colorPressed: (String type) press the text color of the status button
Available values: "#RRGGBB" format string, such as "#FF0000" indicates red; "rgba(R,G,B,A)", where R/G/B respectively represents red value / green value / blue value, positive integer type, value range is 0-255, A is transparency, floating-point type, value range is 0-1 (0 is fully transparent and 1 is opaque), such as "rgba(255,0,0,0.5)", indicating red translucency. The default value is the color attribute value, and the transparency is automatically adjusted to 0.3.
- float: (String type) the display position of the button on the title bar
Available values: "right" - arranged and displayed right in the title bar; "Left" - arranged and displayed on the left side of the title bar (after the return key). The default value is right. Note: the float value does not support dynamic modification and can only be set when the window is created.
- fontWeight: (String type) the thickness of the text on the button
Available values: "normal" - standard font; "Bold" - bold font. The default value is "normal". Note: the font icon of iOS platform does not support bold.
- fontSize: (String type) the size of the text on the button
Available values: font height, pixel value, number plus "PX" format string, such as "22px". When the window title bar is transparent (type="transparent"), the default value is "22px"; When the window title bar is the default style (type="default"), the default value is "27px".
- fontSrc: (String type) the font file path used by the text on the button
The font file path supports the following types: relative path - the host location relative to the current page, such as "a.ttf". Note that if the current page is a network address, it is not supported; Absolute path - the absolute path of the system, such as the Android platform "/ sdcard/a.ttf", which is usually obtained through other 5 + APIs; Extended relative path URL - with "" Relative path at the beginning, such as "_www/a.ttf"; Local path URL - starts with "file: / /", followed by the system absolute path.
- onclick: (WebviewCustomButtonCallback type) the callback function triggered after the button is clicked
This JSON object will be returned in the callback function.
- redDot: (Boolean} type) whether the red dot is displayed on the button
Set to true to display red dots, and false to not display red dots. The default value is false. Note: when corner mark text is set, the red dot is not displayed.
- select: (Boolean} type) whether to display the selection indicator
If it is set to true, the selection indicator icon (down arrow) will be displayed, and the color is consistent with the text color; False is not displayed. The default value is false.
- Text: (String type) the text displayed on the button
It is recommended to use one character. More than one character may not be displayed normally. When using font icons, unicode characters must start with '\ u', such as "\ ue123" (note that it cannot be written as "\ e123").
- Width: (String type) the width of the button
Available values: "* PX" - logical pixel value. For example, "10px" indicates 10 logical pixel value, and the content of the button is displayed in the center; "auto" - customize the calculated width and automatically adjust the button width according to the content. The default value is "44px" (suitable for font icons).
Example:
<span style="background-color:#333333"><span style="color:#474747"><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 event handling</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">}</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 "> / / click the custom button to call back the function</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> clickButton</span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">nativeUI</span><span style="color:#ffffff">.</span><span style="color:#ffffff">alert</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'clicked!'</span><span style="color:#ffffff">);</span> <span style="color:#ffffff">}</span> <span style="color:#87ceeb "> / / the title bar control displays custom buttons</span> <span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> webview </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> titleNViewWebview</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff"> webview </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">'test'</span><span style="color:#ffffff">,</span> <span style="color:#ffffff">{</span><span style="color:#ffa0a0">'titleNView'</span><span style="color:#ffffff">:{</span><span style="color:#ffffff">style</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'transparent'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">backgroundColor</span><span style="color:#ffa0a0">':'</span><span style="color:#ffffff">#</span><span style="color:#ffffff">D74B28</span><span style="color:#ffa0a0">','</span><span style="color:#ffffff">titleText</span><span style="color:#ffa0a0">':'</span><span style="color:#ffffff">Title Block text</span><span style="color:#ffa0a0">','</span><span style="color:#ffffff">titleColor</span><span style="color:#ffa0a0">':'</span><span style="color:#ffffff">#</span><span style="color:#ffffff">CCCCCC</span><span style="color:#ffa0a0">',</span><span style="color:#ffffff">autoBackButton</span><span style="color:#ffffff">:</span><span style="color:#f0e68c"><strong>true</strong></span><span style="color:#ffffff">,</span><span style="color:#ffffff"> buttons</span><span style="color:#ffffff">:[{</span><span style="color:#ffffff">text</span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'...'</span><span style="color:#ffffff">,</span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff">:</span><span style="color:#ffa0a0">'right'</span><span style="color:#ffffff">,</span><span style="color:#ffffff">onclick</span><span style="color:#ffffff">:</span><span style="color:#ffffff">clickButton</span><span style="color:#ffffff">}]</span> <span style="color:#ffffff">}});</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'close'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">=</span><span style="color:#f0e68c"><strong>null</strong></span><span style="color:#ffffff">;</span> <span style="color:#ffffff">});</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'titleUpdate'</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff">(){</span><span style="color:#ffffff"> webview</span><span style="color:#ffffff">.</span><span style="color:#ffffff">show</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:#ffffff"> Webview The window title bar displays custom buttons</span><span style="color:#f0e68c"><strong><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">titleNViewWebview</span><span style="color:#ffffff">()</span><span style="color:#ffa0a0">"</span><span style="color:#f0e68c"><strong>></strong></span><span style="color:#ffffff">open</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>