uniapp通过webview调用第三方页面 App 小程序

##更新于2019-07-12 

最近在把App代码转换到小程序上,之前写的webview的东西放到小程序上无法使用,而且支付宝小程序居然是如此的坑。

所以我们换一种方法使用,这个方法放到App上一样兼容,可以放心使用。如果有需要App页面的,可以参考我之前的写法。

首先新建一个webview.vue界面(src对应的地址html,需要你自己定义,可以通过传参)

login.vue组件跳转到webview
uni.navigatTo({
    url:"/pages/webview?path=https://www.baidu.com"//https://www.baidu.com,这个是自定义的第三方页面,你可千万别当真,下面会具体说明这个页面的写法
})
<template>
	<view class="content">
		<web-view  :src="path">//这个是自定义页面(htmlA)
		</web-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path:''
			}
		},
        onLoad:function(e){
            this.path=e.path;
        },
		methods: {
			
		},
	}

</script>

然后新建你的地址页面,就是第三方页面。最好严格按照我写的来(www.baidu.com//这个页面是假的路径)

##2019/11/1更新, PS:虽然上面说了按照我的代码来,还是有部分网友不是的,把微信sdk放到uni SDK下面。然后始终无法调通,害得我也怀疑自己代码的问题,直接把下面的代码从上到下拷出来改一下就可以了。不然的确很难受。

<!DOCTYPE html>
<html>
<head>
	<title>跳转</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>正在跳转中,请稍后</div>
<!-- 微信 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 支付宝的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript">
    if (navigator.userAgent.indexOf('AlipayClient') > -1) {
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    }
</script>
<!-- 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() {
		let str = window.location.search;
		uni.postMessage({
		    data: {
		        str: str
		    }
		});
   		uni.reLaunch({
   			url: '/pages/index/index?str=' + str,//这个路径就是你自己项目需要回调的页面,str是你的传参   			animationType: 'none',
          	animationDuration: 0
   		});//网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。所以这段代码是必须的
	});
	

</script>
</body>
</html>

这个就是这样了,撒哟娜拉,自从写了小程序,可以光明正大的玩手机了,哈哈哈

 

###这是我之前#写法---

最近在用uniapp在写一个App。不得不说可以作为一个三端开发的框架,还是不错的。不过有些东西还是需要继续改进。

业务需求是,调用第三方登录页面(htmlA),登录成功后,将唯一标识符传给一个页面(htmlB),然后(htmlB-这个页面可以自定义)将一个唯一标识符,回调传给app.

琢磨了半天,发现uniapp有个webview组件,(htmlB)只要根据固定的写法将唯一标识发送回来即可

(htmlB)根据文档引入<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>,然后

<html>
 <head>
  <title>测试页面</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!-- uni 的 SDK -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
 </head>
 <body>
  <button style="height: 50px; width: 100px;" onclick="login()">login</button>
 </body>
 <script type="text/javascript">
  document.addEventListener('UniAppJSBridgeReady', function() {
   console.log("加载完成,可以使用uni相关接口");
  });

  function login() {//点击login发送数据。不过一般都是页面一加载的时候调用,这只是个demo
   uni.postMessage({
    data: {
     action: 'postMessage',
     userInfo: {
      openId: 222
     }
    }
   })
   uni.navigateBack();//网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。所以这段代码是必须的
  }
 </script>
</html>

然后uniapp新建一个webview页面去调用此页面

<template>
	<view class="content">
		<web-view  
			src="www.baidu.com?appId=000999&redirectUri=https://www.baidu.com/ias/app/login/token&responseType=code"//这个是登录页面(htmlA)
			@message="handleMessage">
		</web-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleMessage(evt) {  
			    this.log('接收到的消息:' + JSON.stringify(evt.detail)); 
			},
		}
	}
</script>

写了这段代码以为完成了需求,结果发现一个致命bug,就是webview只有自己手动返回时,才可以关闭,这就比较无敌了,页面登录完后,数据返回后需要手动后退,才能结束登录页面进入首页。。。uniapp没有发现解决办法只能去其他地方去找了,那就是h5+ Api

具体的思路为(htmlA)将唯一标识符放在一个定义的url传给(htmlB),

uniapp通过overrideUrlLoading监听这个地址,一旦发现匹配的地址,拦截页面跳转,将那个url传给Uniapp,然后uniapp解析字符串、

var w = plus.webview.create('www.baidu.com?appId=000999&redirectUri=https://www.baidu.com/ias/app/login/token&responseType=code');
				// 拦截所有页面跳转,可使用参数拦截weibo.com域名之外的跳转({mode:'allow',match:'.*weibo\.com/.*'})
				w.overrideUrlLoading({mode:'reject',match:'http://localhost/.*'}, (e)=>{
					// this.log('reject url: '+e.url);
					var ceTokenId=e.url.split('?')[1].split('&')[2].split('=')[1];//获取tokenId后续可作调整
					 plus.webview.close(w);//关闭webview
				});
				w.show(); // 显示窗口

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章