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,这个是自定义的第三方页面，你可千万别当真，下面会具体说明这个页面的写法
})

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

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

	
	
  


正在跳转中，请稍后

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

 

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

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

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

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

（htmlB）根据文档引入，然后

 
  
  
  
  
  
 
 
  login
 
 

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

写了这段代码以为完成了需求，结果发现一个致命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(); // 显示窗口