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>
