uni-app中静态页面跳转到app内部页

2019-05-06 / 前端

uni-app中静态页面跳转到app内部页

最近在做的项目是第一次用uni-app来做app，所以中间遇到大大小小的坑。

其中一个就是客户想在首屏实现炫酷的宇宙效果，本来想把网上找好的特效用vue重新封装，奈何水平不好，只能退而求其次，在vue文件中用web-view调用静态页面，然后在静态页面中进行跳转操作。

主要html代码：

<div class="btn-list indexbtn">
<button class="mui-btn mui-btn-primary mui-btn-block login" type="button" data-action="navigateTo">登&nbsp;&nbsp;录</button>
<button class="mui-btn mui-btn-white mui-btn-block reg" type="button" data-action="redirectTo">注&nbsp;&nbsp;册</button>
</div>

主要js代码：

<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
   
    <script type="text/javascript">
      document.addEventListener('UniAppJSBridgeReady', function() {
        document.querySelector('.btn-list').addEventListener('click', function(evt) {
          var target = evt.target;
          if (target.tagName === 'BUTTON') {
            console.log(target)
            var action = target.getAttribute('data-action');
            switch (action) {
                case 'navigateTo':
		uni.navigateTo({
		  url: '/pages/login/login/login'
		});
		 break;
		case 'redirectTo':
		uni.navigateTo({
		url: '/pages/login/reg/reg'
		 });
		break;
            }
          }
        });
      });
    </script>

最终效果展示：

源码包：

链接：百度云盘??提取码: xvsk

原创