uniapp打开外链并在webview跳转到app内部页面
可是打开后又无法返回,想了一下之后,新建了一个页面,在页面中插入web-view,要在
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(e) {
// 获取传递过来的链接
this.url = e.url
}
}
</script>
pages.json里面配置这个新页面
{
"path": "pages/index/webview",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
}
}
点击跳转新页面,把url通过地址栏传参过去。
navToLink(){
uni.navigateTo({
url: `/pages/index/webview?url=${this.url}`
})
}
然后就完美的打开了,并且可以无缝隙返回。
uniapp中webview跳转到app内部页面
官方文档:
https://ask.dcloud.net.cn/article/35083
第一步:在webview加载的页面引入Js
<!-- uni 的 SDK,必须引用。 --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
还有一个微信小程序的,如果不考虑微信小程序,则无需引入微信的 JS-SDK。
第二步:注意调用时机
在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() { uni.getEnv(function(res) { console.log('当前环境:' + JSON.stringify(res)); }); });
第三步:实际调用
支持调用所有的 uni 路由方法,可以实现从 HTML 重新跳转回应用内的页面。
在 UniAppJSBridgeReady 后,调用路由方法跳转到应用内的页面。
官方例子:
document.addEventListener('UniAppJSBridgeReady', function() { document.querySelector('.btn-list').addEventListener('click', function(evt) { var target = evt.target; if (target.tagName === 'BUTTON') { var action = target.getAttribute('data-action'); if(action === 'navigateTo') { uni.navigateTo({ url: '/pages/component/button/button' }); } } }); });
自己使用,需要传参:
//uniappwebview跳转到app内部页面 document.addEventListener('UniAppJSBridgeReady', function () { document.querySelector('.jump-uniapp').addEventListener('click', function (evt) { var target = evt.target; var articleId = target.getAttribute('articleId'); var userName = target.getAttribute('userName'); //if (target.tagName === 'BUTTON') { //var action = target.getAttribute('data-action'); //if (action === 'navigateTo') { uni.navigateTo({ url: '/pages/details/articleDetailWebView?id=' + articleId + "&userName=" + userName }); //} //} }); });
参数就用自定义属于绑定好即可,然后使用target.getAttribute('xx')这种方式获取即可。一次成功!
最精简的写法
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <script> document.addEventListener('UniAppJSBridgeReady', function() { document.querySelector('.btn-list').addEventListener('click', function(evt) { uni.navigateTo({ url: '/pages/index/index' }); }); }); </script> <button class="btn-list">查看详情</button>