一、plus.webview.create使用方法
使用plus.webview.create方法创建一个新的webview窗口对象，该方法参数包含四个必填项：url、id、styles、extras。
其中，url为打开窗口的地址；id为窗口对象的标识，可以使用该标识找到对应的窗口对象；styles为窗口样式相关的设置，包含titleNView、navigationBar、softinputMode等；extras为自定义扩展参数，可以在窗口打开时传递给子页面。
下面是一个创建webview窗口的示例代码：
plus.webview.create('http://www.baidu.com', 'webview1', {
top: '0px',
bottom: '0px',
bounce: 'vertical'
}, {
param1: 'value1',
param2: 'value2'
});
上述代码创建了一个webview窗口，窗口地址为http://www.baidu.com，标识为webview1，样式设置为上下不留空白区域（top和bottom设置为0），并允许竖直方向的回弹效果（bounce设置为vertical），同时传递了两个扩展参数。
二、页面间通信
做一个完整的H5混合应用，页面间的信息交互显得十分关键，plus.webview.create方法中的extras参数正好能够满足这一需求。
比如说现在我们在index.html页面中创建了一个名为webview1的新窗口，同时向该窗口传递了一些参数，代码如下：
plus.webview.create('webview1.html', 'webview1', {}, {
param1: 'value1',
param2: 'value2'
});
在webview1.html页面中，我们可以通过plus.webview.currentWebview().getExtras()方法获取到传递的参数，代码如下：
var extras = plus.webview.currentWebview().getExtras(); console.log(extras.param1); // 打印value1 console.log(extras.param2); // 打印value2
除了通过extras参数传递参数，我们还可以通过plus.webview.getWebviewById()方法获取到其他页面的窗口对象来进行数据交互。比如说我们现在需要在webview1.html页面中获取到main.html页面的窗口对象，代码如下：
var mainPage = plus.webview.getWebviewById('main');
然后我们就可以通过mainPage向main.html页面发送信息了，代码如下：
mainPage.evalJS('document.getElementById("title").innerHTML = "Hello World!"');
上述代码向名为main的窗口对象发送了一段JavaScript代码，该代码将main.html页面中id为’title’的标签的内容修改为’Hello World!’。
三、通过 CSS3 动画优化页面展示效果
在移动端，页面展示效果的优化显得尤为重要，CSS3的动画效果正好可以用来优化页面展示。
比如说我们现在有一个需求：点击页面上的一个按钮，将整个页面从下往上滚动一段距离，并显示一个列表。我们可以使用CSS3的transform属性和transition属性来实现该效果，代码如下：
/* CSS样式 */
#list {
transform: translateY(100%);
transition: transform 0.5s;
}
.show {
transform: translateY(0);
}
// JS代码
var list = document.getElementById('list');
list.classList.add('show');
上述代码中，我们使用了CSS3的transform属性将列表向下移动了100%，并添加了0.5秒的过渡动画效果。然后通过JS代码将show类名添加到列表的标签中，从而触发CSS3的动画效果并展示列表。
四、使用Vue.js优化页面展示代码
Vue.js是一种轻量级的JavaScript框架，专注于MVVM模式的实现。通过使用Vue.js，我们可以将页面展示代码进行有效的组织管理，使得代码更加易于阅读和维护。
下面是一个使用Vue.js实现的页面展示代码示例：
{{ title }}
- {{ item.text }}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/247373.html
微信扫一扫 
支付宝扫一扫 