muiapp开发06：页面跳转

技术理论分析

点击按钮跳转新页面的实现源码如下：

            // 获取按钮控件
            var btnLogin = document.getElementById('id_login');
			// 为按钮添加轻击事件
			btnLogin.addEventListener('tap', function(){
				var mainView = plus.webview.currentWebview();
				var url = 'MainPage.html';
				// 定义子页面显示位置样式
				var subPageStyle = {
					top:'0px',
					bottom:'0px'
				};
				var subView = plus.webview.create(url,url, subPageStyle);
				subView.show();
			});

代码的核心是：

1. 获取当前webview
2. 设置子页面显示样式
3. 使用 plus.webview.create() 方法创建子页面
4. 显示子页面

小白预警：上述代码是写在 mui.plusReady(function(){....}); 中；下面是官方的原话

在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。

窗口管理 · MUI (dcloud.net.cn)https://dev.dcloud.net.cn/mui/window/https://dev.dcloud.net.cn/mui/window/

根据底部栏切换子页面的示例，可以参见：

mui-app开发04：2小时开发自己的微信app_m1m2m3mmm的博客-CSDN博客