##更新于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(); // 显示窗口